diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/docs/components/cli.mdx index 7c880213ee..6488d65701 100644 --- a/apps/www/content/docs/components/cli.mdx +++ b/apps/www/content/docs/components/cli.mdx @@ -7,17 +7,10 @@ description: Use the CLI to add Plate UI components to your project. Use the `init` command to initialize configuration and dependencies for a new project with Plate UI. -The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project. +The `init` command installs dependencies, configures `tailwind.config.js`, and CSS variables for the project. ```bash -npx shadcx@latest init -u https://platejs.org/r -n plate -``` - -If you also want to use [shadcn/ui](https://ui.shadcn.com/) in your project, you can use the following command: - -```bash -npx shadcx@latest init -npx shadcx@latest init -u https://platejs.org/r -n plate +npx shadcx@latest init plate ``` You will be asked a few questions to configure `components.json`: @@ -30,7 +23,7 @@ Do you want to use CSS variables for colors? › yes ### Options ```txt -Usage: shadcx init [options] +Usage: shadcx init [options] [registry] initialize your project and install dependencies @@ -39,10 +32,10 @@ Options: -f, --force force overwrite of existing components.json. (default: false) -y, --yes skip confirmation prompt. (default: false) -c, --cwd the working directory. defaults to the current directory. - -u, --url custom registry URL. (default: https://platejs.org/r) -n, --name registry name. (default: plate) -s, --silent mute output (default: false) --src-dir use the src directory when creating a new project (default: false) + --pm package manager to use (npm, pnpm, yarn, bun) -h, --help display help for command ``` @@ -51,7 +44,14 @@ Options: Use the `add` command to add Plate UI components and dependencies to your project. ```bash -npx shadcx@latest add [component] -r plate +# Using prefix syntax +npx shadcx@latest add plate/editor plate/toolbar + +# Or mixed usage (registry will be from the first prefix found) +npx shadcx@latest add plate/editor toolbar + +# Or using registry option +npx shadcx@latest add editor toolbar -r plate ``` You will be presented with a list of components to choose from: @@ -99,13 +99,13 @@ Options: In a monorepo, you can specify the path to your workspace with the `-c` or `--cwd` option. ```bash -npx shadcx@latest init -u https://platejs.org/r -n plate -c ./apps/www +npx shadcx@latest init plate -c ./apps/www ``` or ```bash -npx shadcx@latest add align-dropdown-menu -r plate -c ./apps/www +npx shadcx@latest add plate/editor -c ./apps/www ``` ## Example components.json @@ -114,24 +114,30 @@ Here's an example `components.json` file configured for [shadcn/ui](https://ui.s ```json { + "$schema": "https://ui.shadcn.com/schema.json", "style": "default", - "tailwind": { - "config": "tailwind.config.js", - "css": "app/globals.css", - "baseColor": "slate", - "cssVariables": true - }, + "rsc": true, + "tsx": true, "aliases": { "components": "@/components", + "hooks": "@/hooks", + "lib": "@/lib", + "ui": "@/components/ui", "utils": "@/lib/utils" }, + "tailwind": { + "baseColor": "slate", + "config": "tailwind.config.ts", + "css": "src/app/globals.css", + "cssVariables": true, + "prefix": "" + }, "registries": { "plate": { - "url": "https://platejs.org/r", - "style": "default", "aliases": { "ui": "@/components/plate-ui" - } + }, + "url": "https://platejs.org/r" } } } diff --git a/apps/www/content/docs/components/components-json.mdx b/apps/www/content/docs/components/components-json.mdx index fe5f508ea6..28fc3f247d 100644 --- a/apps/www/content/docs/components/components-json.mdx +++ b/apps/www/content/docs/components/components-json.mdx @@ -16,22 +16,9 @@ We use it to understand how your project is set up and how to generate component You can create a `components.json` file in your project by running the following command: ```bash -npx shadcx@latest init +npx shadcx@latest init plate ``` -For Plate UI components, you have two options: - -1. Initialize both [shadcn/ui](https://ui.shadcn.com/) and Plate UI: - ```bash - npx shadcx@latest init - npx shadcx@latest init -u https://platejs.org/r -n plate - ``` - -2. Initialize only Plate UI: - ```bash - npx shadcx@latest init -u https://platejs.org/r -n plate - ``` - See the [CLI section](/docs/cli) for more information. ## $schema @@ -220,8 +207,11 @@ The style to use for components from this registry. Plate UI has only one style: Custom aliases for this registry. This allows you to specify a different location for UI components from this registry. - When using multiple registries, you can use the `-r` or `--registry` option with the `add` command to specify which registry to use: - ```bash - npx shadcx@latest add button -r plate - ``` + +When working with multiple registries, you can use the prefix syntax to specify which registry to use for each component: + +```bash +npx shadcx@latest add plate/button +``` + diff --git a/apps/www/content/docs/components/installation/manual.mdx b/apps/www/content/docs/components/installation/manual.mdx index ee35d4c6c5..47ccf4994a 100644 --- a/apps/www/content/docs/components/installation/manual.mdx +++ b/apps/www/content/docs/components/installation/manual.mdx @@ -16,7 +16,7 @@ Components are styled using Tailwind CSS. You need to install Tailwind CSS in yo Add the following dependencies to your project: ```bash -npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react +npm install @udecode/plate-common slate slate-react slate-history slate-hyperscript @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react ``` We use icons from [Lucide](https://lucide.dev). You can use any icon library you want. @@ -26,7 +26,7 @@ We use icons from [Lucide](https://lucide.dev). You can use any icon library you Here's what demo `tailwind.config.js` looks like: @@ -35,7 +35,7 @@ Here's what demo `tailwind.config.js` looks like: Add the following to your `styles/globals.css` file. You can learn more about using CSS variables for theming in the [theming section](/docs/components/theming). @@ -44,7 +44,7 @@ Add the following to your `styles/globals.css` file. You can learn more about us You can now start adding components to your project. ```bash -npx shadcx@latest add paragraph-element -r plate +npx shadcx@latest add plate/paragraph-element ``` diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx index ca30664830..a57edb19f5 100644 --- a/apps/www/content/docs/components/installation/next.mdx +++ b/apps/www/content/docs/components/installation/next.mdx @@ -7,9 +7,7 @@ description: Install and configure Next.js. A [template](https://github.com/udecode/plate/tree/main/templates/plate-template) is available to help you get started quickly. - **If you're using Next.js 15, see the [Next.js 15 + React 19](https://ui.shadcn.com/docs/installation/react-19) guide.** - @@ -20,14 +18,7 @@ A [template](https://github.com/udecode/plate/tree/main/templates/plate-template Run the `init` command to create a new Next.js project or to setup an existing one: ```bash -npx shadcx@latest init -u https://platejs.org/r -n plate -``` - -If you want to use [shadcn/ui](https://ui.shadcn.com/) combined with Plate UI, run instead: - -```bash -npx shadcx@latest init -npx shadcx@latest init -u https://platejs.org/r -n plate +npx shadcx@latest init plate ``` ### Configure components.json @@ -44,7 +35,7 @@ Do you want to use CSS variables for colors? › no / yes You can now start adding components to your project. ```bash -npx shadcx@latest add paragraph-element -r plate +npx shadcx@latest add plate/paragraph-element ``` The command above will add the `ParagraphElement` component to your project. diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx index ef4af1849f..92b88f203c 100644 --- a/apps/www/content/docs/components/installation/vite.mdx +++ b/apps/www/content/docs/components/installation/vite.mdx @@ -119,7 +119,7 @@ export default defineConfig({ Run `shadcx` init command to setup your project: ```bash -npx shadcx@latest init -u https://platejs.org/r -n plate +npx shadcx@latest init plate ``` ### Configure components.json @@ -136,7 +136,7 @@ Do you want to use CSS variables for colors? › no / yes You can now start adding components to your project. ```bash -npx shadcx@latest add paragraph-element +npx shadcx@latest add plate/paragraph-element ``` ### Register components diff --git a/apps/www/public/r/config.json b/apps/www/public/r/config.json index 542f91bb72..f129c2c173 100644 --- a/apps/www/public/r/config.json +++ b/apps/www/public/r/config.json @@ -1,4 +1,5 @@ { + "name": "plate", "style": "default", "tailwind": { "baseColor": "slate" diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index 58012b8705..3cf23d44a1 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -478,6 +478,35 @@ ], "type": "registry:ui" }, + { + "dependencies": [ + "@udecode/plate-media" + ], + "doc": { + "description": "A modal component for previewing and manipulating images.", + "docs": [ + { + "route": "/docs/media" + }, + { + "route": "https://pro.platejs.org/docs/components/image-preview" + } + ], + "examples": [ + "media-demo", + "media-toolbar-pro" + ] + }, + "files": [ + { + "path": "plate-ui/image-preview.tsx", + "type": "registry:ui" + } + ], + "name": "image-preview", + "registryDependencies": [], + "type": "registry:ui" + }, { "dependencies": [ "@udecode/plate-kbd" @@ -984,6 +1013,26 @@ ], "type": "registry:ui" }, + { + "dependencies": [ + "@radix-ui/react-context-menu" + ], + "doc": { + "description": "Displays a menu to the user — such as a set of actions or functions — triggered by a button.", + "links": { + "doc": "https://ui.shadcn.com/docs/components/context-menu" + } + }, + "files": [ + { + "path": "plate-ui/context-menu.tsx", + "type": "registry:ui" + } + ], + "name": "context-menu", + "registryDependencies": [], + "type": "registry:ui" + }, { "dependencies": [ "@radix-ui/react-dialog" @@ -1147,6 +1196,7 @@ ], "name": "ai-menu", "registryDependencies": [ + "use-chat", "command", "popover", "editor" @@ -1248,7 +1298,8 @@ "name": "block-context-menu", "registryDependencies": [ "calendar", - "plate-element" + "plate-element", + "context-menu" ], "type": "registry:ui" }, @@ -1463,7 +1514,11 @@ "type": "registry:ui" }, { - "dependencies": [], + "dependencies": [ + "@udecode/plate-cursor", + "@udecode/plate-dnd", + "@udecode/plate-selection" + ], "doc": { "description": "A visual overlay for collaborative cursors and selections.", "docs": [ diff --git a/apps/www/public/r/styles/default/ai-demo.json b/apps/www/public/r/styles/default/ai-demo.json index cce9c651a0..72a30715fc 100644 --- a/apps/www/public/r/styles/default/ai-demo.json +++ b/apps/www/public/r/styles/default/ai-demo.json @@ -9,7 +9,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/ai-menu.json b/apps/www/public/r/styles/default/ai-menu.json index 50e562ffe6..f50ecb8350 100644 --- a/apps/www/public/r/styles/default/ai-menu.json +++ b/apps/www/public/r/styles/default/ai-menu.json @@ -27,7 +27,7 @@ }, "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\n\nimport { faker } from '@faker-js/faker';\nimport { AIChatPlugin, useEditorChat } from '@udecode/plate-ai/react';\nimport {\n type TElement,\n type TNodeEntry,\n getAncestorNode,\n getBlocks,\n isElementEmpty,\n isHotkey,\n isSelectionAtBlockEnd,\n} from '@udecode/plate-common';\nimport {\n type PlateEditor,\n toDOMNode,\n useEditorPlugin,\n useHotkeys,\n} from '@udecode/plate-common/react';\nimport {\n BlockSelectionPlugin,\n useIsSelecting,\n} from '@udecode/plate-selection/react';\nimport { useChat } from 'ai/react';\nimport { Loader2Icon } from 'lucide-react';\n\nimport { AIChatEditor } from './ai-chat-editor';\nimport { AIMenuItems } from './ai-menu-items';\nimport { Command, CommandList, InputCommand } from './command';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\n\nexport function AIMenu() {\n const { api, editor, useOption } = useEditorPlugin(AIChatPlugin);\n const open = useOption('open');\n const mode = useOption('mode');\n const isSelecting = useIsSelecting();\n\n const aiEditorRef = React.useRef(null);\n const [value, setValue] = React.useState('');\n\n const chat = useChat({\n id: 'editor',\n // API to be implemented\n api: '/api/ai',\n // Mock the API response. Remove it when you implement the route /api/ai\n fetch: async () => {\n await new Promise((resolve) => setTimeout(resolve, 400));\n\n const stream = fakeStreamText();\n\n return new Response(stream, {\n headers: {\n Connection: 'keep-alive',\n 'Content-Type': 'text/plain',\n },\n });\n },\n });\n\n const { input, isLoading, messages, setInput } = chat;\n const [anchorElement, setAnchorElement] = React.useState(\n null\n );\n\n const setOpen = (open: boolean) => {\n if (open) {\n api.aiChat.show();\n } else {\n api.aiChat.hide();\n }\n };\n\n const show = (anchorElement: HTMLElement) => {\n setAnchorElement(anchorElement);\n setOpen(true);\n };\n\n useEditorChat({\n chat,\n onOpenBlockSelection: (blocks: TNodeEntry[]) => {\n show(toDOMNode(editor, blocks.at(-1)![0])!);\n },\n onOpenChange: (open) => {\n if (!open) {\n setAnchorElement(null);\n setInput('');\n }\n },\n onOpenCursor: () => {\n const ancestor = getAncestorNode(editor)?.[0] as TElement;\n\n if (!isSelectionAtBlockEnd(editor) && !isElementEmpty(editor, ancestor)) {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.addSelectedRow(ancestor.id as string);\n }\n\n show(toDOMNode(editor, ancestor)!);\n },\n onOpenSelection: () => {\n show(toDOMNode(editor, getBlocks(editor).at(-1)![0])!);\n },\n });\n\n useHotkeys(\n 'meta+j',\n () => {\n api.aiChat.show();\n },\n { enableOnContentEditable: true, enableOnFormTags: true }\n );\n\n return (\n \n \n\n {\n e.preventDefault();\n\n if (isLoading) {\n api.aiChat.stop();\n } else {\n api.aiChat.hide();\n }\n }}\n align=\"center\"\n avoidCollisions={false}\n side=\"bottom\"\n >\n \n {mode === 'chat' && isSelecting && messages.length > 0 && (\n \n )}\n\n {isLoading ? (\n
\n \n {messages.length > 1 ? 'Editing...' : 'Thinking...'}\n
\n ) : (\n {\n if (isHotkey('backspace')(e) && input.length === 0) {\n e.preventDefault();\n api.aiChat.hide();\n }\n if (isHotkey('enter')(e) && !e.shiftKey && !value) {\n e.preventDefault();\n void api.aiChat.submit();\n }\n }}\n onValueChange={setInput}\n placeholder=\"Ask AI anything...\"\n autoFocus\n />\n )}\n\n {!isLoading && (\n \n \n \n )}\n \n \n \n );\n}\n\n// Used for testing. Remove it after implementing useChat api.\nconst fakeStreamText = ({\n chunkCount = 10,\n streamProtocol = 'data',\n}: {\n chunkCount?: number;\n streamProtocol?: 'data' | 'text';\n} = {}) => {\n const chunks = Array.from({ length: chunkCount }, () => ({\n delay: faker.number.int({ max: 150, min: 50 }),\n texts: faker.lorem.words({ max: 3, min: 1 }) + ' ',\n }));\n const encoder = new TextEncoder();\n\n return new ReadableStream({\n async start(controller) {\n for (const chunk of chunks) {\n await new Promise((resolve) => setTimeout(resolve, chunk.delay));\n\n if (streamProtocol === 'text') {\n controller.enqueue(encoder.encode(chunk.texts));\n } else {\n controller.enqueue(\n encoder.encode(`0:${JSON.stringify(chunk.texts)}\\n`)\n );\n }\n }\n\n if (streamProtocol === 'data') {\n controller.enqueue(\n `d:{\"finishReason\":\"stop\",\"usage\":{\"promptTokens\":0,\"completionTokens\":${chunks.length}}}\\n`\n );\n }\n\n controller.close();\n },\n });\n};\n", + "content": "'use client';\n\nimport * as React from 'react';\n\nimport { AIChatPlugin, useEditorChat } from '@udecode/plate-ai/react';\nimport {\n type TElement,\n type TNodeEntry,\n getAncestorNode,\n getBlocks,\n isElementEmpty,\n isHotkey,\n isSelectionAtBlockEnd,\n} from '@udecode/plate-common';\nimport {\n type PlateEditor,\n toDOMNode,\n useEditorPlugin,\n useHotkeys,\n} from '@udecode/plate-common/react';\nimport {\n BlockSelectionPlugin,\n useIsSelecting,\n} from '@udecode/plate-selection/react';\nimport { Loader2Icon } from 'lucide-react';\n\nimport { useChat } from '@/components/editor/use-chat';\n\nimport { AIChatEditor } from './ai-chat-editor';\nimport { AIMenuItems } from './ai-menu-items';\nimport { Command, CommandList, InputCommand } from './command';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\n\nexport function AIMenu() {\n const { api, editor, useOption } = useEditorPlugin(AIChatPlugin);\n const open = useOption('open');\n const mode = useOption('mode');\n const isSelecting = useIsSelecting();\n\n const aiEditorRef = React.useRef(null);\n const [value, setValue] = React.useState('');\n\n const chat = useChat();\n\n const { input, isLoading, messages, setInput } = chat;\n const [anchorElement, setAnchorElement] = React.useState(\n null\n );\n\n const setOpen = (open: boolean) => {\n if (open) {\n api.aiChat.show();\n } else {\n api.aiChat.hide();\n }\n };\n\n const show = (anchorElement: HTMLElement) => {\n setAnchorElement(anchorElement);\n setOpen(true);\n };\n\n useEditorChat({\n chat,\n onOpenBlockSelection: (blocks: TNodeEntry[]) => {\n show(toDOMNode(editor, blocks.at(-1)![0])!);\n },\n onOpenChange: (open) => {\n if (!open) {\n setAnchorElement(null);\n setInput('');\n }\n },\n onOpenCursor: () => {\n const ancestor = getAncestorNode(editor)?.[0] as TElement;\n\n if (!isSelectionAtBlockEnd(editor) && !isElementEmpty(editor, ancestor)) {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.addSelectedRow(ancestor.id as string);\n }\n\n show(toDOMNode(editor, ancestor)!);\n },\n onOpenSelection: () => {\n show(toDOMNode(editor, getBlocks(editor).at(-1)![0])!);\n },\n });\n\n useHotkeys(\n 'meta+j',\n () => {\n api.aiChat.show();\n },\n { enableOnContentEditable: true, enableOnFormTags: true }\n );\n\n return (\n \n \n\n {\n e.preventDefault();\n\n if (isLoading) {\n api.aiChat.stop();\n } else {\n api.aiChat.hide();\n }\n }}\n align=\"center\"\n avoidCollisions={false}\n side=\"bottom\"\n >\n \n {mode === 'chat' && isSelecting && messages.length > 0 && (\n \n )}\n\n {isLoading ? (\n
\n \n {messages.length > 1 ? 'Editing...' : 'Thinking...'}\n
\n ) : (\n {\n if (isHotkey('backspace')(e) && input.length === 0) {\n e.preventDefault();\n api.aiChat.hide();\n }\n if (isHotkey('enter')(e) && !e.shiftKey && !value) {\n e.preventDefault();\n void api.aiChat.submit();\n }\n }}\n onValueChange={setInput}\n placeholder=\"Ask AI anything...\"\n autoFocus\n />\n )}\n\n {!isLoading && (\n \n \n \n )}\n \n \n \n );\n}\n", "path": "plate-ui/ai-menu.tsx", "target": "components/plate-ui/ai-menu.tsx", "type": "registry:ui" @@ -47,6 +47,7 @@ ], "name": "ai-menu", "registryDependencies": [ + "use-chat", "command", "popover", "editor" diff --git a/apps/www/public/r/styles/default/ai-plugins.json b/apps/www/public/r/styles/default/ai-plugins.json new file mode 100644 index 0000000000..f890c308cc --- /dev/null +++ b/apps/www/public/r/styles/default/ai-plugins.json @@ -0,0 +1,27 @@ +{ + "dependencies": [ + "@udecode/plate-ai", + "@udecode/plate-basic-marks", + "@udecode/plate-block-quote", + "@udecode/plate-code-block", + "@udecode/plate-font", + "@udecode/plate-heading", + "@udecode/plate-horizontal-rule", + "@udecode/plate-indent", + "@udecode/plate-indent-list", + "@udecode/plate-link", + "@udecode/plate-markdown", + "@udecode/plate-selection", + "prismjs" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react';\nimport {\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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n createPlateEditor,\n} from '@udecode/plate-common/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin } from '@udecode/plate-heading/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport Prism from 'prismjs';\n\nimport { AIMenu } from '@/components/plate-ui/ai-menu';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { SelectionOverlayPlugin } from '@/components/plate-ui/cursor-overlay';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\n\nconst createAIEditor = () => {\n const editor = createPlateEditor({\n id: 'ai',\n override: {\n components: {\n [BlockquotePlugin.key]: BlockquoteElement,\n [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n [CodeBlockPlugin.key]: CodeBlockElement,\n [CodeLinePlugin.key]: CodeLineElement,\n [CodePlugin.key]: CodeLeaf,\n [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n [HorizontalRulePlugin.key]: HrElement,\n [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n [LinkPlugin.key]: LinkElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n },\n },\n plugins: [\n ParagraphPlugin,\n IndentPlugin.configure({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n ],\n },\n }),\n IndentListPlugin.configure({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n ],\n },\n }),\n HeadingPlugin.configure({ options: { levels: 3 } }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({ options: { prism: Prism } }),\n HorizontalRulePlugin,\n LinkPlugin.configure({\n render: { afterEditable: () => },\n }),\n MarkdownPlugin.configure({ options: { indentList: true } }),\n // FIXME: Fixed the throw error: BlockSelectionPlugin is missing. readonly editor need'nt this plugin so using an empty plugin instead\n BlockSelectionPlugin.configure({\n api: {},\n extendEditor: null,\n options: {},\n render: {},\n useHooks: null,\n handlers: {},\n }),\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n ],\n value: [{ children: [{ text: '' }], type: 'p' }],\n });\n\n return editor;\n};\n\nconst systemCommon = `\\\nYou are an advanced AI-powered note-taking assistant, designed to enhance productivity and creativity in note management.\nRespond directly to user prompts with clear, concise, and relevant content. Maintain a neutral, helpful tone.\n\nRules:\n- is the entire note the user is working on.\n- is a reminder of how you should reply to INSTRUCTIONS. It does not apply to questions.\n- Anything else is the user prompt.\n- Your response should be tailored to the user's prompt, providing precise assistance to optimize note management.\n- For INSTRUCTIONS: Follow the exactly. Provide ONLY the content to be inserted or replaced. No explanations or comments.\n- For QUESTIONS: Provide a helpful and concise answer. You may include brief explanations if necessary.\n- CRITICAL: Distinguish between INSTRUCTIONS and QUESTIONS. Instructions typically ask you to modify or add content. Questions ask for information or clarification.\n`;\n\nconst systemDefault = `\\\n${systemCommon}\n- is the current block of text the user is working on.\n- Ensure your output can seamlessly fit into the existing structure.\n- CRITICAL: Provide only a single block of text. DO NOT create multiple paragraphs or separate blocks.\n\n{block}\n\n`;\n\nconst systemSelecting = `\\\n${systemCommon}\n- is the block of text containing the user's selection, providing context.\n- Ensure your output can seamlessly fit into the existing structure.\n- is the specific text the user has selected in the block and wants to modify or ask about.\n- Consider the context provided by , but only modify . Your response should be a direct replacement for .\n\n{block}\n\n\n{selection}\n\n`;\n\nconst systemBlockSelecting = `\\\n${systemCommon}\n- represents the full blocks of text the user has selected and wants to modify or ask about.\n- Your response should be a direct replacement for the entire .\n- Maintain the overall structure and formatting of the selected blocks, unless explicitly instructed otherwise.\n- CRITICAL: Provide only the content to replace . Do not add additional blocks or change the block structure unless specifically requested.\n\n{block}\n\n`;\n\nconst userDefault = `\nCRITICAL: DO NOT use block formatting. You can only use inline formatting.\nCRITICAL: DO NOT start new lines or paragraphs.\nNEVER write .\n\n{prompt}`;\n\nconst userSelecting = `\nIf this is a question, provide a helpful and concise answer about .\nIf this is an instruction, provide ONLY the text to replace . No explanations.\nEnsure it fits seamlessly within . If is empty, write ONE random sentence.\nNEVER write or .\n\n{prompt} about `;\n\nconst userBlockSelecting = `\nIf this is a question, provide a helpful and concise answer about .\nIf this is an instruction, provide ONLY the content to replace the entire . No explanations.\nMaintain the overall structure unless instructed otherwise.\nNEVER write or .\n\n{prompt} about `;\n\nexport const PROMPT_TEMPLATES = {\n systemBlockSelecting,\n systemDefault,\n systemSelecting,\n userBlockSelecting,\n userDefault,\n userSelecting,\n};\n\nexport const aiPlugins = [\n SelectionOverlayPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n AIPlugin,\n AIChatPlugin.configure({\n options: {\n createAIEditor,\n promptTemplate: ({ isBlockSelecting, isSelecting }) => {\n return isBlockSelecting\n ? PROMPT_TEMPLATES.userBlockSelecting\n : isSelecting\n ? PROMPT_TEMPLATES.userSelecting\n : PROMPT_TEMPLATES.userDefault;\n },\n scrollContainerSelector: '#scroll_container',\n systemTemplate: ({ isBlockSelecting, isSelecting }) => {\n return isBlockSelecting\n ? PROMPT_TEMPLATES.systemBlockSelecting\n : isSelecting\n ? PROMPT_TEMPLATES.systemSelecting\n : PROMPT_TEMPLATES.systemDefault;\n },\n },\n render: { afterEditable: () => },\n }),\n] as const;\n", + "path": "components/editor/plugins/ai-plugins.tsx", + "target": "components/editor/plugins/ai-plugins.tsx", + "type": "registry:component" + } + ], + "name": "ai-plugins", + "type": "registry:component" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/align-demo.json b/apps/www/public/r/styles/default/align-demo.json index 246bad5cc3..18d27d5a2e 100644 --- a/apps/www/public/r/styles/default/align-demo.json +++ b/apps/www/public/r/styles/default/align-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/alignment-demo.json b/apps/www/public/r/styles/default/alignment-demo.json deleted file mode 100644 index 16094bb354..0000000000 --- a/apps/www/public/r/styles/default/alignment-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Text alignment controls for blocks." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "alignment-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/api-ai.json b/apps/www/public/r/styles/default/api-ai.json new file mode 100644 index 0000000000..2296e52502 --- /dev/null +++ b/apps/www/public/r/styles/default/api-ai.json @@ -0,0 +1,25 @@ +{ + "dependencies": [ + "@ai-sdk/openai", + "ai" + ], + "files": [ + { + "content": "import type { NextRequest } from 'next/server';\n\nimport { createOpenAI } from '@ai-sdk/openai';\nimport { convertToCoreMessages, streamText } from 'ai';\nimport { NextResponse } from 'next/server';\n\nexport async function POST(req: NextRequest) {\n const {\n apiKey: key,\n messages,\n model = 'gpt-4o-mini',\n system,\n } = await req.json();\n\n const apiKey = key || process.env.OPENAI_API_KEY;\n\n if (!apiKey) {\n return NextResponse.json(\n { error: 'Missing OpenAI API key.' },\n { status: 401 }\n );\n }\n\n const openai = createOpenAI({ apiKey });\n\n try {\n const result = await streamText({\n maxTokens: 2048,\n messages: convertToCoreMessages(messages),\n model: openai(model),\n system: system,\n });\n\n return result.toDataStreamResponse();\n } catch {\n return NextResponse.json(\n { error: 'Failed to process AI request' },\n { status: 500 }\n );\n }\n}\n", + "path": "components/api/ai/command/route.ts", + "target": "app/api/ai/command/route.ts", + "type": "registry:page" + }, + { + "content": "import type { NextRequest } from 'next/server';\n\nimport { createOpenAI } from '@ai-sdk/openai';\nimport { generateText } from 'ai';\nimport { NextResponse } from 'next/server';\n\nexport async function POST(req: NextRequest) {\n const {\n apiKey: key,\n model = 'gpt-4o-mini',\n prompt,\n system,\n } = await req.json();\n\n const apiKey = key || process.env.OPENAI_API_KEY;\n\n if (!apiKey) {\n return NextResponse.json(\n { error: 'Missing OpenAI API key.' },\n { status: 401 }\n );\n }\n\n const openai = createOpenAI({ apiKey });\n\n try {\n const result = await generateText({\n abortSignal: req.signal,\n maxTokens: 50,\n model: openai(model),\n prompt: prompt,\n system,\n temperature: 0.7,\n });\n\n return NextResponse.json(result);\n } catch (error: any) {\n if (error.name === 'AbortError') {\n return NextResponse.json(null, { status: 408 });\n }\n\n return NextResponse.json(\n { error: 'Failed to process AI request' },\n { status: 500 }\n );\n }\n}\n", + "path": "components/api/ai/copilot/route.ts", + "target": "app/api/ai/copilot/route.ts", + "type": "registry:page" + } + ], + "name": "api-ai", + "registryDependencies": [ + "use-chat" + ], + "type": "registry:component" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/autoformat-plugin.json b/apps/www/public/r/styles/default/autoformat-plugin.json new file mode 100644 index 0000000000..acf8c169b0 --- /dev/null +++ b/apps/www/public/r/styles/default/autoformat-plugin.json @@ -0,0 +1,24 @@ +{ + "dependencies": [ + "@udecode/plate-autoformat", + "@udecode/plate-basic-marks", + "@udecode/plate-block-quote", + "@udecode/plate-code-block", + "@udecode/plate-heading", + "@udecode/plate-highlight", + "@udecode/plate-horizontal-rule", + "@udecode/plate-indent-list", + "@udecode/plate-list", + "@udecode/plate-toggle" + ], + "files": [ + { + "content": "'use client';\n\nimport type {\n AutoformatBlockRule,\n AutoformatRule,\n} from '@udecode/plate-autoformat';\nimport type { SlateEditor } from '@udecode/plate-common';\nimport type { TTodoListItemElement } from '@udecode/plate-list';\n\nimport {\n autoformatArrow,\n autoformatLegal,\n autoformatLegalHtml,\n autoformatMath,\n autoformatPunctuation,\n autoformatSmartQuotes,\n} from '@udecode/plate-autoformat';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { insertEmptyCodeBlock } from '@udecode/plate-code-block';\nimport {\n CodeBlockPlugin,\n CodeLinePlugin,\n} from '@udecode/plate-code-block/react';\nimport {\n getParentNode,\n insertNodes,\n isBlock,\n isElement,\n isType,\n setNodes,\n} from '@udecode/plate-common';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport {\n INDENT_LIST_KEYS,\n ListStyleType,\n toggleIndentList,\n} from '@udecode/plate-indent-list';\nimport { toggleList, unwrapList } from '@udecode/plate-list';\nimport {\n BulletedListPlugin,\n ListItemPlugin,\n NumberedListPlugin,\n TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport { TogglePlugin, openNextToggles } from '@udecode/plate-toggle/react';\n\nexport const preFormat: AutoformatBlockRule['preFormat'] = (editor) =>\n unwrapList(editor);\n\nexport const format = (editor: SlateEditor, customFormatting: any) => {\n if (editor.selection) {\n const parentEntry = getParentNode(editor, editor.selection);\n\n if (!parentEntry) return;\n\n const [node] = parentEntry;\n\n if (\n isElement(node) &&\n !isType(editor, node, CodeBlockPlugin.key) &&\n !isType(editor, node, CodeLinePlugin.key)\n ) {\n customFormatting();\n }\n }\n};\n\nexport const formatList = (editor: SlateEditor, elementType: string) => {\n format(editor, () =>\n toggleList(editor, {\n type: elementType,\n })\n );\n};\n\nexport const autoformatMarks: AutoformatRule[] = [\n {\n match: '***',\n mode: 'mark',\n type: [BoldPlugin.key, ItalicPlugin.key],\n },\n {\n match: '__*',\n mode: 'mark',\n type: [UnderlinePlugin.key, ItalicPlugin.key],\n },\n {\n match: '__**',\n mode: 'mark',\n type: [UnderlinePlugin.key, BoldPlugin.key],\n },\n {\n match: '___***',\n mode: 'mark',\n type: [UnderlinePlugin.key, BoldPlugin.key, ItalicPlugin.key],\n },\n {\n match: '**',\n mode: 'mark',\n type: BoldPlugin.key,\n },\n {\n match: '__',\n mode: 'mark',\n type: UnderlinePlugin.key,\n },\n {\n match: '*',\n mode: 'mark',\n type: ItalicPlugin.key,\n },\n {\n match: '_',\n mode: 'mark',\n type: ItalicPlugin.key,\n },\n {\n match: '~~',\n mode: 'mark',\n type: StrikethroughPlugin.key,\n },\n {\n match: '^',\n mode: 'mark',\n type: SuperscriptPlugin.key,\n },\n {\n match: '~',\n mode: 'mark',\n type: SubscriptPlugin.key,\n },\n {\n match: '==',\n mode: 'mark',\n type: HighlightPlugin.key,\n },\n {\n match: '≡',\n mode: 'mark',\n type: HighlightPlugin.key,\n },\n {\n match: '`',\n mode: 'mark',\n type: CodePlugin.key,\n },\n];\n\nexport const autoformatBlocks: AutoformatRule[] = [\n {\n match: '# ',\n mode: 'block',\n preFormat,\n type: HEADING_KEYS.h1,\n },\n {\n match: '## ',\n mode: 'block',\n preFormat,\n type: HEADING_KEYS.h2,\n },\n {\n match: '### ',\n mode: 'block',\n preFormat,\n type: HEADING_KEYS.h3,\n },\n {\n match: '#### ',\n mode: 'block',\n preFormat,\n type: HEADING_KEYS.h4,\n },\n {\n match: '##### ',\n mode: 'block',\n preFormat,\n type: HEADING_KEYS.h5,\n },\n {\n match: '###### ',\n mode: 'block',\n preFormat,\n type: HEADING_KEYS.h6,\n },\n {\n match: '> ',\n mode: 'block',\n preFormat,\n type: BlockquotePlugin.key,\n },\n {\n format: (editor) => {\n insertEmptyCodeBlock(editor, {\n defaultType: ParagraphPlugin.key,\n insertNodesOptions: { select: true },\n });\n },\n match: '```',\n mode: 'block',\n preFormat,\n triggerAtBlockStart: false,\n type: CodeBlockPlugin.key,\n },\n {\n match: '+ ',\n mode: 'block',\n preFormat: openNextToggles,\n type: TogglePlugin.key,\n },\n {\n format: (editor) => {\n setNodes(editor, { type: HorizontalRulePlugin.key });\n insertNodes(editor, {\n children: [{ text: '' }],\n type: ParagraphPlugin.key,\n });\n },\n match: ['---', '—-', '___ '],\n mode: 'block',\n type: HorizontalRulePlugin.key,\n },\n];\n\nexport const autoformatLists: AutoformatRule[] = [\n {\n format: (editor) => formatList(editor, BulletedListPlugin.key),\n match: ['* ', '- '],\n mode: 'block',\n preFormat,\n type: ListItemPlugin.key,\n },\n {\n format: (editor) => formatList(editor, NumberedListPlugin.key),\n match: [String.raw`^\\d+\\.$ `, String.raw`^\\d+\\)$ `],\n matchByRegex: true,\n mode: 'block',\n preFormat,\n type: ListItemPlugin.key,\n },\n {\n match: '[] ',\n mode: 'block',\n type: TodoListPlugin.key,\n },\n {\n format: (editor) =>\n setNodes(\n editor,\n { checked: true, type: TodoListPlugin.key },\n {\n match: (n) => isBlock(editor, n),\n }\n ),\n match: '[x] ',\n mode: 'block',\n type: TodoListPlugin.key,\n },\n];\n\nexport const autoformatIndentLists: AutoformatRule[] = [\n {\n format: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Disc,\n });\n },\n match: ['* ', '- '],\n mode: 'block',\n type: 'list',\n },\n {\n format: (editor) =>\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Decimal,\n }),\n match: [String.raw`^\\d+\\.$ `, String.raw`^\\d+\\)$ `],\n matchByRegex: true,\n mode: 'block',\n type: 'list',\n },\n {\n format: (editor) => {\n toggleIndentList(editor, {\n listStyleType: INDENT_LIST_KEYS.todo,\n });\n setNodes(editor, {\n checked: false,\n listStyleType: INDENT_LIST_KEYS.todo,\n });\n },\n match: ['[] '],\n mode: 'block',\n type: 'list',\n },\n {\n format: (editor) => {\n toggleIndentList(editor, {\n listStyleType: INDENT_LIST_KEYS.todo,\n });\n setNodes(editor, {\n checked: true,\n listStyleType: INDENT_LIST_KEYS.todo,\n });\n },\n match: ['[x] '],\n mode: 'block',\n type: 'list',\n },\n];\n\nexport const autoformatPlugin = AutoformatPlugin.configure({\n options: {\n enableUndoOnDelete: true,\n rules: [\n ...autoformatBlocks,\n ...autoformatMarks,\n ...autoformatSmartQuotes,\n ...autoformatPunctuation,\n ...autoformatLegal,\n ...autoformatLegalHtml,\n ...autoformatArrow,\n ...autoformatMath,\n // Use autoformatLists instead if using ListPlugin\n ...autoformatIndentLists,\n ],\n },\n});\n", + "path": "components/editor/plugins/autoformat-plugin.ts", + "target": "components/editor/plugins/autoformat-plugin.ts", + "type": "registry:component" + } + ], + "name": "autoformat-plugin", + "type": "registry:component" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/basic-elements-demo.json b/apps/www/public/r/styles/default/basic-elements-demo.json index 32762cd457..32c3fa8828 100644 --- a/apps/www/public/r/styles/default/basic-elements-demo.json +++ b/apps/www/public/r/styles/default/basic-elements-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/basic-marks-demo.json b/apps/www/public/r/styles/default/basic-marks-demo.json index 711fad838e..21581cd0cb 100644 --- a/apps/www/public/r/styles/default/basic-marks-demo.json +++ b/apps/www/public/r/styles/default/basic-marks-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/basic-nodes-demo.json b/apps/www/public/r/styles/default/basic-nodes-demo.json index e2f9d1406f..81655c7b5d 100644 --- a/apps/www/public/r/styles/default/basic-nodes-demo.json +++ b/apps/www/public/r/styles/default/basic-nodes-demo.json @@ -8,7 +8,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/block-context-menu.json b/apps/www/public/r/styles/default/block-context-menu.json index 941acd160c..1aa03c3a30 100644 --- a/apps/www/public/r/styles/default/block-context-menu.json +++ b/apps/www/public/r/styles/default/block-context-menu.json @@ -33,7 +33,8 @@ "name": "block-context-menu", "registryDependencies": [ "calendar", - "plate-element" + "plate-element", + "context-menu" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/block-menu-demo.json b/apps/www/public/r/styles/default/block-menu-demo.json index e7341ac929..bbfad593a1 100644 --- a/apps/www/public/r/styles/default/block-menu-demo.json +++ b/apps/www/public/r/styles/default/block-menu-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/block-selection-demo.json b/apps/www/public/r/styles/default/block-selection-demo.json index 0b02d31b7d..ae08a2bdee 100644 --- a/apps/www/public/r/styles/default/block-selection-demo.json +++ b/apps/www/public/r/styles/default/block-selection-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/code-block-element.json b/apps/www/public/r/styles/default/code-block-element.json index 066e47065e..30a8a6351b 100644 --- a/apps/www/public/r/styles/default/code-block-element.json +++ b/apps/www/public/r/styles/default/code-block-element.json @@ -31,7 +31,7 @@ "type": "registry:ui" }, { - "content": "'use client';\n\n/* eslint-disable unicorn/prefer-export-from */\n\nimport React, { useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCodeBlockCombobox,\n useCodeBlockComboboxState,\n} from '@udecode/plate-code-block/react';\nimport { Check, ChevronsUpDown } from 'lucide-react';\n// Prism must be imported before all language files\nimport Prism from 'prismjs';\n\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nimport 'prismjs/components/prism-antlr4.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-c.js';\nimport 'prismjs/components/prism-cmake.js';\nimport 'prismjs/components/prism-coffeescript.js';\nimport 'prismjs/components/prism-cpp.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-dart.js';\n\n// import 'prismjs/components/prism-django.js';\nimport 'prismjs/components/prism-docker.js';\n\n// import 'prismjs/components/prism-ejs.js';\nimport 'prismjs/components/prism-erlang.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-go.js';\nimport 'prismjs/components/prism-graphql.js';\nimport 'prismjs/components/prism-groovy.js';\nimport 'prismjs/components/prism-java.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-kotlin.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-lua.js';\nimport 'prismjs/components/prism-makefile.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-matlab.js';\nimport 'prismjs/components/prism-mermaid.js';\nimport 'prismjs/components/prism-objectivec.js';\nimport 'prismjs/components/prism-perl.js';\n\n// import 'prismjs/components/prism-php.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-properties.js';\nimport 'prismjs/components/prism-protobuf.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-r.js';\nimport 'prismjs/components/prism-ruby.js';\nimport 'prismjs/components/prism-sass.js';\nimport 'prismjs/components/prism-scala.js';\nimport 'prismjs/components/prism-scheme.js';\nimport 'prismjs/components/prism-scss.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n\nexport { Prism };\n\nconst languages: { label: string; value: string }[] = [\n { label: 'Plain Text', value: 'text' },\n { label: 'Bash', value: 'bash' },\n { label: 'CSS', value: 'css' },\n { label: 'Git', value: 'git' },\n { label: 'GraphQL', value: 'graphql' },\n { label: 'HTML', value: 'html' },\n { label: 'JavaScript', value: 'javascript' },\n { label: 'JSON', value: 'json' },\n { label: 'JSX', value: 'jsx' },\n { label: 'Markdown', value: 'markdown' },\n { label: 'SQL', value: 'sql' },\n { label: 'SVG', value: 'svg' },\n { label: 'TSX', value: 'tsx' },\n { label: 'TypeScript', value: 'typescript' },\n { label: 'WebAssembly', value: 'wasm' },\n { label: 'ANTLR4', value: 'antlr4' },\n { label: 'C', value: 'c' },\n { label: 'CMake', value: 'cmake' },\n { label: 'CoffeeScript', value: 'coffeescript' },\n { label: 'C#', value: 'csharp' },\n { label: 'Dart', value: 'dart' },\n { label: 'Django', value: 'django' },\n { label: 'Docker', value: 'docker' },\n { label: 'EJS', value: 'ejs' },\n { label: 'Erlang', value: 'erlang' },\n { label: 'Go', value: 'go' },\n { label: 'Groovy', value: 'groovy' },\n { label: 'Java', value: 'java' },\n { label: 'Kotlin', value: 'kotlin' },\n { label: 'LaTeX', value: 'latex' },\n { label: 'Less', value: 'less' },\n { label: 'Lua', value: 'lua' },\n { label: 'Makefile', value: 'makefile' },\n { label: 'Markup', value: 'markup' },\n { label: 'MATLAB', value: 'matlab' },\n { label: 'Mermaid', value: 'mermaid' },\n { label: 'Objective-C', value: 'objectivec' },\n { label: 'Perl', value: 'perl' },\n { label: 'PHP', value: 'php' },\n { label: 'PowerShell', value: 'powershell' },\n { label: '.properties', value: 'properties' },\n { label: 'Protocol Buffers', value: 'protobuf' },\n { label: 'Python', value: 'python' },\n { label: 'R', value: 'r' },\n { label: 'Ruby', value: 'ruby' },\n { label: 'Sass (Sass)', value: 'sass' },\n // FIXME: Error with current scala grammar\n { label: 'Scala', value: 'scala' },\n { label: 'Scheme', value: 'scheme' },\n { label: 'Sass (Scss)', value: 'scss' },\n { label: 'Shell', value: 'shell' },\n { label: 'Swift', value: 'swift' },\n { label: 'XML', value: 'xml' },\n { label: 'YAML', value: 'yaml' },\n];\n\nexport function CodeBlockCombobox() {\n const state = useCodeBlockComboboxState();\n const { commandItemProps } = useCodeBlockCombobox(state);\n\n const [open, setOpen] = useState(false);\n const [value, setValue] = useState('');\n\n if (state.readOnly) return null;\n\n const items = languages.filter(\n (language) =>\n !value ||\n language.label.toLowerCase().includes(value.toLowerCase()) ||\n language.value.toLowerCase().includes(value.toLowerCase())\n );\n\n return (\n \n \n \n {state.value\n ? languages.find((language) => language.value === state.value)\n ?.label\n : 'Plain Text'}\n \n \n \n \n \n setValue(value)}\n placeholder=\"Search language...\"\n />\n No language found.\n\n \n {items.map((language) => (\n {\n commandItemProps.onSelect(_value);\n setOpen(false);\n }}\n >\n \n {language.label}\n \n ))}\n \n \n \n \n );\n}\n", + "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCodeBlockCombobox,\n useCodeBlockComboboxState,\n} from '@udecode/plate-code-block/react';\nimport { Check, ChevronsUpDown } from 'lucide-react';\n\n// Prism must be imported before all language files\nimport Prism from 'prismjs';\n\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nimport 'prismjs/components/prism-antlr4.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-c.js';\nimport 'prismjs/components/prism-cmake.js';\nimport 'prismjs/components/prism-coffeescript.js';\nimport 'prismjs/components/prism-cpp.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-dart.js';\n\n// import 'prismjs/components/prism-django.js';\nimport 'prismjs/components/prism-docker.js';\n\n// import 'prismjs/components/prism-ejs.js';\nimport 'prismjs/components/prism-erlang.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-go.js';\nimport 'prismjs/components/prism-graphql.js';\nimport 'prismjs/components/prism-groovy.js';\nimport 'prismjs/components/prism-java.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-kotlin.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-lua.js';\nimport 'prismjs/components/prism-makefile.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-matlab.js';\nimport 'prismjs/components/prism-mermaid.js';\nimport 'prismjs/components/prism-objectivec.js';\nimport 'prismjs/components/prism-perl.js';\n\n// import 'prismjs/components/prism-php.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-properties.js';\nimport 'prismjs/components/prism-protobuf.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-r.js';\nimport 'prismjs/components/prism-ruby.js';\nimport 'prismjs/components/prism-sass.js';\nimport 'prismjs/components/prism-scala.js';\nimport 'prismjs/components/prism-scheme.js';\nimport 'prismjs/components/prism-scss.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n\nexport { Prism };\n\nconst languages: { label: string; value: string }[] = [\n { label: 'Plain Text', value: 'text' },\n { label: 'Bash', value: 'bash' },\n { label: 'CSS', value: 'css' },\n { label: 'Git', value: 'git' },\n { label: 'GraphQL', value: 'graphql' },\n { label: 'HTML', value: 'html' },\n { label: 'JavaScript', value: 'javascript' },\n { label: 'JSON', value: 'json' },\n { label: 'JSX', value: 'jsx' },\n { label: 'Markdown', value: 'markdown' },\n { label: 'SQL', value: 'sql' },\n { label: 'SVG', value: 'svg' },\n { label: 'TSX', value: 'tsx' },\n { label: 'TypeScript', value: 'typescript' },\n { label: 'WebAssembly', value: 'wasm' },\n { label: 'ANTLR4', value: 'antlr4' },\n { label: 'C', value: 'c' },\n { label: 'CMake', value: 'cmake' },\n { label: 'CoffeeScript', value: 'coffeescript' },\n { label: 'C#', value: 'csharp' },\n { label: 'Dart', value: 'dart' },\n { label: 'Django', value: 'django' },\n { label: 'Docker', value: 'docker' },\n { label: 'EJS', value: 'ejs' },\n { label: 'Erlang', value: 'erlang' },\n { label: 'Go', value: 'go' },\n { label: 'Groovy', value: 'groovy' },\n { label: 'Java', value: 'java' },\n { label: 'Kotlin', value: 'kotlin' },\n { label: 'LaTeX', value: 'latex' },\n { label: 'Less', value: 'less' },\n { label: 'Lua', value: 'lua' },\n { label: 'Makefile', value: 'makefile' },\n { label: 'Markup', value: 'markup' },\n { label: 'MATLAB', value: 'matlab' },\n { label: 'Mermaid', value: 'mermaid' },\n { label: 'Objective-C', value: 'objectivec' },\n { label: 'Perl', value: 'perl' },\n { label: 'PHP', value: 'php' },\n { label: 'PowerShell', value: 'powershell' },\n { label: '.properties', value: 'properties' },\n { label: 'Protocol Buffers', value: 'protobuf' },\n { label: 'Python', value: 'python' },\n { label: 'R', value: 'r' },\n { label: 'Ruby', value: 'ruby' },\n { label: 'Sass (Sass)', value: 'sass' },\n // FIXME: Error with current scala grammar\n { label: 'Scala', value: 'scala' },\n { label: 'Scheme', value: 'scheme' },\n { label: 'Sass (Scss)', value: 'scss' },\n { label: 'Shell', value: 'shell' },\n { label: 'Swift', value: 'swift' },\n { label: 'XML', value: 'xml' },\n { label: 'YAML', value: 'yaml' },\n];\n\nexport function CodeBlockCombobox() {\n const state = useCodeBlockComboboxState();\n const { commandItemProps } = useCodeBlockCombobox(state);\n\n const [open, setOpen] = useState(false);\n const [value, setValue] = useState('');\n\n if (state.readOnly) return null;\n\n const items = languages.filter(\n (language) =>\n !value ||\n language.label.toLowerCase().includes(value.toLowerCase()) ||\n language.value.toLowerCase().includes(value.toLowerCase())\n );\n\n return (\n \n \n \n {state.value\n ? languages.find((language) => language.value === state.value)\n ?.label\n : 'Plain Text'}\n \n \n \n \n \n setValue(value)}\n placeholder=\"Search language...\"\n />\n No language found.\n\n \n {items.map((language) => (\n {\n commandItemProps.onSelect(_value);\n setOpen(false);\n }}\n >\n \n {language.label}\n \n ))}\n \n \n \n \n );\n}\n", "path": "plate-ui/code-block-combobox.tsx", "target": "components/plate-ui/code-block-combobox.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/collaboration-demo.json b/apps/www/public/r/styles/default/collaboration-demo.json deleted file mode 100644 index b340117f28..0000000000 --- a/apps/www/public/r/styles/default/collaboration-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Real-time collaboration with cursors and selections." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "collaboration-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/color-demo.json b/apps/www/public/r/styles/default/color-demo.json deleted file mode 100644 index 5bd97908f6..0000000000 --- a/apps/www/public/r/styles/default/color-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Color picker for text and background colors." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "color-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/column-demo.json b/apps/www/public/r/styles/default/column-demo.json index 2d7022f2b3..419c3184e3 100644 --- a/apps/www/public/r/styles/default/column-demo.json +++ b/apps/www/public/r/styles/default/column-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/comment-demo.json b/apps/www/public/r/styles/default/comment-demo.json index 9a5f1434af..5d3fda70e1 100644 --- a/apps/www/public/r/styles/default/comment-demo.json +++ b/apps/www/public/r/styles/default/comment-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/comments-demo.json b/apps/www/public/r/styles/default/comments-demo.json deleted file mode 100644 index 663e3d38a7..0000000000 --- a/apps/www/public/r/styles/default/comments-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Collaborative commenting system." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "comments-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/context-menu-demo.json b/apps/www/public/r/styles/default/context-menu-demo.json deleted file mode 100644 index b404893c2f..0000000000 --- a/apps/www/public/r/styles/default/context-menu-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Block-level context menu with formatting options." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "context-menu-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/context-menu.json b/apps/www/public/r/styles/default/context-menu.json new file mode 100644 index 0000000000..7ded97416a --- /dev/null +++ b/apps/www/public/r/styles/default/context-menu.json @@ -0,0 +1,22 @@ +{ + "dependencies": [ + "@radix-ui/react-context-menu" + ], + "doc": { + "description": "Displays a menu to the user — such as a set of actions or functions — triggered by a button.", + "links": { + "doc": "https://ui.shadcn.com/docs/components/context-menu" + } + }, + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu';\nimport { cn } from '@udecode/cn';\nimport { Check, ChevronRight, Circle } from 'lucide-react';\n\nconst ContextMenu = ContextMenuPrimitive.Root;\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\nconst ContextMenuGroup = React.forwardRef<\n HTMLDivElement,\n { label?: React.ReactNode } & React.ComponentPropsWithoutRef<\n typeof ContextMenuPrimitive.Group\n >\n>(({ label, ...props }, ref) => {\n return (\n <>\n \n\n \n {label && {label}}\n {props.children}\n \n \n );\n});\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal;\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub;\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\nconst ContextMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean;\n }\n>(({ children, className, inset, ...props }, ref) => (\n \n {children}\n \n \n));\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;\n\nconst ContextMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;\n\nconst ContextMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;\n\nconst ContextMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n \n));\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ checked, children, className, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\nContextMenuCheckboxItem.displayName =\n ContextMenuPrimitive.CheckboxItem.displayName;\n\nconst ContextMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ children, className, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;\n\nconst ContextMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n \n));\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;\n\nconst ContextMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;\n\nconst ContextMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n );\n};\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\n\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n};\n", + "path": "plate-ui/context-menu.tsx", + "target": "components/plate-ui/context-menu.tsx", + "type": "registry:ui" + } + ], + "name": "context-menu", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/copilot-demo.json b/apps/www/public/r/styles/default/copilot-demo.json index 3ab59fe52d..737c0dbc6c 100644 --- a/apps/www/public/r/styles/default/copilot-demo.json +++ b/apps/www/public/r/styles/default/copilot-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/copilot-hover-card.json b/apps/www/public/r/styles/default/copilot-hover-card.json deleted file mode 100644 index 7338e5838c..0000000000 --- a/apps/www/public/r/styles/default/copilot-hover-card.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "dependencies": [ - "@udecode/plate-ai" - ], - "files": [ - { - "content": "import type { CopilotHoverCardProps } from '@udecode/plate-ai/react';\n\nexport const copilotHoverCard = ({ suggestionText }: CopilotHoverCardProps) => {\n return (\n \n {suggestionText}\n \n );\n};\n", - "path": "plate-ui/ghost-text.tsx", - "target": "", - "type": "registry:ui" - } - ], - "name": "ghost-text", - "registryDependencies": [ - "" - ], - "type": "registry:ui" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/copilot-plugins.json b/apps/www/public/r/styles/default/copilot-plugins.json new file mode 100644 index 0000000000..1a891420d7 --- /dev/null +++ b/apps/www/public/r/styles/default/copilot-plugins.json @@ -0,0 +1,20 @@ +{ + "dependencies": [ + "@udecode/plate-ai", + "@udecode/plate-markdown", + "@faker-js/faker" + ], + "files": [ + { + "content": "'use client';\n\nimport type { TElement } from '@udecode/plate-common';\n\nimport { faker } from '@faker-js/faker';\nimport { CopilotPlugin } from '@udecode/plate-ai/react';\nimport { getAncestorNode } from '@udecode/plate-common';\nimport { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown';\n\nimport { GhostText } from '@/components/plate-ui/ghost-text';\n\nexport const copilotPlugins = [\n CopilotPlugin.configure(({ api }) => ({\n options: {\n completeOptions: {\n api: '/api/ai/copilot',\n body: {\n system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.\n \n Rules:\n - Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).\n - Maintain style and tone. Don't repeat given text.\n - For unclear context, provide the most likely continuation.\n - Handle code snippets, lists, or structured text if needed.\n - Don't include \"\"\" in your response.\n - CRITICAL: Always end with a punctuation mark.\n - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.\n - If no context is provided or you can't generate a continuation, return \"0\" without explanation.`,\n },\n onError: () => {\n api.copilot.setBlockSuggestion({\n text: stripMarkdown(faker.lorem.sentence()),\n });\n },\n onFinish: (_, completion) => {\n if (completion === '0') return;\n\n api.copilot.setBlockSuggestion({\n //stripMarkdownBlocks in plus GhostText\n text: stripMarkdown(completion),\n });\n },\n },\n debounceDelay: 500,\n getPrompt: ({ editor }) => {\n const contextEntry = getAncestorNode(editor);\n\n if (!contextEntry) return '';\n\n const prompt = serializeMdNodes([contextEntry[0] as TElement]);\n\n return `Continue the text up to the next punctuation mark:\n \"\"\"\n ${prompt}\n \"\"\"`;\n },\n renderGhostText: GhostText,\n },\n })),\n] as const;\n", + "path": "components/editor/plugins/copilot-plugins.tsx", + "target": "components/editor/plugins/copilot-plugins.tsx", + "type": "registry:component" + } + ], + "name": "copilot-plugins", + "registryDependencies": [ + "ghost-text" + ], + "type": "registry:component" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/cursor-overlay.json b/apps/www/public/r/styles/default/cursor-overlay.json index d027e9197e..1f769a11af 100644 --- a/apps/www/public/r/styles/default/cursor-overlay.json +++ b/apps/www/public/r/styles/default/cursor-overlay.json @@ -1,5 +1,9 @@ { - "dependencies": [], + "dependencies": [ + "@udecode/plate-cursor", + "@udecode/plate-dnd", + "@udecode/plate-selection" + ], "doc": { "description": "A visual overlay for collaborative cursors and selections.", "docs": [ @@ -13,7 +17,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useEffect } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n createPlatePlugin,\n findEventRange,\n useEditorPlugin,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type CursorData,\n type CursorOverlayProps,\n type CursorProps,\n type CursorState,\n CursorOverlay as CursorOverlayPrimitive,\n} from '@udecode/plate-cursor';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nexport function Cursor({\n caretPosition,\n classNames,\n data,\n disableCaret,\n disableSelection,\n selectionRects,\n}: CursorProps) {\n const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n \n ))}\n {!disableCaret && caretPosition && (\n \n )}\n \n );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n const editor = useEditorRef();\n const dynamicCursors = editor.useOption(DragOverCursorPlugin, 'cursors');\n\n const allCursors = { ...cursors, ...dynamicCursors };\n\n return (\n \n );\n}\n\nconst DragOverCursorPlugin = createPlatePlugin({\n key: 'dragOverCursor',\n options: { cursors: {} as Record> },\n handlers: {\n onDragEnd: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragLeave: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragOver: ({ editor, event, plugin }) => {\n if (editor.getOptions(DndPlugin).isDragging) return;\n\n const range = findEventRange(editor, event);\n\n if (!range) return;\n\n editor.setOption(plugin, 'cursors', {\n drag: {\n key: 'drag',\n data: {\n style: {\n backgroundColor: 'hsl(222.2 47.4% 11.2%)',\n width: 3,\n },\n },\n selection: range,\n },\n });\n },\n onDrop: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n },\n});\n\nexport const SelectionOverlayPlugin = createPlatePlugin({\n key: 'selection_over_lay',\n useHooks: () => {\n const { editor } = useEditorPlugin(BlockSelectionPlugin);\n const isSelecting = editor.useOptions(BlockSelectionPlugin).isSelecting;\n\n useEffect(() => {\n if (isSelecting) {\n setTimeout(() => {\n editor.setOption(DragOverCursorPlugin, 'cursors', {});\n }, 0);\n }\n }, [editor, isSelecting]);\n },\n handlers: {\n onBlur: ({ editor, event }) => {\n const isPrevented =\n (event.relatedTarget as HTMLElement)?.dataset?.platePreventOverlay ===\n 'true';\n\n if (isPrevented) return;\n if (editor.selection) {\n editor.setOption(DragOverCursorPlugin, 'cursors', {\n drag: {\n key: 'blur',\n data: {\n selectionStyle: {\n backgroundColor: 'rgba(47, 121, 216, 0.35)',\n },\n },\n selection: editor.selection,\n },\n });\n }\n },\n onFocus: ({ editor }) => {\n editor.setOption(DragOverCursorPlugin, 'cursors', {});\n },\n },\n});\n", + "content": "'use client';\n\nimport React, { useEffect } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n createPlatePlugin,\n findEventRange,\n useEditorPlugin,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type CursorData,\n type CursorOverlayProps,\n type CursorProps,\n type CursorState,\n CursorOverlay as CursorOverlayPrimitive,\n} from '@udecode/plate-cursor';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nexport function Cursor({\n caretPosition,\n classNames,\n data,\n disableCaret,\n disableSelection,\n selectionRects,\n}: CursorProps) {\n const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n \n ))}\n {!disableCaret && caretPosition && (\n \n )}\n \n );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n const editor = useEditorRef();\n const dynamicCursors = editor.useOption(DragOverCursorPlugin, 'cursors');\n\n const allCursors = { ...cursors, ...dynamicCursors };\n\n return (\n \n );\n}\n\nexport const DragOverCursorPlugin = createPlatePlugin({\n key: 'dragOverCursor',\n options: { cursors: {} as Record> },\n handlers: {\n onDragEnd: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragLeave: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragOver: ({ editor, event, plugin }) => {\n if (editor.getOptions(DndPlugin).isDragging) return;\n\n const range = findEventRange(editor, event);\n\n if (!range) return;\n\n editor.setOption(plugin, 'cursors', {\n drag: {\n key: 'drag',\n data: {\n style: {\n backgroundColor: 'hsl(222.2 47.4% 11.2%)',\n width: 3,\n },\n },\n selection: range,\n },\n });\n },\n onDrop: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n },\n});\n\nexport const SelectionOverlayPlugin = createPlatePlugin({\n key: 'selection_overlay',\n useHooks: () => {\n const { editor } = useEditorPlugin(BlockSelectionPlugin);\n const isSelecting = editor.useOptions(BlockSelectionPlugin).isSelecting;\n\n useEffect(() => {\n if (isSelecting) {\n setTimeout(() => {\n editor.setOption(DragOverCursorPlugin, 'cursors', {});\n }, 0);\n }\n }, [editor, isSelecting]);\n },\n handlers: {\n onBlur: ({ editor, event }) => {\n const isPrevented =\n (event.relatedTarget as HTMLElement)?.dataset?.platePreventOverlay ===\n 'true';\n\n if (isPrevented) return;\n if (editor.selection) {\n editor.setOption(DragOverCursorPlugin, 'cursors', {\n drag: {\n key: 'blur',\n data: {\n selectionStyle: {\n backgroundColor: 'rgba(47, 121, 216, 0.35)',\n },\n },\n selection: editor.selection,\n },\n });\n }\n },\n onFocus: ({ editor }) => {\n editor.setOption(DragOverCursorPlugin, 'cursors', {});\n },\n },\n});\n", "path": "plate-ui/cursor-overlay.tsx", "target": "components/plate-ui/cursor-overlay.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/date-demo.json b/apps/www/public/r/styles/default/date-demo.json index 9f10a29f44..2a29dc3a8f 100644 --- a/apps/www/public/r/styles/default/date-demo.json +++ b/apps/www/public/r/styles/default/date-demo.json @@ -5,7 +5,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/dnd-demo.json b/apps/www/public/r/styles/default/dnd-demo.json index 5adad760fd..b904cf5be1 100644 --- a/apps/www/public/r/styles/default/dnd-demo.json +++ b/apps/www/public/r/styles/default/dnd-demo.json @@ -5,7 +5,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/editor-ai.json b/apps/www/public/r/styles/default/editor-ai.json new file mode 100644 index 0000000000..d74b45c2d3 --- /dev/null +++ b/apps/www/public/r/styles/default/editor-ai.json @@ -0,0 +1,121 @@ +{ + "dependencies": [ + "@udecode/plate-common", + "@udecode/plate-ai", + "@udecode/cn", + "@udecode/plate-basic-marks", + "@udecode/plate-block-quote", + "@udecode/plate-code-block", + "@udecode/plate-comments", + "@udecode/plate-date", + "@udecode/plate-dnd", + "@udecode/plate-docx", + "@udecode/plate-emoji", + "@udecode/plate-excalidraw", + "@udecode/plate-font", + "@udecode/plate-heading", + "@udecode/plate-highlight", + "@udecode/plate-horizontal-rule", + "@udecode/plate-indent", + "@udecode/plate-indent-list", + "@udecode/plate-juice", + "@udecode/plate-kbd", + "@udecode/plate-layout", + "@udecode/plate-line-height", + "@udecode/plate-link", + "@udecode/plate-list", + "@udecode/plate-markdown", + "@udecode/plate-media", + "@udecode/plate-mention", + "@udecode/plate-node-id", + "@udecode/plate-reset-node", + "@udecode/plate-select", + "@udecode/plate-selection", + "@udecode/plate-slash-command", + "@udecode/plate-tabbable", + "@udecode/plate-table", + "@udecode/plate-toggle", + "@udecode/plate-trailing-block", + "@udecode/plate-alignment", + "@udecode/plate-autoformat", + "@udecode/plate-break", + "@udecode/plate-caption", + "react-dnd", + "react-dnd-html5-backend", + "prismjs" + ], + "description": "An AI editor.", + "files": [ + { + "content": "import { PlateEditor } from '@/components/editor/plate-editor';\nimport { OpenAIProvider } from '@/components/editor/use-chat';\n\nexport default function Page() {\n return (\n
\n \n \n \n
\n );\n}\n", + "path": "block/editor-ai/page.tsx", + "target": "app/editor/page.tsx", + "type": "registry:page" + }, + { + "content": "'use client';\n\nimport React, { useRef } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { SettingsDialog } from '@/components/editor/use-chat';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport { CursorOverlay } from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport function PlateEditor() {\n const containerRef = useRef(null);\n\n const editor = useCreateEditor();\n\n return (\n \n \n \n \n \n\n \n \n\n \n \n \n\n \n\n \n \n\n \n \n \n );\n}\n", + "path": "block/editor-ai/components/editor/plate-editor.tsx", + "target": "components/editor/plate-editor.tsx", + "type": "registry:component" + }, + { + "content": "import React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { ExitBreakPlugin, SoftBreakPlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n isCodeBlockEmpty,\n isSelectionAtCodeBlockStart,\n unwrapCodeBlock,\n} from '@udecode/plate-code-block';\nimport {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n isBlockAboveEmpty,\n isSelectionAtBlockStart,\n someNode,\n} from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n PlateElement,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiInputPlugin, EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS, HEADING_LEVELS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n BulletedListPlugin,\n ListItemPlugin,\n NumberedListPlugin,\n TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { ResetNodePlugin } from '@udecode/plate-reset-node/react';\nimport { SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport {\n SlashInputPlugin,\n SlashPlugin,\n} from '@udecode/plate-slash-command/react';\nimport { TabbablePlugin } from '@udecode/plate-tabbable/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { ColumnElement } from '@/components/plate-ui/column-element';\nimport { ColumnGroupElement } from '@/components/plate-ui/column-group-element';\nimport { CommentLeaf } from '@/components/plate-ui/comment-leaf';\nimport { DragOverCursorPlugin } from '@/components/plate-ui/cursor-overlay';\nimport { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-element';\nimport { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HighlightLeaf } from '@/components/plate-ui/highlight-leaf';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { ImageElement } from '@/components/plate-ui/image-element';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\nimport { ListElement } from '@/components/plate-ui/list-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MentionElement } from '@/components/plate-ui/mention-element';\nimport { MentionInputElement } from '@/components/plate-ui/mention-input-element';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\nimport { withPlaceholders } from '@/components/plate-ui/placeholder';\nimport { SlashInputElement } from '@/components/plate-ui/slash-input-element';\nimport {\n TableCellElement,\n TableCellHeaderElement,\n} from '@/components/plate-ui/table-cell-element';\nimport { TableElement } from '@/components/plate-ui/table-element';\nimport { TableRowElement } from '@/components/plate-ui/table-row-element';\nimport { TocElement } from '@/components/plate-ui/toc-element';\nimport { ToggleElement } from '@/components/plate-ui/toggle-element';\nimport { withDraggables } from '@/components/plate-ui/with-draggables';\n\nexport const useCreateEditor = () => {\n return usePlateEditor({\n override: {\n components: withDraggables(\n withPlaceholders({\n [AIPlugin.key]: AILeaf,\n [BlockquotePlugin.key]: BlockquoteElement,\n [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }),\n [CodeBlockPlugin.key]: CodeBlockElement,\n [CodeLinePlugin.key]: CodeLineElement,\n [CodePlugin.key]: CodeLeaf,\n [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [ExcalidrawPlugin.key]: ExcalidrawElement,\n [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }),\n [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }),\n [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }),\n [HighlightPlugin.key]: HighlightLeaf,\n [HorizontalRulePlugin.key]: HrElement,\n [ImagePlugin.key]: ImageElement,\n [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n [KbdPlugin.key]: KbdLeaf,\n [LinkPlugin.key]: LinkElement,\n [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }),\n [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [MentionPlugin.key]: MentionElement,\n [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),\n [ParagraphPlugin.key]: ParagraphElement,\n [SlashInputPlugin.key]: SlashInputElement,\n [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),\n [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }),\n [TableCellHeaderPlugin.key]: TableCellHeaderElement,\n [TableCellPlugin.key]: TableCellElement,\n [TablePlugin.key]: TableElement,\n [TableRowPlugin.key]: TableRowElement,\n [TocPlugin.key]: TocElement,\n [TogglePlugin.key]: ToggleElement,\n [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n })\n ),\n },\n plugins: [\n // AI\n ...aiPlugins,\n ...copilotPlugins,\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#scroll_container`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.configure({\n render: { afterEditable: () => },\n }),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: true,\n },\n }),\n ColumnPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.configure({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n ImagePlugin.key,\n ...HEADING_LEVELS,\n ],\n },\n }),\n IndentPlugin.configure({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ...HEADING_LEVELS,\n ],\n },\n }),\n IndentListPlugin.configure({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ...HEADING_LEVELS,\n ],\n },\n options: {\n listStyleTypes: {\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.configure({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [ParagraphPlugin.key, ...HEADING_LEVELS],\n },\n }),\n\n // Functionality\n autoformatPlugin,\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#scroll_container`,\n container: `#scroll_container`,\n selectables: [`#scroll_container .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: { enableScroller: true },\n }),\n EmojiPlugin,\n ExitBreakPlugin.configure({\n options: {\n rules: [\n {\n hotkey: 'mod+enter',\n },\n {\n before: true,\n hotkey: 'mod+shift+enter',\n },\n {\n hotkey: 'enter',\n level: 1,\n query: {\n allow: HEADING_LEVELS,\n end: true,\n start: true,\n },\n relative: true,\n },\n ],\n },\n }),\n NodeIdPlugin,\n ResetNodePlugin.configure({\n options: {\n rules: [\n {\n defaultType: ParagraphPlugin.key,\n hotkey: 'Enter',\n predicate: isBlockAboveEmpty,\n types: [BlockquotePlugin.key, TodoListPlugin.key],\n },\n {\n defaultType: ParagraphPlugin.key,\n hotkey: 'Backspace',\n predicate: isSelectionAtBlockStart,\n types: [BlockquotePlugin.key, TodoListPlugin.key],\n },\n {\n defaultType: ParagraphPlugin.key,\n hotkey: 'Enter',\n predicate: isCodeBlockEmpty,\n types: [CodeBlockPlugin.key],\n onReset: unwrapCodeBlock,\n },\n {\n defaultType: ParagraphPlugin.key,\n hotkey: 'Backspace',\n predicate: isSelectionAtCodeBlockStart,\n types: [CodeBlockPlugin.key],\n onReset: unwrapCodeBlock,\n },\n ],\n },\n }),\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n SoftBreakPlugin.configure({\n options: {\n rules: [\n { hotkey: 'shift+enter' },\n {\n hotkey: 'enter',\n query: {\n allow: [\n CodeBlockPlugin.key,\n BlockquotePlugin.key,\n TableCellPlugin.key,\n TableCellHeaderPlugin.key,\n ],\n },\n },\n ],\n },\n }),\n TabbablePlugin.configure(({ editor }) => ({\n options: {\n query: () => {\n if (isSelectionAtBlockStart(editor)) return false;\n\n return !someNode(editor, {\n match: (n) => {\n return !!(\n n.type &&\n ([\n CodeBlockPlugin.key,\n TablePlugin.key,\n TodoListPlugin.key,\n ].includes(n.type as string) ||\n n.listStyleType)\n );\n },\n });\n },\n },\n })),\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n\n // Collaboration\n DragOverCursorPlugin,\n CommentsPlugin.configure({\n options: {\n myUserId: '1',\n users: {\n 1: {\n id: '1',\n avatarUrl:\n 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',\n name: 'zbeyens',\n },\n },\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ],\n value: [\n {\n id: '1',\n children: [{ text: 'Playground' }],\n type: 'h1',\n },\n {\n id: '2',\n children: [\n { text: 'A rich-text editor with AI capabilities. Try the ' },\n { bold: true, text: 'AI commands' },\n { text: ' or use ' },\n { kbd: true, text: 'Cmd+J' },\n { text: ' to open the AI menu.' },\n ],\n type: ParagraphPlugin.key,\n },\n ],\n });\n};\n", + "path": "block/editor-ai/components/editor/use-create-editor.tsx", + "target": "components/editor/use-create-editor.tsx", + "type": "registry:component" + } + ], + "name": "editor-ai", + "registryDependencies": [ + "api-ai", + "plate-types", + "ai-plugins", + "autoformat-plugin", + "copilot-plugins", + "ai-menu", + "ai-leaf", + "ghost-text", + "comments-popover", + "cursor-overlay", + "editor", + "fixed-toolbar", + "fixed-toolbar-buttons", + "floating-toolbar", + "floating-toolbar-buttons", + "block-context-menu", + "blockquote-element", + "code-block-element", + "code-leaf", + "code-line-element", + "code-syntax-leaf", + "column-element", + "column-group-element", + "comment-leaf", + "date-element", + "draggable", + "emoji-input-element", + "excalidraw-element", + "heading-element", + "highlight-leaf", + "hr-element", + "image-element", + "image-preview", + "indent-todo-marker", + "kbd-leaf", + "link-element", + "link-floating-toolbar", + "list-element", + "media-embed-element", + "mention-element", + "mention-input-element", + "paragraph-element", + "placeholder", + "slash-input-element", + "table-cell-element", + "table-element", + "table-row-element", + "toc-element", + "toggle-element" + ], + "type": "registry:block" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-basic.json b/apps/www/public/r/styles/default/editor-basic.json new file mode 100644 index 0000000000..e6cf94dd1d --- /dev/null +++ b/apps/www/public/r/styles/default/editor-basic.json @@ -0,0 +1,32 @@ +{ + "dependencies": [ + "@udecode/plate-basic-elements", + "@udecode/plate-basic-marks" + ], + "description": "A simple editor.", + "files": [ + { + "content": "import { PlateEditor } from '@/components/editor/plate-editor';\n\nexport default function Page() {\n return (\n
\n \n
\n );\n}\n", + "path": "block/editor-basic/page.tsx", + "target": "app/editor/page.tsx", + "type": "registry:page" + }, + { + "content": "'use client';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nexport function PlateEditor() {\n const editor = useCreateEditor();\n\n return (\n \n \n \n \n \n );\n}\n", + "path": "block/editor-basic/components/editor/plate-editor.tsx", + "target": "components/editor/plate-editor.tsx", + "type": "registry:component" + }, + { + "content": "'use client';\n\nimport { withProps } from '@udecode/cn';\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport {\n BasicMarksPlugin,\n BoldPlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport {\n ParagraphPlugin,\n PlateElement,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\n\nexport const useCreateEditor = () => {\n return usePlateEditor({\n override: {\n // Default styles in globals.css\n components: {\n [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n [ParagraphPlugin.key]: withProps(PlateElement, {\n as: 'p',\n className: 'mb-4',\n }),\n [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n blockquote: withProps(PlateElement, {\n as: 'blockquote',\n className: 'mb-4 border-l-4 border-[#d0d7de] pl-4 text-[#636c76]',\n }),\n h1: withProps(PlateElement, {\n as: 'h1',\n className:\n 'mb-4 mt-6 text-3xl font-semibold tracking-tight lg:text-4xl',\n }),\n h2: withProps(PlateElement, {\n as: 'h2',\n className: 'mb-4 mt-6 text-2xl font-semibold tracking-tight',\n }),\n h3: withProps(PlateElement, {\n as: 'h3',\n className: 'mb-4 mt-6 text-xl font-semibold tracking-tight',\n }),\n },\n },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n value: [\n {\n children: [{ text: 'Basic Editor' }],\n type: 'h1',\n },\n {\n children: [{ text: 'Heading 2' }],\n type: 'h2',\n },\n {\n children: [{ text: 'Heading 3' }],\n type: 'h3',\n },\n {\n children: [{ text: 'This is a blockquote element' }],\n type: 'blockquote',\n },\n {\n children: [\n { text: 'Basic marks: ' },\n { bold: true, text: 'bold' },\n { text: ', ' },\n { italic: true, text: 'italic' },\n { text: ', ' },\n { text: 'underline', underline: true },\n { text: ', ' },\n { strikethrough: true, text: 'strikethrough' },\n { text: '.' },\n ],\n type: ParagraphPlugin.key,\n },\n ],\n });\n};\n", + "path": "block/editor-basic/components/editor/use-create-editor.tsx", + "target": "components/editor/use-create-editor.tsx", + "type": "registry:component" + } + ], + "name": "editor-basic", + "registryDependencies": [ + "editor" + ], + "type": "registry:block" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-button.json b/apps/www/public/r/styles/default/editor-button.json deleted file mode 100644 index 5d3d824ba0..0000000000 --- a/apps/www/public/r/styles/default/editor-button.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "title": "With Button" - }, - "files": [ - { - "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Button } from '@/components/plate-ui/button';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorButton() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n });\n\n return (\n
\n \n \n\n \n \n \n\n \n \n
\n );\n}\n", - "path": "example/editor-button.tsx", - "target": "components/editor-button.tsx", - "type": "registry:example" - } - ], - "name": "editor-button", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-form.json b/apps/www/public/r/styles/default/editor-form.json deleted file mode 100644 index 060b74e641..0000000000 --- a/apps/www/public/r/styles/default/editor-form.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "files": [ - { - "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorForm() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n });\n\n return (\n
\n \n \n\n \n \n \n \n
\n );\n}\n", - "path": "example/editor-form.tsx", - "target": "components/editor-form.tsx", - "type": "registry:example" - } - ], - "name": "editor-form", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-ghost.json b/apps/www/public/r/styles/default/editor-ghost.json deleted file mode 100644 index 4de05e2f43..0000000000 --- a/apps/www/public/r/styles/default/editor-ghost.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "title": "Ghost" - }, - "files": [ - { - "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorGhost() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n });\n\n return (\n
\n \n \n\n \n \n \n \n
\n );\n}\n", - "path": "example/editor-ghost.tsx", - "target": "components/editor-ghost.tsx", - "type": "registry:example" - } - ], - "name": "editor-ghost", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-label.json b/apps/www/public/r/styles/default/editor-label.json deleted file mode 100644 index 6918bba86d..0000000000 --- a/apps/www/public/r/styles/default/editor-label.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "title": "With Label" - }, - "files": [ - { - "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Label } from '@/components/ui/label';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorLabel() {\n const editor = usePlateEditor({\n id: 'message',\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n });\n\n return (\n
\n \n \n \n\n \n \n \n \n
\n );\n}\n", - "path": "example/editor-label.tsx", - "target": "components/editor-label.tsx", - "type": "registry:example" - } - ], - "name": "editor-label", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-text.json b/apps/www/public/r/styles/default/editor-text.json deleted file mode 100644 index d6717540aa..0000000000 --- a/apps/www/public/r/styles/default/editor-text.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "title": "With Text" - }, - "files": [ - { - "content": "'use client';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\n\nimport { Label } from '@/components/ui/label';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\n\nexport default function EditorText() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n });\n\n return (\n
\n \n \n \n\n \n \n \n\n

\n Your message will be copied to the support team.\n

\n \n
\n );\n}\n", - "path": "example/editor-text.tsx", - "target": "components/editor-text.tsx", - "type": "registry:example" - } - ], - "name": "editor-text", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/emoji-demo.json b/apps/www/public/r/styles/default/emoji-demo.json index be8331da22..100d6b2945 100644 --- a/apps/www/public/r/styles/default/emoji-demo.json +++ b/apps/www/public/r/styles/default/emoji-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/excalidraw-demo.json b/apps/www/public/r/styles/default/excalidraw-demo.json index 483dfdf8b4..4ceeeb465b 100644 --- a/apps/www/public/r/styles/default/excalidraw-demo.json +++ b/apps/www/public/r/styles/default/excalidraw-demo.json @@ -5,7 +5,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json index c4ca95c423..e9b913043b 100644 --- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json +++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json @@ -14,7 +14,7 @@ }, "files": [ { - "content": "import React from 'react';\n\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n BulletedListPlugin,\n NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport { ImagePlugin } from '@udecode/plate-media/react';\nimport {\n BaselineIcon,\n BoldIcon,\n Code2Icon,\n ItalicIcon,\n PaintBucketIcon,\n SparklesIcon,\n StrikethroughIcon,\n UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n const readOnly = useEditorReadOnly();\n\n return (\n
\n {!readOnly && (\n <>\n \n \n \n Ask AI\n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n )}\n\n
\n\n \n \n \n \n
\n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n BulletedListPlugin,\n NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport { ImagePlugin } from '@udecode/plate-media/react';\nimport {\n BaselineIcon,\n BoldIcon,\n Code2Icon,\n ItalicIcon,\n PaintBucketIcon,\n SparklesIcon,\n StrikethroughIcon,\n UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { IndentListToolbarButton } from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListToolbarButton } from './list-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n const readOnly = useEditorReadOnly();\n\n return (\n
\n {!readOnly && (\n <>\n \n \n \n Ask AI\n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n )}\n\n
\n\n \n \n \n \n
\n );\n}\n", "path": "plate-ui/fixed-toolbar-buttons.tsx", "target": "components/plate-ui/fixed-toolbar-buttons.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/floating-toolbar-buttons.json b/apps/www/public/r/styles/default/floating-toolbar-buttons.json index d89a608710..f08a92ac3d 100644 --- a/apps/www/public/r/styles/default/floating-toolbar-buttons.json +++ b/apps/www/public/r/styles/default/floating-toolbar-buttons.json @@ -16,7 +16,7 @@ }, "files": [ { - "content": "import React from 'react';\n\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n BoldIcon,\n Code2Icon,\n ItalicIcon,\n SparklesIcon,\n StrikethroughIcon,\n UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n const readOnly = useEditorReadOnly();\n\n return (\n <>\n {!readOnly && (\n <>\n \n \n \n Ask AI\n \n \n\n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n )}\n\n \n \n\n {!readOnly && }\n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\nimport {\n BoldIcon,\n Code2Icon,\n ItalicIcon,\n SparklesIcon,\n StrikethroughIcon,\n UnderlineIcon,\n} from 'lucide-react';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n const readOnly = useEditorReadOnly();\n\n return (\n <>\n {!readOnly && (\n <>\n \n \n \n Ask AI\n \n \n\n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n )}\n\n \n \n\n {!readOnly && }\n \n \n );\n}\n", "path": "plate-ui/floating-toolbar-buttons.tsx", "target": "components/plate-ui/floating-toolbar-buttons.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/floating-toolbar-demo.json b/apps/www/public/r/styles/default/floating-toolbar-demo.json index 6a4e3f647b..f7b840a4e1 100644 --- a/apps/www/public/r/styles/default/floating-toolbar-demo.json +++ b/apps/www/public/r/styles/default/floating-toolbar-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/font-demo.json b/apps/www/public/r/styles/default/font-demo.json index 339d0836f5..e1dfb6001e 100644 --- a/apps/www/public/r/styles/default/font-demo.json +++ b/apps/www/public/r/styles/default/font-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/highlight-demo.json b/apps/www/public/r/styles/default/highlight-demo.json index 028ad7a93f..4310b97920 100644 --- a/apps/www/public/r/styles/default/highlight-demo.json +++ b/apps/www/public/r/styles/default/highlight-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/horizontal-rule-demo.json b/apps/www/public/r/styles/default/horizontal-rule-demo.json deleted file mode 100644 index 2eb61338de..0000000000 --- a/apps/www/public/r/styles/default/horizontal-rule-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Horizontal rule insertion and styling." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "horizontal-rule-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/hr-demo.json b/apps/www/public/r/styles/default/hr-demo.json index 52829371d9..46f6e6bdaa 100644 --- a/apps/www/public/r/styles/default/hr-demo.json +++ b/apps/www/public/r/styles/default/hr-demo.json @@ -5,7 +5,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/image-preview.json b/apps/www/public/r/styles/default/image-preview.json new file mode 100644 index 0000000000..08ed1c3645 --- /dev/null +++ b/apps/www/public/r/styles/default/image-preview.json @@ -0,0 +1,31 @@ +{ + "dependencies": [ + "@udecode/plate-media" + ], + "doc": { + "description": "A modal component for previewing and manipulating images.", + "docs": [ + { + "route": "/docs/media" + }, + { + "route": "https://pro.platejs.org/docs/components/image-preview" + } + ], + "examples": [ + "media-demo", + "media-toolbar-pro" + ] + }, + "files": [ + { + "content": "'use client';\n\nimport { cn, createPrimitiveComponent } from '@udecode/cn';\nimport {\n PreviewImage,\n useImagePreview,\n useImagePreviewState,\n useScaleInput,\n useScaleInputState,\n} from '@udecode/plate-media/react';\nimport { cva } from 'class-variance-authority';\nimport { ArrowLeft, ArrowRight, Download, Minus, Plus, X } from 'lucide-react';\n\nconst toolButtonVariants = cva('rounded bg-[rgba(0,0,0,0.5)] px-1', {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: 'text-white',\n disabled: 'cursor-not-allowed text-gray-400',\n },\n },\n});\n\nconst ScaleInput = createPrimitiveComponent('input')({\n propsHook: useScaleInput,\n stateHook: useScaleInputState,\n});\n\nconst SCROLL_SPEED = 4;\n\nexport const ImagePreview = () => {\n const state = useImagePreviewState({ scrollSpeed: SCROLL_SPEED });\n\n const {\n closeProps,\n currentUrlIndex,\n maskLayerProps,\n nextDisabled,\n nextProps,\n prevDisabled,\n prevProps,\n scaleTextProps,\n zommOutProps,\n zoomInDisabled,\n zoomInProps,\n zoomOutDisabled,\n } = useImagePreview(state);\n\n const { isOpen, scale } = state;\n\n return (\n \n
\n
\n
\n
\n \n e.stopPropagation()}\n >\n
\n \n \n \n {(currentUrlIndex ?? 0) + 1}\n \n \n \n
\n
\n \n \n \n
\n {state.isEditingScale ? (\n <>\n {' '}\n %\n \n ) : (\n {scale * 100 + '%'}\n )}\n
\n \n \n \n
\n {/* TODO: downLoad the image */}\n \n \n \n \n
\n
\n
\n \n );\n};\n", + "path": "plate-ui/image-preview.tsx", + "target": "components/plate-ui/image-preview.tsx", + "type": "registry:ui" + } + ], + "name": "image-preview", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/indent-demo.json b/apps/www/public/r/styles/default/indent-demo.json index 18196b42a1..e6008e4796 100644 --- a/apps/www/public/r/styles/default/indent-demo.json +++ b/apps/www/public/r/styles/default/indent-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/indent-todo-marker-component.json b/apps/www/public/r/styles/default/indent-todo-marker-component.json deleted file mode 100644 index dbc8fd0044..0000000000 --- a/apps/www/public/r/styles/default/indent-todo-marker-component.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "dependencies": [ - "@udecode/plate-indent-list" - ], - "files": [ - { - "content": "import type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useIndentTodoListElement,\n useIndentTodoListElementState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoMarker = ({\n element,\n}: Omit) => {\n const state = useIndentTodoListElementState({ element });\n const { checkboxProps } = useIndentTodoListElement(state);\n\n return (\n
\n \n
\n );\n};\n\nexport const TodoLi = (props: PlateRenderElementProps) => {\n const { children, element } = props;\n\n return (\n \n {children}\n \n );\n};\n", - "path": "plate-ui/indent-todo-marker-component.tsx", - "target": "components/plate-ui/indent-todo-marker-component.tsx", - "type": "registry:ui" - } - ], - "name": "indent-todo-marker-component", - "registryDependencies": [ - "checkbox" - ], - "type": "registry:ui" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/index.json b/apps/www/public/r/styles/default/index.json index 80a0be635e..021fe65b44 100644 --- a/apps/www/public/r/styles/default/index.json +++ b/apps/www/public/r/styles/default/index.json @@ -5,16 +5,44 @@ "tailwindcss-animate", "class-variance-authority", "lucide-react", - "@udecode/cn" + "@udecode/cn", + "@udecode/plate-common", + "slate", + "slate-react", + "slate-history", + "slate-hyperscript" ], "registryDependencies": [], "tailwind": { "config": { "plugins": [ "require(\"tailwindcss-animate\")" - ] + ], + "theme": { + "extend": { + "colors": { + "brand": { + "DEFAULT": "hsl(var(--brand))", + "foreground": "hsl(var(--brand-foreground))" + }, + "highlight": { + "DEFAULT": "hsl(var(--highlight))", + "foreground": "hsl(var(--highlight-foreground))" + } + } + } + } + } + }, + "cssVars": { + "light": { + "--brand": "217.2 91.2% 59.8%", + "--highlight": "47.9 95.8% 53.1%" + }, + "dark": { + "--brand": "213.3 93.9% 67.8%", + "--highlight": "48 96% 53%" } }, - "cssVars": {}, "files": [] } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/insert-dropdown-menu.json b/apps/www/public/r/styles/default/insert-dropdown-menu.json index 2665a441c0..2f0eb4f4e8 100644 --- a/apps/www/public/r/styles/default/insert-dropdown-menu.json +++ b/apps/www/public/r/styles/default/insert-dropdown-menu.json @@ -21,7 +21,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type PlateEditor,\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n FilmIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ImageIcon,\n Link2Icon,\n ListIcon,\n ListOrderedIcon,\n MinusIcon,\n PenToolIcon,\n PilcrowIcon,\n PlusIcon,\n QuoteIcon,\n SquareIcon,\n TableIcon,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/lib/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n onSelect: (editor: PlateEditor, value: string) => void;\n value: string;\n focusEditor?: boolean;\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'Basic blocks',\n items: [\n {\n icon: ,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: ,\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: 'Divider',\n value: HorizontalRulePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Lists',\n items: [\n {\n icon: ,\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Media',\n items: [\n {\n icon: ,\n label: 'Image',\n value: ImagePlugin.key,\n },\n {\n icon: ,\n label: 'Embed',\n value: MediaEmbedPlugin.key,\n },\n {\n icon: ,\n label: 'Excalidraw',\n value: ExcalidrawPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: ,\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n icon: ,\n label: 'Link',\n value: LinkPlugin.key,\n },\n {\n focusEditor: true,\n icon: ,\n label: 'Date',\n value: DatePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\n },\n })),\n },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {groups.map(({ group, items: nestedItems }) => (\n \n {nestedItems.map(({ icon, label, value, onSelect }) => (\n {\n onSelect(editor, value);\n focusEditor(editor);\n }}\n >\n {icon}\n {label}\n \n ))}\n \n ))}\n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type PlateEditor,\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n FilmIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ImageIcon,\n Link2Icon,\n ListIcon,\n ListOrderedIcon,\n MinusIcon,\n PenToolIcon,\n PilcrowIcon,\n PlusIcon,\n QuoteIcon,\n SquareIcon,\n TableIcon,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n onSelect: (editor: PlateEditor, value: string) => void;\n value: string;\n focusEditor?: boolean;\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'Basic blocks',\n items: [\n {\n icon: ,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: ,\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: 'Divider',\n value: HorizontalRulePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Lists',\n items: [\n {\n icon: ,\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Media',\n items: [\n {\n icon: ,\n label: 'Image',\n value: ImagePlugin.key,\n },\n {\n icon: ,\n label: 'Embed',\n value: MediaEmbedPlugin.key,\n },\n {\n icon: ,\n label: 'Excalidraw',\n value: ExcalidrawPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: ,\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n icon: ,\n label: 'Link',\n value: LinkPlugin.key,\n },\n {\n focusEditor: true,\n icon: ,\n label: 'Date',\n value: DatePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\n },\n })),\n },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {groups.map(({ group, items: nestedItems }) => (\n \n {nestedItems.map(({ icon, label, value, onSelect }) => (\n {\n onSelect(editor, value);\n focusEditor(editor);\n }}\n >\n {icon}\n {label}\n \n ))}\n \n ))}\n \n \n );\n}\n", "path": "plate-ui/insert-dropdown-menu.tsx", "target": "components/plate-ui/insert-dropdown-menu.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/kbd-demo.json b/apps/www/public/r/styles/default/kbd-demo.json index 60156a5318..7a36837df2 100644 --- a/apps/www/public/r/styles/default/kbd-demo.json +++ b/apps/www/public/r/styles/default/kbd-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/line-height-demo.json b/apps/www/public/r/styles/default/line-height-demo.json index 1f04e4b158..f44c90ea52 100644 --- a/apps/www/public/r/styles/default/line-height-demo.json +++ b/apps/www/public/r/styles/default/line-height-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/link-demo.json b/apps/www/public/r/styles/default/link-demo.json index 95caf0998c..f322318257 100644 --- a/apps/www/public/r/styles/default/link-demo.json +++ b/apps/www/public/r/styles/default/link-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/list-demo.json b/apps/www/public/r/styles/default/list-demo.json index c3fb8fddf3..445cf399fa 100644 --- a/apps/www/public/r/styles/default/list-demo.json +++ b/apps/www/public/r/styles/default/list-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/media-demo.json b/apps/www/public/r/styles/default/media-demo.json index c0a0dd5d85..7e868eb34a 100644 --- a/apps/www/public/r/styles/default/media-demo.json +++ b/apps/www/public/r/styles/default/media-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/mention-demo.json b/apps/www/public/r/styles/default/mention-demo.json index 280d360a46..d308844b7b 100644 --- a/apps/www/public/r/styles/default/mention-demo.json +++ b/apps/www/public/r/styles/default/mention-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/mode-demo.json b/apps/www/public/r/styles/default/mode-demo.json index 75e9ab694d..a0771c8164 100644 --- a/apps/www/public/r/styles/default/mode-demo.json +++ b/apps/www/public/r/styles/default/mode-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/more-dropdown-menu.json b/apps/www/public/r/styles/default/more-dropdown-menu.json index 1f44ffd6b7..7b82b5a5bf 100644 --- a/apps/www/public/r/styles/default/more-dropdown-menu.json +++ b/apps/www/public/r/styles/default/more-dropdown-menu.json @@ -19,7 +19,7 @@ }, "files": [ { - "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n SubscriptPlugin,\n SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { collapseSelection } from '@udecode/plate-common';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n HighlighterIcon,\n KeyboardIcon,\n MoreHorizontalIcon,\n SubscriptIcon,\n SuperscriptIcon,\n} from 'lucide-react';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n \n {\n editor.tf.toggle.mark({ key: HighlightPlugin.key });\n collapseSelection(editor, { edge: 'end' });\n focusEditor(editor);\n }}\n >\n \n Highlight\n \n\n {\n editor.tf.toggle.mark({ key: KbdPlugin.key });\n collapseSelection(editor, { edge: 'end' });\n focusEditor(editor);\n }}\n >\n \n Keyboard input\n \n\n {\n editor.tf.toggle.mark({\n key: SuperscriptPlugin.key,\n clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n editor.tf.toggle.mark({\n key: SubscriptPlugin.key,\n clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n \n );\n}\n", + "content": "'use client';\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n SubscriptPlugin,\n SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { collapseSelection } from '@udecode/plate-common';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n HighlighterIcon,\n KeyboardIcon,\n MoreHorizontalIcon,\n SubscriptIcon,\n SuperscriptIcon,\n} from 'lucide-react';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n \n {\n editor.tf.toggle.mark({ key: HighlightPlugin.key });\n collapseSelection(editor, { edge: 'end' });\n focusEditor(editor);\n }}\n >\n \n Highlight\n \n\n {\n editor.tf.toggle.mark({ key: KbdPlugin.key });\n collapseSelection(editor, { edge: 'end' });\n focusEditor(editor);\n }}\n >\n \n Keyboard input\n \n\n {\n editor.tf.toggle.mark({\n key: SuperscriptPlugin.key,\n clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n editor.tf.toggle.mark({\n key: SubscriptPlugin.key,\n clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n \n );\n}\n", "path": "plate-ui/more-dropdown-menu.tsx", "target": "components/plate-ui/more-dropdown-menu.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/placeholder-demo.json b/apps/www/public/r/styles/default/placeholder-demo.json index f51c1454f1..3aadb08527 100644 --- a/apps/www/public/r/styles/default/placeholder-demo.json +++ b/apps/www/public/r/styles/default/placeholder-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/plate-types.json b/apps/www/public/r/styles/default/plate-types.json index 588114433d..b918d6a219 100644 --- a/apps/www/public/r/styles/default/plate-types.json +++ b/apps/www/public/r/styles/default/plate-types.json @@ -1,13 +1,27 @@ { - "external": true, + "dependencies": [ + "@udecode/plate-block-quote", + "@udecode/plate-code-block", + "@udecode/plate-comments", + "@udecode/plate-common", + "@udecode/plate-excalidraw", + "@udecode/plate-heading", + "@udecode/plate-horizontal-rule", + "@udecode/plate-link", + "@udecode/plate-list", + "@udecode/plate-media", + "@udecode/plate-mention", + "@udecode/plate-table", + "@udecode/plate-toggle" + ], "files": [ { - "content": "import type React from 'react';\n\nimport type { usePlaygroundEditor } from '@/registry/default/example/playground-demo';\nimport type { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport type {\n CodeBlockPlugin,\n CodeLinePlugin,\n} from '@udecode/plate-code-block/react';\nimport type { TCommentText } from '@udecode/plate-comments';\nimport type { ElementOf, TElement, TText } from '@udecode/plate-common';\nimport type { TExcalidrawElement } from '@udecode/plate-excalidraw';\nimport type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport type { HEADING_KEYS } from '@udecode/plate-heading';\nimport type { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport type { TLinkElement } from '@udecode/plate-link';\nimport type { LinkPlugin } from '@udecode/plate-link/react';\nimport type { TTodoListItemElement } from '@udecode/plate-list';\nimport type {\n BulletedListPlugin,\n ListItemPlugin,\n NumberedListPlugin,\n TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport type { TImageElement, TMediaEmbedElement } from '@udecode/plate-media';\nimport type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport type {\n TMentionElement,\n TMentionInputElement,\n} from '@udecode/plate-mention';\nimport type {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport type { TTableElement } from '@udecode/plate-table';\nimport type {\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport type { TToggleElement } from '@udecode/plate-toggle';\nimport type { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport {\n type ParagraphPlugin,\n useEditorRef,\n} from '@udecode/plate-common/react';\n\n/** Text */\n\nexport type EmptyText = {\n text: '';\n};\n\nexport type PlainText = {\n text: string;\n};\n\nexport interface RichText extends TText, TCommentText {\n backgroundColor?: React.CSSProperties['backgroundColor'];\n bold?: boolean;\n code?: boolean;\n color?: React.CSSProperties['color'];\n fontFamily?: React.CSSProperties['fontFamily'];\n fontSize?: React.CSSProperties['fontSize'];\n fontWeight?: React.CSSProperties['fontWeight'];\n italic?: boolean;\n kbd?: boolean;\n strikethrough?: boolean;\n subscript?: boolean;\n underline?: boolean;\n}\n\n/** Inline Elements */\n\nexport interface MyLinkElement extends TLinkElement {\n children: RichText[];\n type: typeof LinkPlugin.key;\n}\n\nexport interface MyMentionInputElement extends TMentionInputElement {\n children: [PlainText];\n type: typeof MentionInputPlugin.key;\n}\n\nexport interface MyMentionElement extends TMentionElement {\n children: [EmptyText];\n type: typeof MentionPlugin.key;\n}\n\nexport type MyInlineElement =\n | MyLinkElement\n | MyMentionElement\n | MyMentionInputElement;\n\nexport type MyInlineDescendant = MyInlineElement | RichText;\n\nexport type MyInlineChildren = MyInlineDescendant[];\n\n/** Block props */\n\nexport interface MyIndentProps {\n indent?: number;\n}\n\nexport interface MyIndentListProps extends MyIndentProps {\n listRestart?: number;\n listStart?: number;\n listStyleType?: string;\n}\n\nexport interface MyLineHeightProps {\n lineHeight?: React.CSSProperties['lineHeight'];\n}\n\nexport interface MyAlignProps {\n align?: React.CSSProperties['textAlign'];\n}\n\nexport interface MyBlockElement\n extends TElement,\n MyIndentListProps,\n MyLineHeightProps {\n id?: string;\n}\n\n/** Blocks */\n\nexport interface MyParagraphElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof ParagraphPlugin.key;\n}\n\nexport interface MyH1Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h1;\n}\n\nexport interface MyH2Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h2;\n}\n\nexport interface MyH3Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h3;\n}\n\nexport interface MyH4Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h4;\n}\n\nexport interface MyH5Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h5;\n}\n\nexport interface MyH6Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h6;\n}\n\nexport interface MyBlockquoteElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof BlockquotePlugin.key;\n}\n\nexport interface MyCodeBlockElement extends MyBlockElement {\n children: MyCodeLineElement[];\n type: typeof CodeBlockPlugin.key;\n}\n\nexport interface MyCodeLineElement extends TElement {\n children: PlainText[];\n type: typeof CodeLinePlugin.key;\n}\n\nexport interface MyTableElement extends TTableElement, MyBlockElement {\n children: MyTableRowElement[];\n type: typeof TablePlugin.key;\n}\n\nexport interface MyTableRowElement extends TElement {\n children: MyTableCellElement[];\n type: typeof TableRowPlugin.key;\n}\n\nexport interface MyTableCellElement extends TElement {\n children: MyNestableBlock[];\n type: typeof TableCellPlugin.key;\n}\n\nexport interface MyBulletedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof BulletedListPlugin.key;\n}\n\nexport interface MyNumberedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof NumberedListPlugin.key;\n}\n\nexport interface MyListItemElement extends TElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof ListItemPlugin.key;\n}\n\nexport interface MyTodoListElement\n extends TTodoListItemElement,\n MyBlockElement {\n children: MyInlineChildren;\n type: typeof TodoListPlugin.key;\n}\n\nexport interface MyToggleElement extends TToggleElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof TogglePlugin.key;\n}\n\nexport interface MyImageElement extends TImageElement, MyBlockElement {\n children: [EmptyText];\n type: typeof ImagePlugin.key;\n}\n\nexport interface MyMediaEmbedElement\n extends TMediaEmbedElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof MediaEmbedPlugin.key;\n}\n\nexport interface MyHrElement extends MyBlockElement {\n children: [EmptyText];\n type: typeof HorizontalRulePlugin.key;\n}\n\nexport interface MyExcalidrawElement\n extends TExcalidrawElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof ExcalidrawPlugin.key;\n}\n\nexport type MyNestableBlock = MyParagraphElement;\n\nexport type MyElement = ElementOf;\n\nexport type MyBlock = Exclude;\n\nexport type MyRootBlock =\n | MyBlockquoteElement\n | MyBulletedListElement\n | MyCodeBlockElement\n | MyExcalidrawElement\n | MyH1Element\n | MyH2Element\n | MyH3Element\n | MyH4Element\n | MyH5Element\n | MyH6Element\n | MyHrElement\n | MyImageElement\n | MyMediaEmbedElement\n | MyNumberedListElement\n | MyParagraphElement\n | MyTableElement\n | MyTodoListElement\n | MyToggleElement;\n\n/** Editor types */\n\nexport type MyValue = MyRootBlock[];\n\nexport type MyEditor = ReturnType;\n\nexport const useMyEditorRef = () => useEditorRef();\n", - "path": "lib/plate-types.ts", - "target": "lib/plate-types.ts", - "type": "registry:lib" + "content": "'use client';\n\nimport type React from 'react';\n\nimport type { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport type {\n CodeBlockPlugin,\n CodeLinePlugin,\n} from '@udecode/plate-code-block/react';\nimport type { TCommentText } from '@udecode/plate-comments';\nimport type { TElement, TText } from '@udecode/plate-common';\nimport type { ParagraphPlugin } from '@udecode/plate-common/react';\nimport type { TExcalidrawElement } from '@udecode/plate-excalidraw';\nimport type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport type { HEADING_KEYS } from '@udecode/plate-heading';\nimport type { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport type { TLinkElement } from '@udecode/plate-link';\nimport type { LinkPlugin } from '@udecode/plate-link/react';\nimport type { TTodoListItemElement } from '@udecode/plate-list';\nimport type {\n BulletedListPlugin,\n ListItemPlugin,\n NumberedListPlugin,\n TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport type { TImageElement, TMediaEmbedElement } from '@udecode/plate-media';\nimport type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport type {\n TMentionElement,\n TMentionInputElement,\n} from '@udecode/plate-mention';\nimport type {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport type { TTableElement } from '@udecode/plate-table';\nimport type {\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport type { TToggleElement } from '@udecode/plate-toggle';\nimport type { TogglePlugin } from '@udecode/plate-toggle/react';\n\n/** Text */\n\nexport type EmptyText = {\n text: '';\n};\n\nexport type PlainText = {\n text: string;\n};\n\nexport interface RichText extends TText, TCommentText {\n backgroundColor?: React.CSSProperties['backgroundColor'];\n bold?: boolean;\n code?: boolean;\n color?: React.CSSProperties['color'];\n fontFamily?: React.CSSProperties['fontFamily'];\n fontSize?: React.CSSProperties['fontSize'];\n fontWeight?: React.CSSProperties['fontWeight'];\n italic?: boolean;\n kbd?: boolean;\n strikethrough?: boolean;\n subscript?: boolean;\n underline?: boolean;\n}\n\n/** Inline Elements */\n\nexport interface MyLinkElement extends TLinkElement {\n children: RichText[];\n type: typeof LinkPlugin.key;\n}\n\nexport interface MyMentionInputElement extends TMentionInputElement {\n children: [PlainText];\n type: typeof MentionInputPlugin.key;\n}\n\nexport interface MyMentionElement extends TMentionElement {\n children: [EmptyText];\n type: typeof MentionPlugin.key;\n}\n\nexport type MyInlineElement =\n | MyLinkElement\n | MyMentionElement\n | MyMentionInputElement;\n\nexport type MyInlineDescendant = MyInlineElement | RichText;\n\nexport type MyInlineChildren = MyInlineDescendant[];\n\n/** Block props */\n\nexport interface MyIndentProps {\n indent?: number;\n}\n\nexport interface MyIndentListProps extends MyIndentProps {\n listRestart?: number;\n listStart?: number;\n listStyleType?: string;\n}\n\nexport interface MyLineHeightProps {\n lineHeight?: React.CSSProperties['lineHeight'];\n}\n\nexport interface MyAlignProps {\n align?: React.CSSProperties['textAlign'];\n}\n\nexport interface MyBlockElement\n extends TElement,\n MyIndentListProps,\n MyLineHeightProps {\n id?: string;\n}\n\n/** Blocks */\n\nexport interface MyParagraphElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof ParagraphPlugin.key;\n}\n\nexport interface MyH1Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h1;\n}\n\nexport interface MyH2Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h2;\n}\n\nexport interface MyH3Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h3;\n}\n\nexport interface MyH4Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h4;\n}\n\nexport interface MyH5Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h5;\n}\n\nexport interface MyH6Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h6;\n}\n\nexport interface MyBlockquoteElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof BlockquotePlugin.key;\n}\n\nexport interface MyCodeBlockElement extends MyBlockElement {\n children: MyCodeLineElement[];\n type: typeof CodeBlockPlugin.key;\n}\n\nexport interface MyCodeLineElement extends TElement {\n children: PlainText[];\n type: typeof CodeLinePlugin.key;\n}\n\nexport interface MyTableElement extends TTableElement, MyBlockElement {\n children: MyTableRowElement[];\n type: typeof TablePlugin.key;\n}\n\nexport interface MyTableRowElement extends TElement {\n children: MyTableCellElement[];\n type: typeof TableRowPlugin.key;\n}\n\nexport interface MyTableCellElement extends TElement {\n children: MyNestableBlock[];\n type: typeof TableCellPlugin.key;\n}\n\nexport interface MyBulletedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof BulletedListPlugin.key;\n}\n\nexport interface MyNumberedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof NumberedListPlugin.key;\n}\n\nexport interface MyListItemElement extends TElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof ListItemPlugin.key;\n}\n\nexport interface MyTodoListElement\n extends TTodoListItemElement,\n MyBlockElement {\n children: MyInlineChildren;\n type: typeof TodoListPlugin.key;\n}\n\nexport interface MyToggleElement extends TToggleElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof TogglePlugin.key;\n}\n\nexport interface MyImageElement extends TImageElement, MyBlockElement {\n children: [EmptyText];\n type: typeof ImagePlugin.key;\n}\n\nexport interface MyMediaEmbedElement\n extends TMediaEmbedElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof MediaEmbedPlugin.key;\n}\n\nexport interface MyHrElement extends MyBlockElement {\n children: [EmptyText];\n type: typeof HorizontalRulePlugin.key;\n}\n\nexport interface MyExcalidrawElement\n extends TExcalidrawElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof ExcalidrawPlugin.key;\n}\n\nexport type MyNestableBlock = MyParagraphElement;\n\nexport type MyRootBlock =\n | MyBlockquoteElement\n | MyBulletedListElement\n | MyCodeBlockElement\n | MyExcalidrawElement\n | MyH1Element\n | MyH2Element\n | MyH3Element\n | MyH4Element\n | MyH5Element\n | MyH6Element\n | MyHrElement\n | MyImageElement\n | MyMediaEmbedElement\n | MyNumberedListElement\n | MyParagraphElement\n | MyTableElement\n | MyTodoListElement\n | MyToggleElement;\n\nexport type MyValue = MyRootBlock[];\n\n// export type MyElement = ElementOf;\n\n// export type MyBlock = Exclude;\n\n// export type MyEditor = ReturnType;\n\n// export const useEditor = () => useEditorRef();\n", + "path": "components/editor/plate-types.ts", + "target": "components/editor/plate-types.ts", + "type": "registry:component" } ], "name": "plate-types", - "type": "registry:lib" + "type": "registry:component" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/playground-demo.json b/apps/www/public/r/styles/default/playground-demo.json index aa7ce31453..9b46976dd3 100644 --- a/apps/www/public/r/styles/default/playground-demo.json +++ b/apps/www/public/r/styles/default/playground-demo.json @@ -1,7 +1,7 @@ { "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/resizable-demo.json b/apps/www/public/r/styles/default/resizable-demo.json index 47692a0963..a71c1e2b2d 100644 --- a/apps/www/public/r/styles/default/resizable-demo.json +++ b/apps/www/public/r/styles/default/resizable-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/search-highlight-leaf.json b/apps/www/public/r/styles/default/search-highlight-leaf.json index 153ac83ad8..7af31a5af5 100644 --- a/apps/www/public/r/styles/default/search-highlight-leaf.json +++ b/apps/www/public/r/styles/default/search-highlight-leaf.json @@ -5,7 +5,7 @@ }, "files": [ { - "content": "import { withCn } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100');\n", + "content": "'use client';\n\nimport { withCn } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100');\n", "path": "plate-ui/search-highlight-leaf.tsx", "target": "components/plate-ui/search-highlight-leaf.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/selection-demo.json b/apps/www/public/r/styles/default/selection-demo.json deleted file mode 100644 index 81a67ff4e5..0000000000 --- a/apps/www/public/r/styles/default/selection-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Visual block selection with keyboard support." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "selection-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/slash-command-demo.json b/apps/www/public/r/styles/default/slash-command-demo.json index 18fab7b935..854a585fdd 100644 --- a/apps/www/public/r/styles/default/slash-command-demo.json +++ b/apps/www/public/r/styles/default/slash-command-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/slash-input-element.json b/apps/www/public/r/styles/default/slash-input-element.json index ed8eb55338..c8d56f07eb 100644 --- a/apps/www/public/r/styles/default/slash-input-element.json +++ b/apps/www/public/r/styles/default/slash-input-element.json @@ -24,7 +24,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { type PlateEditor, ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Code2,\n Columns3Icon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ListIcon,\n ListOrdered,\n PilcrowIcon,\n Quote,\n SparklesIcon,\n Square,\n Table,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/lib/transforms';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxGroup,\n InlineComboboxGroupLabel,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n\n onSelect: (editor: PlateEditor, value: string) => void;\n\n value: string;\n className?: string;\n focusEditor?: boolean;\n keywords?: string[];\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'AI',\n items: [\n {\n focusEditor: false,\n icon: ,\n value: 'AI',\n onSelect: (editor) => {\n editor.getApi(AIChatPlugin).aiChat.show();\n },\n },\n ],\n },\n {\n group: 'Basic blocks',\n items: [\n {\n icon: ,\n keywords: ['paragraph'],\n label: 'Text',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n keywords: ['title', 'h1'],\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h2'],\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h3'],\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n keywords: ['unordered', 'ul', '-'],\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n keywords: ['ordered', 'ol', '1'],\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n keywords: ['checklist', 'task', 'checkbox', '[]'],\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n keywords: ['collapsible', 'expandable'],\n label: 'Toggle',\n value: TogglePlugin.key,\n },\n {\n icon: ,\n keywords: ['```'],\n label: 'Code Block',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: ,\n keywords: ['citation', 'blockquote', 'quote', '>'],\n label: 'Blockquote',\n value: BlockquotePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: ,\n keywords: ['toc'],\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n focusEditor: true,\n icon: ,\n keywords: ['time'],\n label: 'Date',\n value: DatePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\n },\n })),\n },\n];\n\nexport const SlashInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n\n return (\n \n \n \n\n \n No results\n\n {groups.map(({ group, items }) => (\n \n {group}\n\n {items.map(\n ({ focusEditor, icon, keywords, label, value, onSelect }) => (\n onSelect(editor, value)}\n label={label}\n focusEditor={focusEditor}\n group={group}\n keywords={keywords}\n >\n
{icon}
\n {label ?? value}\n \n )\n )}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { type PlateEditor, ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Code2,\n Columns3Icon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ListIcon,\n ListOrdered,\n PilcrowIcon,\n Quote,\n SparklesIcon,\n Square,\n Table,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/components/editor/transforms';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxGroup,\n InlineComboboxGroupLabel,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n\n onSelect: (editor: PlateEditor, value: string) => void;\n\n value: string;\n className?: string;\n focusEditor?: boolean;\n keywords?: string[];\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'AI',\n items: [\n {\n focusEditor: false,\n icon: ,\n value: 'AI',\n onSelect: (editor) => {\n editor.getApi(AIChatPlugin).aiChat.show();\n },\n },\n ],\n },\n {\n group: 'Basic blocks',\n items: [\n {\n icon: ,\n keywords: ['paragraph'],\n label: 'Text',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n keywords: ['title', 'h1'],\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h2'],\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h3'],\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n keywords: ['unordered', 'ul', '-'],\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n keywords: ['ordered', 'ol', '1'],\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n keywords: ['checklist', 'task', 'checkbox', '[]'],\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n keywords: ['collapsible', 'expandable'],\n label: 'Toggle',\n value: TogglePlugin.key,\n },\n {\n icon: ,\n keywords: ['```'],\n label: 'Code Block',\n value: CodeBlockPlugin.key,\n },\n {\n icon:
,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: ,\n keywords: ['citation', 'blockquote', 'quote', '>'],\n label: 'Blockquote',\n value: BlockquotePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: ,\n keywords: ['toc'],\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n focusEditor: true,\n icon: ,\n keywords: ['time'],\n label: 'Date',\n value: DatePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\n },\n })),\n },\n];\n\nexport const SlashInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n\n return (\n \n \n \n\n \n No results\n\n {groups.map(({ group, items }) => (\n \n {group}\n\n {items.map(\n ({ focusEditor, icon, keywords, label, value, onSelect }) => (\n onSelect(editor, value)}\n label={label}\n focusEditor={focusEditor}\n group={group}\n keywords={keywords}\n >\n
{icon}
\n {label ?? value}\n \n )\n )}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", "path": "plate-ui/slash-input-element.tsx", "target": "components/plate-ui/slash-input-element.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/slash-menu-demo.json b/apps/www/public/r/styles/default/slash-menu-demo.json deleted file mode 100644 index 1804da9d84..0000000000 --- a/apps/www/public/r/styles/default/slash-menu-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Slash commands for block insertion." - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n
\n\n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", - "path": "example/playground-demo.tsx", - "target": "components/playground-demo.tsx", - "type": "registry:example" - } - ], - "name": "slash-menu-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-demo.json b/apps/www/public/r/styles/default/table-demo.json index c1eea129fd..673ad4a1e1 100644 --- a/apps/www/public/r/styles/default/table-demo.json +++ b/apps/www/public/r/styles/default/table-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/theme-daylight.json b/apps/www/public/r/styles/default/theme-daylight.json index 4caa9ed2af..c4768096d5 100644 --- a/apps/www/public/r/styles/default/theme-daylight.json +++ b/apps/www/public/r/styles/default/theme-daylight.json @@ -5,6 +5,7 @@ "accent-foreground": "36 72% 17%", "background": "36 39% 88%", "border": "36 45% 60%", + "brand": "213.3 93.9% 67.8%", "card": "36 46% 82%", "card-foreground": "36 45% 20%", "chart-1": "25 34% 28%", @@ -15,6 +16,7 @@ "destructive": "0 84% 37%", "destructive-foreground": "0 0% 98%", "foreground": "36 45% 15%", + "highlight": "48 96% 53%", "input": "36 45% 60%", "muted": "36 33% 75%", "muted-foreground": "36 45% 25%", @@ -31,6 +33,7 @@ "accent-foreground": "36 72% 17%", "background": "36 39% 88%", "border": "36 45% 60%", + "brand": "217.2 91.2% 59.8%", "card": "36 46% 82%", "card-foreground": "36 45% 20%", "chart-1": "25 34% 28%", @@ -41,6 +44,7 @@ "destructive": "0 84% 37%", "destructive-foreground": "0 0% 98%", "foreground": "36 45% 15%", + "highlight": "47.9 95.8% 53.1%", "input": "36 45% 60%", "muted": "36 33% 75%", "muted-foreground": "36 45% 25%", diff --git a/apps/www/public/r/styles/default/theme-emerald.json b/apps/www/public/r/styles/default/theme-emerald.json index 40bdec100d..30eada5eb9 100644 --- a/apps/www/public/r/styles/default/theme-emerald.json +++ b/apps/www/public/r/styles/default/theme-emerald.json @@ -5,6 +5,7 @@ "accent-foreground": "0 0% 98%", "background": "240 10% 3.9%", "border": "240 3.7% 15.9%", + "brand": "213.3 93.9% 67.8%", "card": "240 10% 3.9%", "card-foreground": "0 0% 98%", "chart-1": "142 88% 28%", @@ -15,6 +16,7 @@ "destructive": "0 72% 51%", "destructive-foreground": "0 0% 98%", "foreground": "0 0% 98%", + "highlight": "48 96% 53%", "input": "240 3.7% 15.9%", "muted": "240 3.7% 15.9%", "muted-foreground": "240 5% 64.9%", @@ -31,6 +33,7 @@ "accent-foreground": "240 5.9% 10%", "background": "0 0% 100%", "border": "240 5.9% 90%", + "brand": "217.2 91.2% 59.8%", "card": "0 0% 100%", "card-foreground": "240 10% 3.9%", "chart-1": "139 65% 20%", @@ -41,6 +44,7 @@ "destructive": "0 72% 51%", "destructive-foreground": "0 0% 98%", "foreground": "240 10% 3.9%", + "highlight": "47.9 95.8% 53.1%", "input": "240 5.9% 90%", "muted": "240 4.8% 95.9%", "muted-foreground": "240 3.8% 45%", diff --git a/apps/www/public/r/styles/default/theme-midnight.json b/apps/www/public/r/styles/default/theme-midnight.json index 995298a3f4..d94ffe30ff 100644 --- a/apps/www/public/r/styles/default/theme-midnight.json +++ b/apps/www/public/r/styles/default/theme-midnight.json @@ -5,6 +5,7 @@ "accent-foreground": "60 0% 100%", "background": "240 5% 6%", "border": "240 6% 20%", + "brand": "213.3 93.9% 67.8%", "card": "240 4% 10%", "card-foreground": "60 5% 90%", "chart-1": "359 2% 90%", @@ -15,6 +16,7 @@ "destructive": "0 60% 50%", "destructive-foreground": "0 0% 98%", "foreground": "60 5% 90%", + "highlight": "48 96% 53%", "input": "240 6% 20%", "muted": "240 5% 25%", "muted-foreground": "60 5% 85%", @@ -31,6 +33,7 @@ "accent-foreground": "60 0% 100%", "background": "240 5% 6%", "border": "240 6% 20%", + "brand": "217.2 91.2% 59.8%", "card": "240 4% 10%", "card-foreground": "60 5% 90%", "chart-1": "359 2% 90%", @@ -41,6 +44,7 @@ "destructive": "0 60% 50%", "destructive-foreground": "0 0% 98%", "foreground": "60 5% 90%", + "highlight": "47.9 95.8% 53.1%", "input": "240 6% 20%", "muted": "240 5% 25%", "muted-foreground": "60 5% 85%", diff --git a/apps/www/public/r/styles/default/toc-demo.json b/apps/www/public/r/styles/default/toc-demo.json index 3284578ea0..b865cc6d06 100644 --- a/apps/www/public/r/styles/default/toc-demo.json +++ b/apps/www/public/r/styles/default/toc-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/toc-element.json b/apps/www/public/r/styles/default/toc-element.json index d268c5cf05..bdaa90fa7c 100644 --- a/apps/www/public/r/styles/default/toc-element.json +++ b/apps/www/public/r/styles/default/toc-element.json @@ -22,7 +22,7 @@ }, "files": [ { - "content": "import { cn, withRef } from '@udecode/cn';\nimport {\n useTocElement,\n useTocElementState,\n} from '@udecode/plate-heading/react';\nimport { cva } from 'class-variance-authority';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\n\nconst headingItemVariants = cva(\n 'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',\n {\n variants: {\n depth: {\n 1: 'pl-0.5',\n 2: 'pl-[26px]',\n 3: 'pl-[50px]',\n },\n },\n }\n);\n\nexport const TocElement = withRef(\n ({ children, className, ...props }, ref) => {\n const state = useTocElementState();\n\n const { props: btnProps } = useTocElement(state);\n\n const { headingList } = state;\n\n return (\n \n \n {children}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n useTocElement,\n useTocElementState,\n} from '@udecode/plate-heading/react';\nimport { cva } from 'class-variance-authority';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\n\nconst headingItemVariants = cva(\n 'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',\n {\n variants: {\n depth: {\n 1: 'pl-0.5',\n 2: 'pl-[26px]',\n 3: 'pl-[50px]',\n },\n },\n }\n);\n\nexport const TocElement = withRef(\n ({ children, className, ...props }, ref) => {\n const state = useTocElementState();\n\n const { props: btnProps } = useTocElement(state);\n\n const { headingList } = state;\n\n return (\n \n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/toc-element.tsx", "target": "components/plate-ui/toc-element.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/todo-list-element.json b/apps/www/public/r/styles/default/todo-list-element.json deleted file mode 100644 index fdf30a39c8..0000000000 --- a/apps/www/public/r/styles/default/todo-list-element.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "dependencies": [ - "@udecode/plate-list" - ], - "files": [ - { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\nimport { PlateElement } from './plate-element';\n\nexport const TodoListElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n }\n);\n", - "path": "plate-ui/todo-list-element.tsx", - "target": "components/plate-ui/todo-list-element.tsx", - "type": "registry:ui" - } - ], - "name": "todo-list-element", - "registryDependencies": [ - "checkbox", - "plate-element" - ], - "type": "registry:ui" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/toggle-demo.json b/apps/www/public/r/styles/default/toggle-demo.json index 8e804bef8e..9c0a9511ed 100644 --- a/apps/www/public/r/styles/default/toggle-demo.json +++ b/apps/www/public/r/styles/default/toggle-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/toggle-element.json b/apps/www/public/r/styles/default/toggle-element.json index 34b01828e7..5f83fb020d 100644 --- a/apps/www/public/r/styles/default/toggle-element.json +++ b/apps/www/public/r/styles/default/toggle-element.json @@ -16,7 +16,7 @@ }, "files": [ { - "content": "import { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport {\n useToggleButton,\n useToggleButtonState,\n} from '@udecode/plate-toggle/react';\nimport { ChevronRight } from 'lucide-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\n\nexport const ToggleElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const state = useToggleButtonState(element.id as string);\n const { buttonProps, open } = useToggleButton(state);\n\n return (\n \n \n \n \n {children}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport {\n useToggleButton,\n useToggleButtonState,\n} from '@udecode/plate-toggle/react';\nimport { ChevronRight } from 'lucide-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\n\nexport const ToggleElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const state = useToggleButtonState(element.id as string);\n const { buttonProps, open } = useToggleButton(state);\n\n return (\n \n \n \n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/toggle-element.tsx", "target": "components/plate-ui/toggle-element.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/toolbar-demo.json b/apps/www/public/r/styles/default/toolbar-demo.json index a1806716b9..68c54b9b0f 100644 --- a/apps/www/public/r/styles/default/toolbar-demo.json +++ b/apps/www/public/r/styles/default/toolbar-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/transforms.json b/apps/www/public/r/styles/default/transforms.json index d03b929e4f..8055dd91b3 100644 --- a/apps/www/public/r/styles/default/transforms.json +++ b/apps/www/public/r/styles/default/transforms.json @@ -1,22 +1,24 @@ { "dependencies": [ + "@udecode/plate-callout", "@udecode/plate-code-block", "@udecode/plate-date", "@udecode/plate-heading", "@udecode/plate-indent-list", "@udecode/plate-layout", + "@udecode/plate-link", "@udecode/plate-math", "@udecode/plate-media", "@udecode/plate-table" ], "files": [ { - "content": "import type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { insertCallout } from '@udecode/plate-callout';\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { insertCodeBlock } from '@udecode/plate-code-block';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type TElement,\n type TNodeEntry,\n getBlockAbove,\n getBlocks,\n getNodeEntry,\n insertNodes,\n removeEmptyPreviousBlock,\n setNodes,\n unsetNodes,\n withoutNormalizing,\n} from '@udecode/plate-common';\nimport { insertDate } from '@udecode/plate-date';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { insertToc } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { toggleColumns } from '@udecode/plate-layout';\nimport { LinkPlugin, triggerFloatingLink } from '@udecode/plate-link/react';\nimport { insertEquation, insertInlineEquation } from '@udecode/plate-math';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport {\n insertAudioPlaceholder,\n insertFilePlaceholder,\n insertMedia,\n insertVideoPlaceholder,\n} from '@udecode/plate-media';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { TablePlugin, insertTable } from '@udecode/plate-table/react';\nimport { Path } from 'slate';\n\nconst ACTION_THREE_COLUMNS = 'action_three_columns';\n\nconst insertList = (editor: PlateEditor, type: string) => {\n insertNodes(\n editor,\n editor.api.create.block({\n indent: 1,\n listStyleType: type,\n }),\n { select: true }\n );\n};\n\nconst insertColumns = (editor: PlateEditor, _: string) => {\n insertNodes(editor, editor.api.create.block(), {\n select: true,\n });\n\n const entry = getBlockAbove(editor);\n\n if (!entry) return;\n\n toggleColumns(editor, entry);\n};\n\nconst insertBlockMap: Record<\n string,\n (editor: PlateEditor, type: string) => void\n> = {\n [ACTION_THREE_COLUMNS]: insertColumns,\n [AudioPlugin.key]: (editor) =>\n insertAudioPlaceholder(editor, { select: true }),\n [CalloutPlugin.key]: (editor) => insertCallout(editor, { select: true }),\n [CodeBlockPlugin.key]: (editor) => insertCodeBlock(editor, { select: true }),\n [EquationPlugin.key]: (editor) => insertEquation(editor, { select: true }),\n [FilePlugin.key]: (editor) => insertFilePlaceholder(editor, { select: true }),\n [INDENT_LIST_KEYS.todo]: insertList,\n [ImagePlugin.key]: (editor) =>\n insertMedia(editor, {\n select: true,\n type: ImagePlugin.key,\n }),\n [ListStyleType.Decimal]: insertList,\n [ListStyleType.Disc]: insertList,\n [MediaEmbedPlugin.key]: (editor) =>\n insertMedia(editor, {\n select: true,\n type: MediaEmbedPlugin.key,\n }),\n [TablePlugin.key]: (editor) => insertTable(editor, {}, { select: true }),\n [TocPlugin.key]: (editor) => insertToc(editor, { select: true }),\n [VideoPlugin.key]: (editor) =>\n insertVideoPlaceholder(editor, { select: true }),\n};\n\nconst insertInlineMap: Record<\n string,\n (editor: PlateEditor, type: string) => void\n> = {\n [DatePlugin.key]: (editor) => insertDate(editor, { select: true }),\n [InlineEquationPlugin.key]: (editor) =>\n insertInlineEquation(editor, '', { select: true }),\n [LinkPlugin.key]: (editor) => triggerFloatingLink(editor, { focused: true }),\n};\n\nexport const insertBlock = (editor: PlateEditor, type: string) => {\n withoutNormalizing(editor, () => {\n if (type in insertBlockMap) {\n insertBlockMap[type](editor, type);\n } else {\n const path = getBlockAbove(editor)?.[1];\n\n if (!path) return;\n\n const at = Path.next(path);\n\n insertNodes(editor, editor.api.create.block({ type }), {\n at,\n select: true,\n });\n }\n\n removeEmptyPreviousBlock(editor);\n });\n};\n\nexport const insertInlineElement = (editor: PlateEditor, type: string) => {\n if (insertInlineMap[type]) {\n insertInlineMap[type](editor, type);\n }\n};\n\nconst setList = (\n editor: PlateEditor,\n type: string,\n entry: TNodeEntry\n) => {\n setNodes(\n editor,\n editor.api.create.block({\n indent: 1,\n listStyleType: type,\n }),\n {\n at: entry[1],\n }\n );\n};\n\nconst setColumns = (\n editor: PlateEditor,\n _: string,\n entry: TNodeEntry\n) => {\n toggleColumns(editor, entry);\n};\n\nconst setBlockMap: Record<\n string,\n (editor: PlateEditor, type: string, entry: TNodeEntry) => void\n> = {\n [ACTION_THREE_COLUMNS]: setColumns,\n [INDENT_LIST_KEYS.todo]: setList,\n [ListStyleType.Decimal]: setList,\n [ListStyleType.Disc]: setList,\n};\n\nexport const setBlockType = (\n editor: PlateEditor,\n type: string,\n { at }: { at?: Path } = {}\n) => {\n withoutNormalizing(editor, () => {\n const setEntry = (entry: TNodeEntry) => {\n const [node, path] = entry;\n\n if (node[IndentListPlugin.key]) {\n unsetNodes(editor, [IndentListPlugin.key, 'indent'], { at: path });\n }\n if (type in setBlockMap) {\n return setBlockMap[type](editor, type, entry);\n }\n if (node.type !== type) {\n editor.setNodes({ type }, { at: path });\n }\n };\n\n if (at) {\n const entry = getNodeEntry(editor, at);\n\n if (entry) {\n setEntry(entry);\n\n return;\n }\n }\n\n const entries = getBlocks(editor);\n\n entries.forEach((entry) => setEntry(entry));\n });\n};\n\nexport const getBlockType = (block: TElement) => {\n if (block[IndentListPlugin.key]) {\n if (block[IndentListPlugin.key] === ListStyleType.Decimal) {\n return ListStyleType.Decimal;\n } else if (block[IndentListPlugin.key] === INDENT_LIST_KEYS.todo) {\n return INDENT_LIST_KEYS.todo;\n } else {\n return ListStyleType.Disc;\n }\n }\n\n return block.type;\n};\n", - "path": "lib/transforms.ts", - "target": "lib/transforms.ts", - "type": "registry:lib" + "content": "'use client';\n\nimport type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { insertCallout } from '@udecode/plate-callout';\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { insertCodeBlock } from '@udecode/plate-code-block';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type TElement,\n type TNodeEntry,\n getBlockAbove,\n getBlocks,\n getNodeEntry,\n insertNodes,\n removeEmptyPreviousBlock,\n setNodes,\n unsetNodes,\n withoutNormalizing,\n} from '@udecode/plate-common';\nimport { insertDate } from '@udecode/plate-date';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { insertToc } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { toggleColumns } from '@udecode/plate-layout';\nimport { LinkPlugin, triggerFloatingLink } from '@udecode/plate-link/react';\nimport { insertEquation, insertInlineEquation } from '@udecode/plate-math';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport {\n insertAudioPlaceholder,\n insertFilePlaceholder,\n insertMedia,\n insertVideoPlaceholder,\n} from '@udecode/plate-media';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { TablePlugin, insertTable } from '@udecode/plate-table/react';\nimport { Path } from 'slate';\n\nconst ACTION_THREE_COLUMNS = 'action_three_columns';\n\nconst insertList = (editor: PlateEditor, type: string) => {\n insertNodes(\n editor,\n editor.api.create.block({\n indent: 1,\n listStyleType: type,\n }),\n { select: true }\n );\n};\n\nconst insertColumns = (editor: PlateEditor, _: string) => {\n insertNodes(editor, editor.api.create.block(), {\n select: true,\n });\n\n const entry = getBlockAbove(editor);\n\n if (!entry) return;\n\n toggleColumns(editor, entry);\n};\n\nconst insertBlockMap: Record<\n string,\n (editor: PlateEditor, type: string) => void\n> = {\n [ACTION_THREE_COLUMNS]: insertColumns,\n [AudioPlugin.key]: (editor) =>\n insertAudioPlaceholder(editor, { select: true }),\n [CalloutPlugin.key]: (editor) => insertCallout(editor, { select: true }),\n [CodeBlockPlugin.key]: (editor) => insertCodeBlock(editor, { select: true }),\n [EquationPlugin.key]: (editor) => insertEquation(editor, { select: true }),\n [FilePlugin.key]: (editor) => insertFilePlaceholder(editor, { select: true }),\n [INDENT_LIST_KEYS.todo]: insertList,\n [ImagePlugin.key]: (editor) =>\n insertMedia(editor, {\n select: true,\n type: ImagePlugin.key,\n }),\n [ListStyleType.Decimal]: insertList,\n [ListStyleType.Disc]: insertList,\n [MediaEmbedPlugin.key]: (editor) =>\n insertMedia(editor, {\n select: true,\n type: MediaEmbedPlugin.key,\n }),\n [TablePlugin.key]: (editor) => insertTable(editor, {}, { select: true }),\n [TocPlugin.key]: (editor) => insertToc(editor, { select: true }),\n [VideoPlugin.key]: (editor) =>\n insertVideoPlaceholder(editor, { select: true }),\n};\n\nconst insertInlineMap: Record<\n string,\n (editor: PlateEditor, type: string) => void\n> = {\n [DatePlugin.key]: (editor) => insertDate(editor, { select: true }),\n [InlineEquationPlugin.key]: (editor) =>\n insertInlineEquation(editor, '', { select: true }),\n [LinkPlugin.key]: (editor) => triggerFloatingLink(editor, { focused: true }),\n};\n\nexport const insertBlock = (editor: PlateEditor, type: string) => {\n withoutNormalizing(editor, () => {\n if (type in insertBlockMap) {\n insertBlockMap[type](editor, type);\n } else {\n const path = getBlockAbove(editor)?.[1];\n\n if (!path) return;\n\n const at = Path.next(path);\n\n insertNodes(editor, editor.api.create.block({ type }), {\n at,\n select: true,\n });\n }\n\n removeEmptyPreviousBlock(editor);\n });\n};\n\nexport const insertInlineElement = (editor: PlateEditor, type: string) => {\n if (insertInlineMap[type]) {\n insertInlineMap[type](editor, type);\n }\n};\n\nconst setList = (\n editor: PlateEditor,\n type: string,\n entry: TNodeEntry\n) => {\n setNodes(\n editor,\n editor.api.create.block({\n indent: 1,\n listStyleType: type,\n }),\n {\n at: entry[1],\n }\n );\n};\n\nconst setColumns = (\n editor: PlateEditor,\n _: string,\n entry: TNodeEntry\n) => {\n toggleColumns(editor, entry);\n};\n\nconst setBlockMap: Record<\n string,\n (editor: PlateEditor, type: string, entry: TNodeEntry) => void\n> = {\n [ACTION_THREE_COLUMNS]: setColumns,\n [INDENT_LIST_KEYS.todo]: setList,\n [ListStyleType.Decimal]: setList,\n [ListStyleType.Disc]: setList,\n};\n\nexport const setBlockType = (\n editor: PlateEditor,\n type: string,\n { at }: { at?: Path } = {}\n) => {\n withoutNormalizing(editor, () => {\n const setEntry = (entry: TNodeEntry) => {\n const [node, path] = entry;\n\n if (node[IndentListPlugin.key]) {\n unsetNodes(editor, [IndentListPlugin.key, 'indent'], { at: path });\n }\n if (type in setBlockMap) {\n return setBlockMap[type](editor, type, entry);\n }\n if (node.type !== type) {\n editor.setNodes({ type }, { at: path });\n }\n };\n\n if (at) {\n const entry = getNodeEntry(editor, at);\n\n if (entry) {\n setEntry(entry);\n\n return;\n }\n }\n\n const entries = getBlocks(editor);\n\n entries.forEach((entry) => setEntry(entry));\n });\n};\n\nexport const getBlockType = (block: TElement) => {\n if (block[IndentListPlugin.key]) {\n if (block[IndentListPlugin.key] === ListStyleType.Decimal) {\n return ListStyleType.Decimal;\n } else if (block[IndentListPlugin.key] === INDENT_LIST_KEYS.todo) {\n return INDENT_LIST_KEYS.todo;\n } else {\n return ListStyleType.Disc;\n }\n }\n\n return block.type;\n};\n", + "path": "components/editor/transforms.ts", + "target": "components/editor/transforms.ts", + "type": "registry:component" } ], "name": "transforms", - "type": "registry:lib" + "type": "registry:component" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json index 8f98220283..ae8eff211a 100644 --- a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json +++ b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json @@ -21,7 +21,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n useSelectionFragmentProp,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ListIcon,\n ListOrderedIcon,\n PilcrowIcon,\n QuoteIcon,\n SquareIcon,\n} from 'lucide-react';\n\nimport { getBlockType, setBlockType } from '@/lib/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst turnIntoItems = [\n {\n icon: ,\n keywords: ['paragraph'],\n label: 'Text',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n keywords: ['title', 'h1'],\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h2'],\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h3'],\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n keywords: ['unordered', 'ul', '-'],\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n keywords: ['ordered', 'ol', '1'],\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n keywords: ['checklist', 'task', 'checkbox', '[]'],\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n keywords: ['collapsible', 'expandable'],\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n {\n icon: ,\n keywords: ['```'],\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n keywords: ['citation', 'blockquote', '>'],\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n];\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const value = useSelectionFragmentProp({\n defaultValue: ParagraphPlugin.key,\n getProp: (node) => getBlockType(node as any),\n });\n const selectedItem = React.useMemo(\n () =>\n turnIntoItems.find(\n (item) => item.value === (value ?? ParagraphPlugin.key)\n ) ?? turnIntoItems[0],\n [value]\n );\n\n return (\n \n \n \n {selectedItem.label}\n \n \n\n \n {\n setBlockType(editor, type);\n focusEditor(editor);\n }}\n label=\"Turn into\"\n >\n {turnIntoItems.map(({ icon, label, value: itemValue }) => (\n \n {icon}\n {label}\n \n ))}\n \n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n useSelectionFragmentProp,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ListIcon,\n ListOrderedIcon,\n PilcrowIcon,\n QuoteIcon,\n SquareIcon,\n} from 'lucide-react';\n\nimport {\n getBlockType,\n setBlockType,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst turnIntoItems = [\n {\n icon: ,\n keywords: ['paragraph'],\n label: 'Text',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n keywords: ['title', 'h1'],\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h2'],\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h3'],\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n keywords: ['unordered', 'ul', '-'],\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n keywords: ['ordered', 'ol', '1'],\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n keywords: ['checklist', 'task', 'checkbox', '[]'],\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n keywords: ['collapsible', 'expandable'],\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n {\n icon: ,\n keywords: ['```'],\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n keywords: ['citation', 'blockquote', '>'],\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n];\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const value = useSelectionFragmentProp({\n defaultValue: ParagraphPlugin.key,\n getProp: (node) => getBlockType(node as any),\n });\n const selectedItem = React.useMemo(\n () =>\n turnIntoItems.find(\n (item) => item.value === (value ?? ParagraphPlugin.key)\n ) ?? turnIntoItems[0],\n [value]\n );\n\n return (\n \n \n \n {selectedItem.label}\n \n \n\n \n {\n setBlockType(editor, type);\n focusEditor(editor);\n }}\n label=\"Turn into\"\n >\n {turnIntoItems.map(({ icon, label, value: itemValue }) => (\n \n {icon}\n {label}\n \n ))}\n \n \n \n );\n}\n", "path": "plate-ui/turn-into-dropdown-menu.tsx", "target": "components/plate-ui/turn-into-dropdown-menu.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/upload-demo.json b/apps/www/public/r/styles/default/upload-demo.json index 23344de3ce..994e43c270 100644 --- a/apps/www/public/r/styles/default/upload-demo.json +++ b/apps/www/public/r/styles/default/upload-demo.json @@ -4,7 +4,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "content": "'use client';\n\nimport React, { useRef } from 'react';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AIChatPlugin, CopilotPlugin } from '@udecode/plate-ai/react';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BaseImagePlugin } from '@udecode/plate-media';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport {\n BlockMenuPlugin,\n BlockSelectionPlugin,\n} from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { aiPlugins } from '@/components/editor/plugins/ai-plugins';\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { BlockContextMenu } from '@/components/plate-ui/block-context-menu';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport {\n CursorOverlay,\n SelectionOverlayPlugin,\n} from '@/components/plate-ui/cursor-overlay';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n const editorId = id || 'playground-' + key;\n\n return usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // AI\n ...(id === 'ai' || enabledPlugins[AIChatPlugin.key] ? aiPlugins : []),\n ...(id === 'copilot' || enabledPlugins[CopilotPlugin.key]\n ? copilotPlugins\n : []),\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ...(id === 'list' ? [ListPlugin] : []),\n ImagePlugin.extend({\n options: {\n disableUploadInsert: true,\n },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n ColumnPlugin,\n SelectionOverlayPlugin,\n\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({\n options: autoformatOptions,\n }),\n BlockSelectionPlugin.configure({\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 10,\n },\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: true,\n },\n }),\n BlockMenuPlugin.configure({\n render: { aboveEditable: BlockContextMenu },\n }),\n DndPlugin.configure({\n options: {\n enableScroller: true,\n onDropFiles: ({ dragItem, editor, target }) => {\n editor\n .getTransforms(BaseImagePlugin)\n .insert.imageFromFiles(dragItem.files, {\n at: target,\n nextBlock: false,\n });\n },\n },\n }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(\n id,\n scrollSelector ?? `blockSelection-${id}`\n );\n\n return (\n \n \n \n \n \n \n \n \n \n\n
\n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n
\n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", "path": "example/playground-demo.tsx", "target": "components/playground-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/use-chat.json b/apps/www/public/r/styles/default/use-chat.json new file mode 100644 index 0000000000..711e258673 --- /dev/null +++ b/apps/www/public/r/styles/default/use-chat.json @@ -0,0 +1,24 @@ +{ + "dependencies": [ + "@udecode/plate-ai", + "ai", + "@faker-js/faker" + ], + "files": [ + { + "content": "'use client';\n\nimport { type ReactNode, createContext, useContext, useState } from 'react';\n\nimport { faker } from '@faker-js/faker';\nimport { cn } from '@udecode/cn';\nimport { CopilotPlugin } from '@udecode/plate-ai/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\nimport { useChat as useBaseChat } from 'ai/react';\nimport {\n ArrowUpRight,\n Check,\n ChevronsUpDown,\n Eye,\n EyeOff,\n Settings,\n} from 'lucide-react';\nimport Link from 'next/link';\n\nimport { Button } from '@/components/plate-ui/button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/plate-ui/command';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/plate-ui/dialog';\nimport { Input } from '@/components/plate-ui/input';\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/components/plate-ui/popover';\n\nexport const useChat = () => {\n return useBaseChat({\n id: 'editor',\n api: '/api/ai/command',\n body: {\n apiKey: useOpenAI().apiKey,\n model: useOpenAI().model.value,\n },\n fetch: async (input, init) => {\n try {\n return await fetch(input, init);\n } catch (error) {\n // Mock the API response. Remove it when you implement the route /api/ai\n await new Promise((resolve) => setTimeout(resolve, 400));\n\n const stream = fakeStreamText();\n\n return new Response(stream, {\n headers: {\n Connection: 'keep-alive',\n 'Content-Type': 'text/plain',\n },\n });\n }\n },\n });\n};\n\n// Used for testing. Remove it after implementing useChat api.\nconst fakeStreamText = ({\n chunkCount = 10,\n streamProtocol = 'data',\n}: {\n chunkCount?: number;\n streamProtocol?: 'data' | 'text';\n} = {}) => {\n const chunks = Array.from({ length: chunkCount }, () => ({\n delay: faker.number.int({ max: 150, min: 50 }),\n texts: faker.lorem.words({ max: 3, min: 1 }) + ' ',\n }));\n const encoder = new TextEncoder();\n\n return new ReadableStream({\n async start(controller) {\n for (const chunk of chunks) {\n await new Promise((resolve) => setTimeout(resolve, chunk.delay));\n\n if (streamProtocol === 'text') {\n controller.enqueue(encoder.encode(chunk.texts));\n } else {\n controller.enqueue(\n encoder.encode(`0:${JSON.stringify(chunk.texts)}\\n`)\n );\n }\n }\n\n if (streamProtocol === 'data') {\n controller.enqueue(\n `d:{\"finishReason\":\"stop\",\"usage\":{\"promptTokens\":0,\"completionTokens\":${chunks.length}}}\\n`\n );\n }\n\n controller.close();\n },\n });\n};\n\ninterface Model {\n label: string;\n value: string;\n}\n\ninterface OpenAIContextType {\n apiKey: string;\n model: Model;\n setApiKey: (key: string) => void;\n setModel: (model: Model) => void;\n}\n\nexport const models: Model[] = [\n { label: 'gpt-4o-mini', value: 'gpt-4o-mini' },\n { label: 'gpt-4o', value: 'gpt-4o' },\n { label: 'gpt-4-turbo', value: 'gpt-4-turbo' },\n { label: 'gpt-4', value: 'gpt-4' },\n { label: 'gpt-3.5-turbo', value: 'gpt-3.5-turbo' },\n { label: 'gpt-3.5-turbo-instruct', value: 'gpt-3.5-turbo-instruct' },\n];\n\nconst OpenAIContext = createContext(undefined);\n\nexport function OpenAIProvider({ children }: { children: ReactNode }) {\n const [apiKey, setApiKey] = useState('');\n const [model, setModel] = useState(models[0]);\n\n return (\n \n {children}\n \n );\n}\n\nexport function useOpenAI() {\n const context = useContext(OpenAIContext);\n\n return (\n context ??\n ({\n apiKey: '',\n model: models[0],\n setApiKey: () => {},\n setModel: () => {},\n } as OpenAIContextType)\n );\n}\n\nexport function SettingsDialog() {\n const { apiKey, model, setApiKey, setModel } = useOpenAI();\n const [tempKey, setTempKey] = useState(apiKey);\n const [showKey, setShowKey] = useState(false);\n const [open, setOpen] = useState(false);\n const [openModel, setOpenModel] = useState(false);\n\n const { getOptions, setOption } = useEditorPlugin(CopilotPlugin);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n setApiKey(tempKey);\n setOpen(false);\n\n const completeOptions = getOptions().completeOptions ?? {};\n\n setOption('completeOptions', {\n ...completeOptions,\n body: {\n ...completeOptions.body,\n apiKey: tempKey,\n model: model.value,\n },\n });\n };\n\n return (\n \n \n \n
\n \n \n Settings\n \n
\n \n \n \n \n AI Settings\n \n Enter your{' '}\n \n OpenAI API key\n \n {' '}\n to use AI features.\n \n \n
\n
\n setTempKey(e.target.value)}\n placeholder=\"sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"\n data-1p-ignore\n type={showKey ? 'text' : 'password'}\n />\n setShowKey(!showKey)}\n type=\"button\"\n >\n {showKey ? (\n \n ) : (\n \n )}\n \n {showKey ? 'Hide' : 'Show'} API key\n \n \n
\n\n \n \n \n {model.label}\n \n \n \n \n \n \n No model found.\n\n \n \n {models.map((m) => (\n {\n setModel(m);\n setOpenModel(false);\n }}\n >\n \n {m.label}\n \n ))}\n \n \n \n \n \n\n \n \n

\n Not stored anywhere. Used only for current session requests.\n

\n \n \n );\n}\n", + "path": "components/editor/use-chat.tsx", + "target": "components/editor/use-chat.tsx", + "type": "registry:component" + } + ], + "name": "use-chat", + "registryDependencies": [ + "button", + "dialog", + "input", + "command", + "popover" + ], + "type": "registry:component" +} \ No newline at end of file diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 678f106a9e..9ddb386789 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -30,6 +30,7 @@ const REGISTRY_INDEX_WHITELIST: z.infer[] = [ "registry:theme", "registry:block", "registry:example", + "registry:component", ] const project = new Project({ @@ -64,6 +65,7 @@ export const Index: Record = { typeof file === "string" ? file : file.path }` ) + if (!resolveFiles) { continue } @@ -73,8 +75,8 @@ export const Index: Record = { let chunks: any = [] if (item.type === "registry:block") { - const file = resolveFiles[0] - const filename = path.basename(file) + const file = 'src/' + resolveFiles[0] + const filename = 'src/' + path.basename(file) let raw: string try { raw = await fs.readFile(file, "utf8") @@ -243,7 +245,7 @@ export const Index: Record = { }) ) - // // Write the source file for blocks only. + // Write the source file for blocks only. sourceFilename = `src/__registry__/${style.name}/${type}/${item.name}.tsx` if (item.files) { @@ -278,7 +280,7 @@ export const Index: Record = { componentPath = `@/registry/${style.name}/${files[0].path}` } } - + index += ` "${item.name}": { name: "${item.name}", @@ -390,6 +392,7 @@ async function buildStyles(registry: Registry) { ) content = fixImport(content) } catch (error) { + console.error(error) return } @@ -403,11 +406,15 @@ async function buildStyles(registry: Registry) { sourceFile.getVariableDeclaration("description")?.remove() let target = file.target + if (!target || target === "") { const fileName = file.path.split("/").pop() + + if (file.type === "registry:component") { + target = file.path + } if ( file.type === "registry:block" || - file.type === "registry:component" || file.type === "registry:example" ) { target = `components/${fileName}` @@ -477,7 +484,12 @@ async function buildStylesIndex() { "tailwindcss-animate", "class-variance-authority", "lucide-react", - "@udecode/cn" + "@udecode/cn", + "@udecode/plate-common", + "slate", + "slate-react", + "slate-history", + "slate-hyperscript", ] // TODO: Remove this when we migrate to lucide-react. @@ -494,9 +506,32 @@ async function buildStylesIndex() { tailwind: { config: { plugins: [`require("tailwindcss-animate")`], + theme: { + extend: { + colors: { + brand: { + DEFAULT: 'hsl(var(--brand))', + foreground: 'hsl(var(--brand-foreground))', + }, + highlight: { + DEFAULT: 'hsl(var(--highlight))', + foreground: 'hsl(var(--highlight-foreground))', + }, + }, + }, + }, + }, + }, + cssVars: { + light: { + '--brand': '217.2 91.2% 59.8%', + '--highlight': '47.9 95.8% 53.1%', + }, + dark: { + '--brand': '213.3 93.9% 67.8%', + '--highlight': '48 96% 53%', }, }, - cssVars: {}, files: [], } @@ -671,7 +706,7 @@ async function buildThemes() { base["cssVarsTemplate"] = template(BASE_STYLES_WITH_VARIABLES)({ colors: base["cssVars"], }) - + await fs.writeFile( path.join(REGISTRY_PATH, `colors/${baseColor}.json`), JSON.stringify(base, null, 2), diff --git a/apps/www/src/__registry__/default/block/editor-ai/page.tsx b/apps/www/src/__registry__/default/block/editor-ai/page.tsx new file mode 100644 index 0000000000..21bf7c876e --- /dev/null +++ b/apps/www/src/__registry__/default/block/editor-ai/page.tsx @@ -0,0 +1,18 @@ +import { PlateEditor } from '@/registry/default/block/editor-ai/components/editor/plate-editor'; +import { OpenAIProvider } from '@/registry/default/components/editor/use-chat'; + +export const description = 'An AI editor.'; + +export const iframeHeight = '650px'; + +export const containerClassName = 'w-full h-full'; + +export default function Page() { + return ( +
+ + + +
+ ); +} diff --git a/apps/www/src/__registry__/default/block/editor-basic/page.tsx b/apps/www/src/__registry__/default/block/editor-basic/page.tsx new file mode 100644 index 0000000000..11d3a4b696 --- /dev/null +++ b/apps/www/src/__registry__/default/block/editor-basic/page.tsx @@ -0,0 +1,15 @@ +import { PlateEditor } from '@/registry/default/block/editor-basic/components/editor/plate-editor'; + +export const description = 'A simple editor.'; + +export const iframeHeight = '650px'; + +export const containerClassName = 'w-full h-full'; + +export default function Page() { + return ( +
+ +
+ ); +} diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx index d73e00c3b5..b178971b6f 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -197,6 +197,18 @@ export const Index: Record = { subcategory: "", chunks: [] }, + "image-preview": { + name: "image-preview", + description: "", + type: "registry:ui", + registryDependencies: [], + files: ["registry/default/plate-ui/image-preview.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/image-preview.tsx")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, "kbd-leaf": { name: "kbd-leaf", description: "", @@ -425,6 +437,18 @@ export const Index: Record = { subcategory: "", chunks: [] }, + "context-menu": { + name: "context-menu", + description: "", + type: "registry:ui", + registryDependencies: [], + files: ["registry/default/plate-ui/context-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/context-menu.tsx")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, "dialog": { name: "dialog", description: "", @@ -513,7 +537,7 @@ export const Index: Record = { name: "ai-menu", description: "", type: "registry:ui", - registryDependencies: ["command","popover","editor"], + registryDependencies: ["use-chat","command","popover","editor"], files: ["registry/default/plate-ui/ai-menu.tsx","registry/default/plate-ui/ai-menu-items.tsx","registry/default/plate-ui/ai-chat-editor.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/ai-menu.tsx")), source: "", @@ -549,7 +573,7 @@ export const Index: Record = { name: "block-context-menu", description: "", type: "registry:ui", - registryDependencies: ["calendar","plate-element"], + registryDependencies: ["calendar","plate-element","context-menu"], files: ["registry/default/plate-ui/block-context-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/block-context-menu.tsx")), source: "", @@ -989,6 +1013,90 @@ export const Index: Record = { subcategory: "", chunks: [] }, + "ai-plugins": { + name: "ai-plugins", + description: "", + type: "registry:component", + registryDependencies: undefined, + files: ["registry/default/components/editor/plugins/ai-plugins.tsx"], + component: React.lazy(() => import("@/registry/default/components/editor/plugins/ai-plugins.tsx")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, + "autoformat-plugin": { + name: "autoformat-plugin", + description: "", + type: "registry:component", + registryDependencies: undefined, + files: ["registry/default/components/editor/plugins/autoformat-plugin.ts"], + component: React.lazy(() => import("@/registry/default/components/editor/plugins/autoformat-plugin.ts")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, + "copilot-plugins": { + name: "copilot-plugins", + description: "", + type: "registry:component", + registryDependencies: ["ghost-text"], + files: ["registry/default/components/editor/plugins/copilot-plugins.tsx"], + component: React.lazy(() => import("@/registry/default/components/editor/plugins/copilot-plugins.tsx")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, + "use-chat": { + name: "use-chat", + description: "", + type: "registry:component", + registryDependencies: ["button","dialog","input","command","popover"], + files: ["registry/default/components/editor/use-chat.tsx"], + component: React.lazy(() => import("@/registry/default/components/editor/use-chat.tsx")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, + "api-ai": { + name: "api-ai", + description: "", + type: "registry:component", + registryDependencies: ["use-chat"], + files: ["registry/default/components/api/ai/command/route.ts","registry/default/components/api/ai/copilot/route.ts"], + component: React.lazy(() => import("@/registry/default/components/api/ai/command/route.ts")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, + "transforms": { + name: "transforms", + description: "", + type: "registry:component", + registryDependencies: undefined, + files: ["registry/default/components/editor/transforms.ts"], + component: React.lazy(() => import("@/registry/default/components/editor/transforms.ts")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, + "plate-types": { + name: "plate-types", + description: "", + type: "registry:component", + registryDependencies: undefined, + files: ["registry/default/components/editor/plate-types.ts"], + component: React.lazy(() => import("@/registry/default/components/editor/plate-types.ts")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, "ai-demo": { name: "ai-demo", description: "", @@ -1673,15 +1781,27 @@ export const Index: Record = { subcategory: "", chunks: [] }, - "plate-types": { - name: "plate-types", - description: "", - type: "registry:lib", - registryDependencies: undefined, - files: ["registry/default/lib/plate-types.ts"], - component: React.lazy(() => import("@/registry/default/lib/plate-types.ts")), - source: "", - category: "", + "editor-ai": { + name: "editor-ai", + description: "An AI editor.", + type: "registry:block", + registryDependencies: ["api-ai","plate-types","ai-plugins","autoformat-plugin","copilot-plugins","ai-menu","ai-leaf","ghost-text","comments-popover","cursor-overlay","editor","fixed-toolbar","fixed-toolbar-buttons","floating-toolbar","floating-toolbar-buttons","block-context-menu","blockquote-element","code-block-element","code-leaf","code-line-element","code-syntax-leaf","column-element","column-group-element","comment-leaf","date-element","draggable","emoji-input-element","excalidraw-element","heading-element","highlight-leaf","hr-element","image-element","image-preview","indent-todo-marker","kbd-leaf","link-element","link-floating-toolbar","list-element","media-embed-element","mention-element","mention-input-element","paragraph-element","placeholder","slash-input-element","table-cell-element","table-element","table-row-element","toc-element","toggle-element"], + files: ["registry/default/block/editor-ai/page.tsx","registry/default/block/editor-ai/components/editor/plate-editor.tsx","registry/default/block/editor-ai/components/editor/use-create-editor.tsx"], + component: React.lazy(() => import("@/registry/default/block/editor-ai/page.tsx")), + source: "src/__registry__/default/block/editor-ai/page.tsx", + category: "Editors", + subcategory: "", + chunks: [] + }, + "editor-basic": { + name: "editor-basic", + description: "A simple editor.", + type: "registry:block", + registryDependencies: ["editor"], + files: ["registry/default/block/editor-basic/page.tsx","registry/default/block/editor-basic/components/editor/plate-editor.tsx","registry/default/block/editor-basic/components/editor/use-create-editor.tsx"], + component: React.lazy(() => import("@/registry/default/block/editor-basic/page.tsx")), + source: "src/__registry__/default/block/editor-basic/page.tsx", + category: "Editors", subcategory: "", chunks: [] }, @@ -1697,18 +1817,6 @@ export const Index: Record = { subcategory: "", chunks: [] }, - "transforms": { - name: "transforms", - description: "", - type: "registry:lib", - registryDependencies: undefined, - files: ["registry/default/lib/transforms.ts"], - component: React.lazy(() => import("@/registry/default/lib/transforms.ts")), - source: "", - category: "", - subcategory: "", - chunks: [] - }, "use-debounce": { name: "use-debounce", description: "", diff --git a/apps/www/src/app/(app)/editors/layout.tsx b/apps/www/src/app/(app)/editors/layout.tsx new file mode 100644 index 0000000000..281823103d --- /dev/null +++ b/apps/www/src/app/(app)/editors/layout.tsx @@ -0,0 +1,50 @@ +import type { Metadata } from 'next'; + +import { + PageActions, + PageHeader, + PageHeaderDescription, + PageHeaderHeading, +} from '@/components/page-header'; +import { Button } from '@/registry/default/plate-ui/button'; + +export const metadata: Metadata = { + description: + 'Beautifully designed. Copy and paste into your apps. Open Source.', + title: 'Building Editors.', +}; + +export default function BlocksLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( +
+ + {/* */} + Building Editors for the Web + + Beautifully designed. Copy and paste into your apps. Open Source. + + + + {/* */} + + +
+ {children} +
+
+ ); +} diff --git a/apps/www/src/app/(app)/editors/page.tsx b/apps/www/src/app/(app)/editors/page.tsx new file mode 100644 index 0000000000..ae58c1d3f6 --- /dev/null +++ b/apps/www/src/app/(app)/editors/page.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; + +import { unstable_cache } from 'next/cache'; + +import { BlockDisplay } from '@/components/block-display'; +import { BlockPreview } from '@/components/block-preview'; +import { siteConfig } from '@/config/site'; +import { getAllBlockIds } from '@/lib/blocks'; + +// const BLOCKS_WHITELIST_PREFIXES = ['sidebar', 'login']; + +const getBlocks = unstable_cache(async () => { + return await getAllBlockIds(); + // .filter((name) => + // BLOCKS_WHITELIST_PREFIXES.some((prefix) => name.startsWith(prefix)) + // ); +}, ['blocks']); + +export default async function BlocksPage() { + const blocks = await getBlocks(); + + return ( +
+
+ {blocks.map((name, index) => ( + + + + ))} + +
+ +
+
+
+ ); +} diff --git a/apps/www/src/app/(blocks)/blocks/[name]/page.tsx b/apps/www/src/app/(blocks)/blocks/[name]/page.tsx new file mode 100644 index 0000000000..51158c98af --- /dev/null +++ b/apps/www/src/app/(blocks)/blocks/[name]/page.tsx @@ -0,0 +1,112 @@ +import type { Metadata } from 'next'; + +import { cn } from '@udecode/cn'; +import { notFound } from 'next/navigation'; + +import { BlockChunk } from '@/components/block-chunk'; +import { BlockWrapper } from '@/components/block-wrapper'; +import { siteConfig } from '@/config/site'; +import { absoluteUrl } from '@/lib/absoluteUrl'; +import { getAllBlockIds, getBlock } from '@/lib/blocks'; +import { styles } from '@/registry/registry-styles'; + +import '@/styles/mdx.css'; + +export async function generateMetadata({ + params, +}: { + params: Promise<{ name: string }>; +}): Promise { + const { name } = await params; + + const block = await getBlock(name); + + if (!block) { + return {}; + } + + const title = block.name; + const description = block.description; + + return { + description, + openGraph: { + description, + images: [ + { + alt: siteConfig.name, + height: 630, + url: siteConfig.ogImage, + width: 1200, + }, + ], + title, + type: 'article', + url: absoluteUrl(`/blocks/${block.name}`), + }, + title: `${block.description} - ${block.name}`, + twitter: { + card: 'summary_large_image', + creator: '@shadcn', + description, + images: [siteConfig.ogImage], + title, + }, + }; +} + +export async function generateStaticParams() { + const blockIds = await getAllBlockIds(); + + return styles.flatMap((style) => + blockIds.map((name) => ({ + name, + style: style.name, + })) + ); +} + +export default async function BlockPage({ + params, +}: { + params: Promise<{ name: string }>; +}) { + const { name } = await params; + const block = await getBlock(name); + + if (!block) { + return notFound(); + } + + const Component = block.component; + + const chunks = block.chunks?.map((chunk) => ({ ...chunk })); + delete block.component; + block.chunks?.map((chunk) => delete chunk.component); + + return ( + <> + {/* */} +
+ + + {chunks?.map((chunk, index) => ( + + + + ))} + +
+ + ); +} diff --git a/apps/www/src/components/_block-display.tsx b/apps/www/src/components/_block-display.tsx deleted file mode 100644 index 7981dad23e..0000000000 --- a/apps/www/src/components/_block-display.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { getBlock } from '@/lib/_blocks'; -import { styles } from '@/registry/registry-styles'; - -import { PlaygroundPreview } from './playground-preview'; - -export async function BlockDisplay({ name }: { name: string }) { - const blocks = await Promise.all( - styles.map(async (style) => { - const block = await getBlock(name, style.name); - const hasLiftMode = block?.chunks ? block?.chunks?.length > 0 : false; - - // Cannot (and don't need to) pass to the client. - delete block?.component; - delete block?.chunks; - - return { - ...block, - hasLiftMode, - }; - }) - ); - - if (!blocks?.length) { - return null; - } - - return blocks.map((block) => ( - - )); -} diff --git a/apps/www/src/components/_block-chunk.tsx b/apps/www/src/components/block-chunk.tsx similarity index 88% rename from apps/www/src/components/_block-chunk.tsx rename to apps/www/src/components/block-chunk.tsx index cb623b547c..6c1d580689 100644 --- a/apps/www/src/components/_block-chunk.tsx +++ b/apps/www/src/components/block-chunk.tsx @@ -7,10 +7,9 @@ import type { Block, BlockChunk } from '@/registry/schema'; import { cn } from '@udecode/cn'; import { AnimatePresence, motion } from 'framer-motion'; +import { BlockCopyButton } from '@/components/block-copy-button'; import { useLiftMode } from '@/hooks/use-lift-mode'; -import { BlockCopyButton } from './block-copy-button'; - export function BlockChunk({ block, children, @@ -41,13 +40,14 @@ export function BlockChunk({ >
{children}
{chunk.code && ( -
+
+ {/* */}
)} diff --git a/apps/www/src/components/block-display.tsx b/apps/www/src/components/block-display.tsx new file mode 100644 index 0000000000..6b1306226b --- /dev/null +++ b/apps/www/src/components/block-display.tsx @@ -0,0 +1,33 @@ +import { unstable_cache } from 'next/cache'; + +import { BlockPreview } from '@/components/block-preview'; +import { getBlock } from '@/lib/blocks'; + +const getBlockByName = unstable_cache( + async (name: string) => { + const block = await getBlock(name); + + if (!block) { + return null; + } + + return { + container: block.container, + description: block.description, + name: block.name, + // style: block.style, + style: 'default', + }; + }, + ['block'] +); + +export async function BlockDisplay({ name }: { name: string }) { + const block = await getBlockByName(name); + + if (!block) { + return null; + } + + return ; +} diff --git a/apps/www/src/components/block-preview.tsx b/apps/www/src/components/block-preview.tsx index ae8fdfe100..b4327c0d96 100644 --- a/apps/www/src/components/block-preview.tsx +++ b/apps/www/src/components/block-preview.tsx @@ -7,12 +7,12 @@ import type { ImperativePanelHandle } from 'react-resizable-panels'; import { cn } from '@udecode/cn'; -import { BlockToolbar } from './block-toolbar'; +import { BlockToolbar } from '@/components/block-toolbar'; import { ResizableHandle, ResizablePanel, ResizablePanelGroup, -} from './ui/resizable'; +} from '@/components/ui/resizable'; export function BlockPreview({ block, diff --git a/apps/www/src/components/block-toolbar.tsx b/apps/www/src/components/block-toolbar.tsx index cde773cc32..7576adb88b 100644 --- a/apps/www/src/components/block-toolbar.tsx +++ b/apps/www/src/components/block-toolbar.tsx @@ -5,9 +5,16 @@ import * as React from 'react'; import type { Block } from '@/registry/schema'; import type { ImperativePanelHandle } from 'react-resizable-panels'; -import { Monitor, Smartphone, Tablet } from 'lucide-react'; +import { + CheckIcon, + Monitor, + Smartphone, + Tablet, + TerminalIcon, +} from 'lucide-react'; import Link from 'next/link'; +import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'; import { Button } from '@/registry/default/plate-ui/button'; import { Separator } from '@/registry/default/plate-ui/separator'; @@ -25,6 +32,8 @@ export function BlockToolbar({ }) { const src = block.descriptionSrc ?? block.src; + const { copyToClipboard, isCopied } = useCopyToClipboard(); + return (
- {/* */} - {/* */} + {block.name !== 'potion' && ( + <> + + + + )}
- +
diff --git a/apps/www/src/components/_block-wrapper.tsx b/apps/www/src/components/block-wrapper.tsx similarity index 100% rename from apps/www/src/components/_block-wrapper.tsx rename to apps/www/src/components/block-wrapper.tsx diff --git a/apps/www/src/components/component-installation.tsx b/apps/www/src/components/component-installation.tsx index 25b3df6523..68335d14c8 100644 --- a/apps/www/src/components/component-installation.tsx +++ b/apps/www/src/components/component-installation.tsx @@ -132,7 +132,7 @@ export function ComponentInstallation({ diff --git a/apps/www/src/components/component-source.tsx b/apps/www/src/components/component-source.tsx index 291d31a405..673af0b3af 100644 --- a/apps/www/src/components/component-source.tsx +++ b/apps/www/src/components/component-source.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { cn } from '@udecode/cn'; -import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'; +import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'; import { Button } from '@/registry/default/plate-ui/button'; import { CodeBlockWrapper } from './code-block-wrapper'; diff --git a/apps/www/src/components/main-nav.tsx b/apps/www/src/components/main-nav.tsx index 7c5179d695..5f962ba6f3 100644 --- a/apps/www/src/components/main-nav.tsx +++ b/apps/www/src/components/main-nav.tsx @@ -45,6 +45,17 @@ export function MainNav() { > Components + + Editors + >; }) { + const { copyToClipboard, isCopied } = useCopyToClipboard(); + return (
+ +
- + Open in New Tab diff --git a/apps/www/src/components/playground-preview.tsx b/apps/www/src/components/playground-preview.tsx index a84addb4ea..fc6e051ae0 100644 --- a/apps/www/src/components/playground-preview.tsx +++ b/apps/www/src/components/playground-preview.tsx @@ -20,7 +20,7 @@ import { } from './ui/resizable'; const block: any = { - name: 'playground', + name: 'editor-ai', }; // TODO: sync diff --git a/apps/www/src/components/site-header.tsx b/apps/www/src/components/site-header.tsx index 2e5e1ac4e8..2095cb9c20 100644 --- a/apps/www/src/components/site-header.tsx +++ b/apps/www/src/components/site-header.tsx @@ -37,7 +37,7 @@ export function SiteHeader() { - */} {/* */}
diff --git a/apps/www/src/components/ui/codeblock.tsx b/apps/www/src/components/ui/codeblock.tsx index f975d6b0c5..4a61f93edd 100644 --- a/apps/www/src/components/ui/codeblock.tsx +++ b/apps/www/src/components/ui/codeblock.tsx @@ -9,7 +9,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import { Icons } from '@/components/icons'; -import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'; +import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'; import { Button } from '@/registry/default/plate-ui/button'; interface Props { diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts index 9bf84553d2..e7c32e5f98 100644 --- a/apps/www/src/config/docs.ts +++ b/apps/www/src/config/docs.ts @@ -172,8 +172,8 @@ export const docsConfig: DocsConfig = { title: 'Components', }, { - href: '/#playground', - title: 'Playground', + href: '/editors', + title: 'Editors', }, { href: '/#potion', diff --git a/apps/www/src/hooks/useCopyToClipboard.ts b/apps/www/src/hooks/use-copy-to-clipboard.ts similarity index 100% rename from apps/www/src/hooks/useCopyToClipboard.ts rename to apps/www/src/hooks/use-copy-to-clipboard.ts diff --git a/apps/www/src/lib/_blocks.ts b/apps/www/src/lib/blocks.ts similarity index 70% rename from apps/www/src/lib/_blocks.ts rename to apps/www/src/lib/blocks.ts index 9b9aec2f6d..d80b60740c 100644 --- a/apps/www/src/lib/_blocks.ts +++ b/apps/www/src/lib/blocks.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/require-await */ 'use server'; import type { Style } from '@/registry/registry-styles'; @@ -10,14 +9,13 @@ import { type SourceFile, Project, ScriptKind, SyntaxKind } from 'ts-morph'; import { z } from 'zod'; import { Index } from '@/__registry__'; +import { highlightCode } from '@/lib/highlight-code'; import { type BlockChunk, blockSchema, registryEntrySchema, } from '@/registry/schema'; -import { highlightCode } from './highlight-code'; - const DEFAULT_BLOCKS_STYLE = 'default' satisfies Style['name']; const project = new Project({ @@ -32,7 +30,6 @@ export async function getAllBlockIds( return blocks.map((block) => block.name); } -// TODO: sync export async function getBlock( name: string, style: Style['name'] = DEFAULT_BLOCKS_STYLE @@ -41,51 +38,62 @@ export async function getBlock( const content = await _getBlockContent(name, style); - const chunks = await Promise.all( - entry.chunks?.map(async (chunk: BlockChunk) => { - const code = await readFile(chunk.file); - - const tempFile = await createTempSourceFile(`${chunk.name}.tsx`); - const sourceFile = project.createSourceFile(tempFile, code, { - scriptKind: ScriptKind.TSX, - }); - - sourceFile - .getDescendantsOfKind(SyntaxKind.JsxOpeningElement) - .filter((node) => { - return node.getAttribute('x-chunk') !== undefined; + const chunks = entry?.chunks + ? await Promise.all( + entry?.chunks?.map(async (chunk: BlockChunk) => { + const code = await readFile(chunk.file); + + const tempFile = await createTempSourceFile(`${chunk.name}.tsx`); + const sourceFile = project.createSourceFile(tempFile, code, { + scriptKind: ScriptKind.TSX, + }); + + sourceFile + .getDescendantsOfKind(SyntaxKind.JsxOpeningElement) + .filter((node) => { + return node.getAttribute('x-chunk') !== undefined; + }) + ?.map((component) => { + component + .getAttribute('x-chunk') + ?.asKind(SyntaxKind.JsxAttribute) + ?.remove(); + }); + + return { + ...chunk, + code: sourceFile + .getText() + .replaceAll(`@/registry/${style}/`, '@/components/'), + }; }) - ?.map((component) => { - component - .getAttribute('x-chunk') - ?.asKind(SyntaxKind.JsxAttribute) - ?.remove(); - }); - - return { - ...chunk, - code: sourceFile - .getText() - .replaceAll(`@/registry/${style}/`, '@/components/'), - }; - }) - ); + ) + : []; - return blockSchema.parse({ + const block = { highlightedCode: content.code ? await highlightCode(content.code) : '', style, ...entry, ...content, chunks, type: 'registry:block', - }); + }; + + const result = blockSchema.safeParse(block); + + if (!result.success) { + return null; + } + + return result.data; } +// eslint-disable-next-line @typescript-eslint/require-await async function _getAllBlocks(style: Style['name'] = DEFAULT_BLOCKS_STYLE) { const index = z.record(registryEntrySchema).parse(Index[style]); return Object.values(index).filter( - (block) => block.type === ('registry:block' as any) + (block) => block.type === 'registry:block' ); } diff --git a/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts b/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts index 82a7dd6b4a..50f0af330b 100644 --- a/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts +++ b/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import type { MyValue } from '@/registry/default/lib/plate-types'; +import type { Value } from '@udecode/slate'; import { settingsStore } from '@/components/context/settings-store'; import { type ValueId, customizerPlugins } from '@/config/customizer-plugins'; @@ -42,7 +42,7 @@ import { tableMergeValue, tableValue } from './tableValue'; import { tocPlaygroundValue } from './tocValue'; import { toggleValue } from './toggleValue'; -export const usePlaygroundValue = (id?: ValueId): MyValue => { +export const usePlaygroundValue = (id?: ValueId): Value => { let valueId = settingsStore.use.valueId(); if (id) { diff --git a/apps/www/src/registry/default/block/editor-ai/components/editor/plate-editor.tsx b/apps/www/src/registry/default/block/editor-ai/components/editor/plate-editor.tsx new file mode 100644 index 0000000000..1732784859 --- /dev/null +++ b/apps/www/src/registry/default/block/editor-ai/components/editor/plate-editor.tsx @@ -0,0 +1,51 @@ +'use client'; + +import React, { useRef } from 'react'; +import { DndProvider } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; + +import { Plate } from '@udecode/plate-common/react'; + +import { useCreateEditor } from '@/registry/default/block/editor-ai/components/editor/use-create-editor'; +import { SettingsDialog } from '@/registry/default/components/editor/use-chat'; +import { CommentsPopover } from '@/registry/default/plate-ui/comments-popover'; +import { CursorOverlay } from '@/registry/default/plate-ui/cursor-overlay'; +import { Editor, EditorContainer } from '@/registry/default/plate-ui/editor'; +import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar'; +import { FixedToolbarButtons } from '@/registry/default/plate-ui/fixed-toolbar-buttons'; +import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar'; +import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons'; + +export function PlateEditor() { + const containerRef = useRef(null); + + const editor = useCreateEditor(); + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.tsx b/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.tsx new file mode 100644 index 0000000000..b9cbc1343b --- /dev/null +++ b/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.tsx @@ -0,0 +1,476 @@ +import React from 'react'; + +import { withProps } from '@udecode/cn'; +import { AIPlugin } from '@udecode/plate-ai/react'; +import { AlignPlugin } from '@udecode/plate-alignment/react'; +import { + BoldPlugin, + CodePlugin, + ItalicPlugin, + StrikethroughPlugin, + SubscriptPlugin, + SuperscriptPlugin, + UnderlinePlugin, +} from '@udecode/plate-basic-marks/react'; +import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; +import { ExitBreakPlugin, SoftBreakPlugin } from '@udecode/plate-break/react'; +import { CaptionPlugin } from '@udecode/plate-caption/react'; +import { + isCodeBlockEmpty, + isSelectionAtCodeBlockStart, + unwrapCodeBlock, +} from '@udecode/plate-code-block'; +import { + CodeBlockPlugin, + CodeLinePlugin, + CodeSyntaxPlugin, +} from '@udecode/plate-code-block/react'; +import { CommentsPlugin } from '@udecode/plate-comments/react'; +import { + isBlockAboveEmpty, + isSelectionAtBlockStart, + someNode, +} from '@udecode/plate-common'; +import { + ParagraphPlugin, + PlateElement, + PlateLeaf, + usePlateEditor, +} from '@udecode/plate-common/react'; +import { DatePlugin } from '@udecode/plate-date/react'; +import { DndPlugin } from '@udecode/plate-dnd'; +import { DocxPlugin } from '@udecode/plate-docx'; +import { EmojiInputPlugin, EmojiPlugin } from '@udecode/plate-emoji/react'; +import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react'; +import { + FontBackgroundColorPlugin, + FontColorPlugin, + FontSizePlugin, +} from '@udecode/plate-font/react'; +import { HEADING_KEYS, HEADING_LEVELS } from '@udecode/plate-heading'; +import { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react'; +import { HighlightPlugin } from '@udecode/plate-highlight/react'; +import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; +import { IndentPlugin } from '@udecode/plate-indent/react'; +import { IndentListPlugin } from '@udecode/plate-indent-list/react'; +import { JuicePlugin } from '@udecode/plate-juice'; +import { KbdPlugin } from '@udecode/plate-kbd/react'; +import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react'; +import { LineHeightPlugin } from '@udecode/plate-line-height/react'; +import { LinkPlugin } from '@udecode/plate-link/react'; +import { + BulletedListPlugin, + ListItemPlugin, + NumberedListPlugin, + TodoListPlugin, +} from '@udecode/plate-list/react'; +import { MarkdownPlugin } from '@udecode/plate-markdown'; +import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; +import { + MentionInputPlugin, + MentionPlugin, +} from '@udecode/plate-mention/react'; +import { NodeIdPlugin } from '@udecode/plate-node-id'; +import { ResetNodePlugin } from '@udecode/plate-reset-node/react'; +import { SelectOnBackspacePlugin } from '@udecode/plate-select'; +import { + BlockMenuPlugin, + BlockSelectionPlugin, +} from '@udecode/plate-selection/react'; +import { + SlashInputPlugin, + SlashPlugin, +} from '@udecode/plate-slash-command/react'; +import { TabbablePlugin } from '@udecode/plate-tabbable/react'; +import { + TableCellHeaderPlugin, + TableCellPlugin, + TablePlugin, + TableRowPlugin, +} from '@udecode/plate-table/react'; +import { TogglePlugin } from '@udecode/plate-toggle/react'; +import { TrailingBlockPlugin } from '@udecode/plate-trailing-block'; +import Prism from 'prismjs'; + +import { aiPlugins } from '@/registry/default/components/editor/plugins/ai-plugins'; +import { autoformatPlugin } from '@/registry/default/components/editor/plugins/autoformat-plugin'; +import { copilotPlugins } from '@/registry/default/components/editor/plugins/copilot-plugins'; +import { AILeaf } from '@/registry/default/plate-ui/ai-leaf'; +import { BlockContextMenu } from '@/registry/default/plate-ui/block-context-menu'; +import { BlockquoteElement } from '@/registry/default/plate-ui/blockquote-element'; +import { CodeBlockElement } from '@/registry/default/plate-ui/code-block-element'; +import { CodeLeaf } from '@/registry/default/plate-ui/code-leaf'; +import { CodeLineElement } from '@/registry/default/plate-ui/code-line-element'; +import { CodeSyntaxLeaf } from '@/registry/default/plate-ui/code-syntax-leaf'; +import { ColumnElement } from '@/registry/default/plate-ui/column-element'; +import { ColumnGroupElement } from '@/registry/default/plate-ui/column-group-element'; +import { CommentLeaf } from '@/registry/default/plate-ui/comment-leaf'; +import { DragOverCursorPlugin } from '@/registry/default/plate-ui/cursor-overlay'; +import { DateElement } from '@/registry/default/plate-ui/date-element'; +import { EmojiInputElement } from '@/registry/default/plate-ui/emoji-input-element'; +import { ExcalidrawElement } from '@/registry/default/plate-ui/excalidraw-element'; +import { HeadingElement } from '@/registry/default/plate-ui/heading-element'; +import { HighlightLeaf } from '@/registry/default/plate-ui/highlight-leaf'; +import { HrElement } from '@/registry/default/plate-ui/hr-element'; +import { ImageElement } from '@/registry/default/plate-ui/image-element'; +import { ImagePreview } from '@/registry/default/plate-ui/image-preview'; +import { + TodoLi, + TodoMarker, +} from '@/registry/default/plate-ui/indent-todo-marker'; +import { KbdLeaf } from '@/registry/default/plate-ui/kbd-leaf'; +import { LinkElement } from '@/registry/default/plate-ui/link-element'; +import { LinkFloatingToolbar } from '@/registry/default/plate-ui/link-floating-toolbar'; +import { ListElement } from '@/registry/default/plate-ui/list-element'; +import { MediaEmbedElement } from '@/registry/default/plate-ui/media-embed-element'; +import { MentionElement } from '@/registry/default/plate-ui/mention-element'; +import { MentionInputElement } from '@/registry/default/plate-ui/mention-input-element'; +import { ParagraphElement } from '@/registry/default/plate-ui/paragraph-element'; +import { withPlaceholders } from '@/registry/default/plate-ui/placeholder'; +import { SlashInputElement } from '@/registry/default/plate-ui/slash-input-element'; +import { + TableCellElement, + TableCellHeaderElement, +} from '@/registry/default/plate-ui/table-cell-element'; +import { TableElement } from '@/registry/default/plate-ui/table-element'; +import { TableRowElement } from '@/registry/default/plate-ui/table-row-element'; +import { TocElement } from '@/registry/default/plate-ui/toc-element'; +import { ToggleElement } from '@/registry/default/plate-ui/toggle-element'; +import { withDraggables } from '@/registry/default/plate-ui/with-draggables'; + +export const useCreateEditor = () => { + return usePlateEditor({ + override: { + components: withDraggables( + withPlaceholders({ + [AIPlugin.key]: AILeaf, + [BlockquotePlugin.key]: BlockquoteElement, + [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), + [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }), + [CodeBlockPlugin.key]: CodeBlockElement, + [CodeLinePlugin.key]: CodeLineElement, + [CodePlugin.key]: CodeLeaf, + [CodeSyntaxPlugin.key]: CodeSyntaxLeaf, + [ColumnItemPlugin.key]: ColumnElement, + [ColumnPlugin.key]: ColumnGroupElement, + [CommentsPlugin.key]: CommentLeaf, + [DatePlugin.key]: DateElement, + [EmojiInputPlugin.key]: EmojiInputElement, + [ExcalidrawPlugin.key]: ExcalidrawElement, + [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), + [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), + [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), + [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }), + [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }), + [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }), + [HighlightPlugin.key]: HighlightLeaf, + [HorizontalRulePlugin.key]: HrElement, + [ImagePlugin.key]: ImageElement, + [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), + [KbdPlugin.key]: KbdLeaf, + [LinkPlugin.key]: LinkElement, + [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }), + [MediaEmbedPlugin.key]: MediaEmbedElement, + [MentionInputPlugin.key]: MentionInputElement, + [MentionPlugin.key]: MentionElement, + [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }), + [ParagraphPlugin.key]: ParagraphElement, + [SlashInputPlugin.key]: SlashInputElement, + [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), + [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }), + [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }), + [TableCellHeaderPlugin.key]: TableCellHeaderElement, + [TableCellPlugin.key]: TableCellElement, + [TablePlugin.key]: TableElement, + [TableRowPlugin.key]: TableRowElement, + [TocPlugin.key]: TocElement, + [TogglePlugin.key]: ToggleElement, + [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + }) + ), + }, + plugins: [ + // AI + ...aiPlugins, + ...copilotPlugins, + // Nodes + HeadingPlugin, + TocPlugin.configure({ + options: { + scrollContainerSelector: `#scroll_container`, + topOffset: 80, + }, + }), + BlockquotePlugin, + CodeBlockPlugin.configure({ + options: { + prism: Prism, + }, + }), + HorizontalRulePlugin, + LinkPlugin.configure({ + render: { afterEditable: () => }, + }), + ImagePlugin.extend({ + render: { afterEditable: ImagePreview }, + }), + MediaEmbedPlugin, + CaptionPlugin.configure({ + options: { plugins: [ImagePlugin, MediaEmbedPlugin] }, + }), + DatePlugin, + MentionPlugin.configure({ + options: { + triggerPreviousCharPattern: /^$|^[\s"']$/, + }, + }), + SlashPlugin, + TablePlugin.configure({ + options: { + enableMerging: true, + }, + }), + ColumnPlugin, + + TodoListPlugin, + TogglePlugin, + ExcalidrawPlugin, + // Marks + BoldPlugin, + ItalicPlugin, + UnderlinePlugin, + StrikethroughPlugin, + CodePlugin, + SubscriptPlugin, + SuperscriptPlugin, + FontColorPlugin, + FontBackgroundColorPlugin, + FontSizePlugin, + HighlightPlugin, + KbdPlugin, + + // Block Style + AlignPlugin.configure({ + inject: { + targetPlugins: [ + ParagraphPlugin.key, + MediaEmbedPlugin.key, + ImagePlugin.key, + ...HEADING_LEVELS, + ], + }, + }), + IndentPlugin.configure({ + inject: { + targetPlugins: [ + ParagraphPlugin.key, + BlockquotePlugin.key, + CodeBlockPlugin.key, + TogglePlugin.key, + ...HEADING_LEVELS, + ], + }, + }), + IndentListPlugin.configure({ + inject: { + targetPlugins: [ + ParagraphPlugin.key, + BlockquotePlugin.key, + CodeBlockPlugin.key, + TogglePlugin.key, + ...HEADING_LEVELS, + ], + }, + options: { + listStyleTypes: { + todo: { + liComponent: TodoLi, + markerComponent: TodoMarker, + type: 'todo', + }, + }, + }, + }), + LineHeightPlugin.configure({ + inject: { + nodeProps: { + defaultNodeValue: 1.5, + validNodeValues: [1, 1.2, 1.5, 2, 3], + }, + targetPlugins: [ParagraphPlugin.key, ...HEADING_LEVELS], + }, + }), + + // Functionality + autoformatPlugin, + BlockSelectionPlugin.configure({ + options: { + areaOptions: { + behaviour: { + scrolling: { + speedDivider: 1.5, + }, + startThreshold: 10, + }, + boundaries: `#scroll_container`, + container: `#scroll_container`, + selectables: [`#scroll_container .slate-selectable`], + selectionAreaClass: 'slate-selection-area', + }, + enableContextMenu: true, + }, + }), + BlockMenuPlugin.configure({ + render: { aboveEditable: BlockContextMenu }, + }), + DndPlugin.configure({ + options: { enableScroller: true }, + }), + EmojiPlugin, + ExitBreakPlugin.configure({ + options: { + rules: [ + { + hotkey: 'mod+enter', + }, + { + before: true, + hotkey: 'mod+shift+enter', + }, + { + hotkey: 'enter', + level: 1, + query: { + allow: HEADING_LEVELS, + end: true, + start: true, + }, + relative: true, + }, + ], + }, + }), + NodeIdPlugin, + ResetNodePlugin.configure({ + options: { + rules: [ + { + defaultType: ParagraphPlugin.key, + hotkey: 'Enter', + predicate: isBlockAboveEmpty, + types: [BlockquotePlugin.key, TodoListPlugin.key], + }, + { + defaultType: ParagraphPlugin.key, + hotkey: 'Backspace', + predicate: isSelectionAtBlockStart, + types: [BlockquotePlugin.key, TodoListPlugin.key], + }, + { + defaultType: ParagraphPlugin.key, + hotkey: 'Enter', + predicate: isCodeBlockEmpty, + types: [CodeBlockPlugin.key], + onReset: unwrapCodeBlock, + }, + { + defaultType: ParagraphPlugin.key, + hotkey: 'Backspace', + predicate: isSelectionAtCodeBlockStart, + types: [CodeBlockPlugin.key], + onReset: unwrapCodeBlock, + }, + ], + }, + }), + SelectOnBackspacePlugin.configure({ + options: { + query: { + allow: [ImagePlugin.key, HorizontalRulePlugin.key], + }, + }, + }), + SoftBreakPlugin.configure({ + options: { + rules: [ + { hotkey: 'shift+enter' }, + { + hotkey: 'enter', + query: { + allow: [ + CodeBlockPlugin.key, + BlockquotePlugin.key, + TableCellPlugin.key, + TableCellHeaderPlugin.key, + ], + }, + }, + ], + }, + }), + TabbablePlugin.configure(({ editor }) => ({ + options: { + query: () => { + if (isSelectionAtBlockStart(editor)) return false; + + return !someNode(editor, { + match: (n) => { + return !!( + n.type && + ([ + CodeBlockPlugin.key, + TablePlugin.key, + TodoListPlugin.key, + ].includes(n.type as string) || + n.listStyleType) + ); + }, + }); + }, + }, + })), + TrailingBlockPlugin.configure({ + options: { type: ParagraphPlugin.key }, + }), + + // Collaboration + DragOverCursorPlugin, + CommentsPlugin.configure({ + options: { + myUserId: '1', + users: { + 1: { + id: '1', + avatarUrl: + 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4', + name: 'zbeyens', + }, + }, + }, + }), + + // Deserialization + DocxPlugin, + MarkdownPlugin.configure({ options: { indentList: true } }), + JuicePlugin, + ], + value: [ + { + id: '1', + children: [{ text: 'Playground' }], + type: 'h1', + }, + { + id: '2', + children: [ + { text: 'A rich-text editor with AI capabilities. Try the ' }, + { bold: true, text: 'AI commands' }, + { text: ' or use ' }, + { kbd: true, text: 'Cmd+J' }, + { text: ' to open the AI menu.' }, + ], + type: ParagraphPlugin.key, + }, + ], + }); +}; diff --git a/apps/www/src/registry/default/block/editor-ai/page.tsx b/apps/www/src/registry/default/block/editor-ai/page.tsx new file mode 100644 index 0000000000..21bf7c876e --- /dev/null +++ b/apps/www/src/registry/default/block/editor-ai/page.tsx @@ -0,0 +1,18 @@ +import { PlateEditor } from '@/registry/default/block/editor-ai/components/editor/plate-editor'; +import { OpenAIProvider } from '@/registry/default/components/editor/use-chat'; + +export const description = 'An AI editor.'; + +export const iframeHeight = '650px'; + +export const containerClassName = 'w-full h-full'; + +export default function Page() { + return ( +
+ + + +
+ ); +} diff --git a/apps/www/src/registry/default/block/editor-basic/components/editor/plate-editor.tsx b/apps/www/src/registry/default/block/editor-basic/components/editor/plate-editor.tsx new file mode 100644 index 0000000000..60d60eb37a --- /dev/null +++ b/apps/www/src/registry/default/block/editor-basic/components/editor/plate-editor.tsx @@ -0,0 +1,18 @@ +'use client'; + +import { Plate } from '@udecode/plate-common/react'; + +import { useCreateEditor } from '@/registry/default/block/editor-basic/components/editor/use-create-editor'; +import { Editor, EditorContainer } from '@/registry/default/plate-ui/editor'; + +export function PlateEditor() { + const editor = useCreateEditor(); + + return ( + + + + + + ); +} diff --git a/templates/plate-template/src/components/plate-editor.tsx b/apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx similarity index 67% rename from templates/plate-template/src/components/plate-editor.tsx rename to apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx index d3d323baf4..ef89c6c2dd 100644 --- a/templates/plate-template/src/components/plate-editor.tsx +++ b/apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx @@ -1,7 +1,5 @@ 'use client'; -import { useRef } from 'react'; - import { withProps } from '@udecode/cn'; import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react'; import { @@ -13,42 +11,41 @@ import { } from '@udecode/plate-basic-marks/react'; import { ParagraphPlugin, - Plate, PlateElement, PlateLeaf, usePlateEditor, } from '@udecode/plate-common/react'; -import { Editor, EditorContainer } from '@/components/plate-ui/editor'; - -export function PlateEditor() { - const containerRef = useRef(null); - - const editor = useCreateEditor(); - - return ( - - - - - - ); -} - -const useCreateEditor = () => { +export const useCreateEditor = () => { return usePlateEditor({ override: { // Default styles in globals.css components: { [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), - [ParagraphPlugin.key]: withProps(PlateElement, { as: 'p' }), + [ParagraphPlugin.key]: withProps(PlateElement, { + as: 'p', + className: 'mb-4', + }), [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), - blockquote: withProps(PlateElement, { as: 'blockquote' }), - h1: withProps(PlateElement, { as: 'h1' }), - h2: withProps(PlateElement, { as: 'h2' }), - h3: withProps(PlateElement, { as: 'h3' }), + blockquote: withProps(PlateElement, { + as: 'blockquote', + className: 'mb-4 border-l-4 border-[#d0d7de] pl-4 text-[#636c76]', + }), + h1: withProps(PlateElement, { + as: 'h1', + className: + 'mb-4 mt-6 text-3xl font-semibold tracking-tight lg:text-4xl', + }), + h2: withProps(PlateElement, { + as: 'h2', + className: 'mb-4 mt-6 text-2xl font-semibold tracking-tight', + }), + h3: withProps(PlateElement, { + as: 'h3', + className: 'mb-4 mt-6 text-xl font-semibold tracking-tight', + }), }, }, plugins: [BasicElementsPlugin, BasicMarksPlugin], diff --git a/apps/www/src/registry/default/block/editor-basic/page.tsx b/apps/www/src/registry/default/block/editor-basic/page.tsx new file mode 100644 index 0000000000..11d3a4b696 --- /dev/null +++ b/apps/www/src/registry/default/block/editor-basic/page.tsx @@ -0,0 +1,15 @@ +import { PlateEditor } from '@/registry/default/block/editor-basic/components/editor/plate-editor'; + +export const description = 'A simple editor.'; + +export const iframeHeight = '650px'; + +export const containerClassName = 'w-full h-full'; + +export default function Page() { + return ( +
+ +
+ ); +} diff --git a/apps/www/src/registry/default/components/api/ai/command/route.ts b/apps/www/src/registry/default/components/api/ai/command/route.ts new file mode 100644 index 0000000000..76175403d4 --- /dev/null +++ b/apps/www/src/registry/default/components/api/ai/command/route.ts @@ -0,0 +1,41 @@ +import type { NextRequest } from 'next/server'; + +import { createOpenAI } from '@ai-sdk/openai'; +import { convertToCoreMessages, streamText } from 'ai'; +import { NextResponse } from 'next/server'; + +export async function POST(req: NextRequest) { + const { + apiKey: key, + messages, + model = 'gpt-4o-mini', + system, + } = await req.json(); + + const apiKey = key || process.env.OPENAI_API_KEY; + + if (!apiKey) { + return NextResponse.json( + { error: 'Missing OpenAI API key.' }, + { status: 401 } + ); + } + + const openai = createOpenAI({ apiKey }); + + try { + const result = await streamText({ + maxTokens: 2048, + messages: convertToCoreMessages(messages), + model: openai(model), + system: system, + }); + + return result.toDataStreamResponse(); + } catch { + return NextResponse.json( + { error: 'Failed to process AI request' }, + { status: 500 } + ); + } +} diff --git a/apps/www/src/registry/default/components/api/ai/copilot/route.ts b/apps/www/src/registry/default/components/api/ai/copilot/route.ts new file mode 100644 index 0000000000..2439860d26 --- /dev/null +++ b/apps/www/src/registry/default/components/api/ai/copilot/route.ts @@ -0,0 +1,47 @@ +import type { NextRequest } from 'next/server'; + +import { createOpenAI } from '@ai-sdk/openai'; +import { generateText } from 'ai'; +import { NextResponse } from 'next/server'; + +export async function POST(req: NextRequest) { + const { + apiKey: key, + model = 'gpt-4o-mini', + prompt, + system, + } = await req.json(); + + const apiKey = key || process.env.OPENAI_API_KEY; + + if (!apiKey) { + return NextResponse.json( + { error: 'Missing OpenAI API key.' }, + { status: 401 } + ); + } + + const openai = createOpenAI({ apiKey }); + + try { + const result = await generateText({ + abortSignal: req.signal, + maxTokens: 50, + model: openai(model), + prompt: prompt, + system, + temperature: 0.7, + }); + + return NextResponse.json(result); + } catch (error: any) { + if (error.name === 'AbortError') { + return NextResponse.json(null, { status: 408 }); + } + + return NextResponse.json( + { error: 'Failed to process AI request' }, + { status: 500 } + ); + } +} diff --git a/templates/plate-playground-template/src/lib/plate/plate-types.ts b/apps/www/src/registry/default/components/editor/plate-types.ts similarity index 93% rename from templates/plate-playground-template/src/lib/plate/plate-types.ts rename to apps/www/src/registry/default/components/editor/plate-types.ts index f81edad5b2..32b8e0b587 100644 --- a/templates/plate-playground-template/src/lib/plate/plate-types.ts +++ b/apps/www/src/registry/default/components/editor/plate-types.ts @@ -1,13 +1,14 @@ +'use client'; + import type React from 'react'; -import type { useCreateEditor } from '@/components/plate-editor'; import type { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import type { CodeBlockPlugin, CodeLinePlugin, } from '@udecode/plate-code-block/react'; import type { TCommentText } from '@udecode/plate-comments'; -import type { ElementOf, TElement, TText } from '@udecode/plate-common'; +import type { TElement, TText } from '@udecode/plate-common'; import type { ParagraphPlugin } from '@udecode/plate-common/react'; import type { TExcalidrawElement } from '@udecode/plate-excalidraw'; import type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react'; @@ -41,8 +42,6 @@ import type { import type { TToggleElement } from '@udecode/plate-toggle'; import type { TogglePlugin } from '@udecode/plate-toggle/react'; -import { useEditorRef } from '@udecode/plate-common/react'; - /** Text */ export type EmptyText = { @@ -241,10 +240,6 @@ export interface MyExcalidrawElement export type MyNestableBlock = MyParagraphElement; -export type MyElement = ElementOf; - -export type MyBlock = Exclude; - export type MyRootBlock = | MyBlockquoteElement | MyBulletedListElement @@ -265,10 +260,12 @@ export type MyRootBlock = | MyTodoListElement | MyToggleElement; -/** Editor types */ - export type MyValue = MyRootBlock[]; -export type MyEditor = ReturnType; +// export type MyElement = ElementOf; + +// export type MyBlock = Exclude; + +// export type MyEditor = ReturnType; -export const useMyEditorRef = () => useEditorRef(); +// export const useEditor = () => useEditorRef(); diff --git a/apps/www/src/lib/plate/demo/plugins/ai-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx similarity index 99% rename from apps/www/src/lib/plate/demo/plugins/ai-plugins.tsx rename to apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx index d96e2fac64..920158508e 100644 --- a/apps/www/src/lib/plate/demo/plugins/ai-plugins.tsx +++ b/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx @@ -49,7 +49,7 @@ import { LinkElement } from '@/registry/default/plate-ui/link-element'; import { LinkFloatingToolbar } from '@/registry/default/plate-ui/link-floating-toolbar'; import { ParagraphElement } from '@/registry/default/plate-ui/paragraph-element'; -export const createAIEditor = () => { +const createAIEditor = () => { const editor = createPlateEditor({ id: 'ai', override: { diff --git a/apps/www/src/registry/default/components/editor/plugins/autoformat-plugin.ts b/apps/www/src/registry/default/components/editor/plugins/autoformat-plugin.ts new file mode 100644 index 0000000000..54ae5cbec1 --- /dev/null +++ b/apps/www/src/registry/default/components/editor/plugins/autoformat-plugin.ts @@ -0,0 +1,341 @@ +'use client'; + +import type { + AutoformatBlockRule, + AutoformatRule, +} from '@udecode/plate-autoformat'; +import type { SlateEditor } from '@udecode/plate-common'; +import type { TTodoListItemElement } from '@udecode/plate-list'; + +import { + autoformatArrow, + autoformatLegal, + autoformatLegalHtml, + autoformatMath, + autoformatPunctuation, + autoformatSmartQuotes, +} from '@udecode/plate-autoformat'; +import { AutoformatPlugin } from '@udecode/plate-autoformat/react'; +import { + BoldPlugin, + CodePlugin, + ItalicPlugin, + StrikethroughPlugin, + SubscriptPlugin, + SuperscriptPlugin, + UnderlinePlugin, +} from '@udecode/plate-basic-marks/react'; +import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; +import { insertEmptyCodeBlock } from '@udecode/plate-code-block'; +import { + CodeBlockPlugin, + CodeLinePlugin, +} from '@udecode/plate-code-block/react'; +import { + getParentNode, + insertNodes, + isBlock, + isElement, + isType, + setNodes, +} from '@udecode/plate-common'; +import { ParagraphPlugin } from '@udecode/plate-common/react'; +import { HEADING_KEYS } from '@udecode/plate-heading'; +import { HighlightPlugin } from '@udecode/plate-highlight/react'; +import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; +import { + INDENT_LIST_KEYS, + ListStyleType, + toggleIndentList, +} from '@udecode/plate-indent-list'; +import { toggleList, unwrapList } from '@udecode/plate-list'; +import { + BulletedListPlugin, + ListItemPlugin, + NumberedListPlugin, + TodoListPlugin, +} from '@udecode/plate-list/react'; +import { TogglePlugin, openNextToggles } from '@udecode/plate-toggle/react'; + +export const preFormat: AutoformatBlockRule['preFormat'] = (editor) => + unwrapList(editor); + +export const format = (editor: SlateEditor, customFormatting: any) => { + if (editor.selection) { + const parentEntry = getParentNode(editor, editor.selection); + + if (!parentEntry) return; + + const [node] = parentEntry; + + if ( + isElement(node) && + !isType(editor, node, CodeBlockPlugin.key) && + !isType(editor, node, CodeLinePlugin.key) + ) { + customFormatting(); + } + } +}; + +export const formatList = (editor: SlateEditor, elementType: string) => { + format(editor, () => + toggleList(editor, { + type: elementType, + }) + ); +}; + +export const autoformatMarks: AutoformatRule[] = [ + { + match: '***', + mode: 'mark', + type: [BoldPlugin.key, ItalicPlugin.key], + }, + { + match: '__*', + mode: 'mark', + type: [UnderlinePlugin.key, ItalicPlugin.key], + }, + { + match: '__**', + mode: 'mark', + type: [UnderlinePlugin.key, BoldPlugin.key], + }, + { + match: '___***', + mode: 'mark', + type: [UnderlinePlugin.key, BoldPlugin.key, ItalicPlugin.key], + }, + { + match: '**', + mode: 'mark', + type: BoldPlugin.key, + }, + { + match: '__', + mode: 'mark', + type: UnderlinePlugin.key, + }, + { + match: '*', + mode: 'mark', + type: ItalicPlugin.key, + }, + { + match: '_', + mode: 'mark', + type: ItalicPlugin.key, + }, + { + match: '~~', + mode: 'mark', + type: StrikethroughPlugin.key, + }, + { + match: '^', + mode: 'mark', + type: SuperscriptPlugin.key, + }, + { + match: '~', + mode: 'mark', + type: SubscriptPlugin.key, + }, + { + match: '==', + mode: 'mark', + type: HighlightPlugin.key, + }, + { + match: '≡', + mode: 'mark', + type: HighlightPlugin.key, + }, + { + match: '`', + mode: 'mark', + type: CodePlugin.key, + }, +]; + +export const autoformatBlocks: AutoformatRule[] = [ + { + match: '# ', + mode: 'block', + preFormat, + type: HEADING_KEYS.h1, + }, + { + match: '## ', + mode: 'block', + preFormat, + type: HEADING_KEYS.h2, + }, + { + match: '### ', + mode: 'block', + preFormat, + type: HEADING_KEYS.h3, + }, + { + match: '#### ', + mode: 'block', + preFormat, + type: HEADING_KEYS.h4, + }, + { + match: '##### ', + mode: 'block', + preFormat, + type: HEADING_KEYS.h5, + }, + { + match: '###### ', + mode: 'block', + preFormat, + type: HEADING_KEYS.h6, + }, + { + match: '> ', + mode: 'block', + preFormat, + type: BlockquotePlugin.key, + }, + { + format: (editor) => { + insertEmptyCodeBlock(editor, { + defaultType: ParagraphPlugin.key, + insertNodesOptions: { select: true }, + }); + }, + match: '```', + mode: 'block', + preFormat, + triggerAtBlockStart: false, + type: CodeBlockPlugin.key, + }, + { + match: '+ ', + mode: 'block', + preFormat: openNextToggles, + type: TogglePlugin.key, + }, + { + format: (editor) => { + setNodes(editor, { type: HorizontalRulePlugin.key }); + insertNodes(editor, { + children: [{ text: '' }], + type: ParagraphPlugin.key, + }); + }, + match: ['---', '—-', '___ '], + mode: 'block', + type: HorizontalRulePlugin.key, + }, +]; + +export const autoformatLists: AutoformatRule[] = [ + { + format: (editor) => formatList(editor, BulletedListPlugin.key), + match: ['* ', '- '], + mode: 'block', + preFormat, + type: ListItemPlugin.key, + }, + { + format: (editor) => formatList(editor, NumberedListPlugin.key), + match: [String.raw`^\d+\.$ `, String.raw`^\d+\)$ `], + matchByRegex: true, + mode: 'block', + preFormat, + type: ListItemPlugin.key, + }, + { + match: '[] ', + mode: 'block', + type: TodoListPlugin.key, + }, + { + format: (editor) => + setNodes( + editor, + { checked: true, type: TodoListPlugin.key }, + { + match: (n) => isBlock(editor, n), + } + ), + match: '[x] ', + mode: 'block', + type: TodoListPlugin.key, + }, +]; + +export const autoformatIndentLists: AutoformatRule[] = [ + { + format: (editor) => { + toggleIndentList(editor, { + listStyleType: ListStyleType.Disc, + }); + }, + match: ['* ', '- '], + mode: 'block', + type: 'list', + }, + { + format: (editor) => + toggleIndentList(editor, { + listStyleType: ListStyleType.Decimal, + }), + match: [String.raw`^\d+\.$ `, String.raw`^\d+\)$ `], + matchByRegex: true, + mode: 'block', + type: 'list', + }, + { + format: (editor) => { + toggleIndentList(editor, { + listStyleType: INDENT_LIST_KEYS.todo, + }); + setNodes(editor, { + checked: false, + listStyleType: INDENT_LIST_KEYS.todo, + }); + }, + match: ['[] '], + mode: 'block', + type: 'list', + }, + { + format: (editor) => { + toggleIndentList(editor, { + listStyleType: INDENT_LIST_KEYS.todo, + }); + setNodes(editor, { + checked: true, + listStyleType: INDENT_LIST_KEYS.todo, + }); + }, + match: ['[x] '], + mode: 'block', + type: 'list', + }, +]; + +export const autoformatPlugin = AutoformatPlugin.configure({ + options: { + enableUndoOnDelete: true, + rules: [ + ...autoformatBlocks, + ...autoformatMarks, + ...autoformatSmartQuotes, + ...autoformatPunctuation, + ...autoformatLegal, + ...autoformatLegalHtml, + ...autoformatArrow, + ...autoformatMath, + // Use autoformatLists instead if using ListPlugin + ...autoformatIndentLists, + ], + }, +}); diff --git a/templates/plate-playground-template/src/components/plugins/copilot-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/copilot-plugins.tsx similarity index 83% rename from templates/plate-playground-template/src/components/plugins/copilot-plugins.tsx rename to apps/www/src/registry/default/components/editor/plugins/copilot-plugins.tsx index 0035e79e47..9cfc27b7f5 100644 --- a/templates/plate-playground-template/src/components/plugins/copilot-plugins.tsx +++ b/apps/www/src/registry/default/components/editor/plugins/copilot-plugins.tsx @@ -1,10 +1,13 @@ +'use client'; + import type { TElement } from '@udecode/plate-common'; +import { faker } from '@faker-js/faker'; import { CopilotPlugin } from '@udecode/plate-ai/react'; import { getAncestorNode } from '@udecode/plate-common'; import { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown'; -import { GhostText } from '../plate-ui/ghost-text'; +import { GhostText } from '@/registry/default/plate-ui/ghost-text'; export const copilotPlugins = [ CopilotPlugin.configure(({ api }) => ({ @@ -24,17 +27,9 @@ export const copilotPlugins = [ - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context. - If no context is provided or you can't generate a continuation, return "0" without explanation.`, }, - onError: (error) => { - let text = ''; - - if (error.message.includes('API key')) { - text = 'Set your OpenAI API key for real AI suggestions'; - } else { - text = 'Try with a valid OpenAI API key for real AI suggestions'; - } - + onError: () => { api.copilot.setBlockSuggestion({ - text: stripMarkdown(text), + text: stripMarkdown(faker.lorem.sentence()), }); }, onFinish: (_, completion) => { diff --git a/apps/www/src/registry/default/lib/transforms.ts b/apps/www/src/registry/default/components/editor/transforms.ts similarity index 99% rename from apps/www/src/registry/default/lib/transforms.ts rename to apps/www/src/registry/default/components/editor/transforms.ts index 92e9d29edb..7e48770362 100644 --- a/apps/www/src/registry/default/lib/transforms.ts +++ b/apps/www/src/registry/default/components/editor/transforms.ts @@ -1,3 +1,5 @@ +'use client'; + import type { PlateEditor } from '@udecode/plate-common/react'; import { insertCallout } from '@udecode/plate-callout'; diff --git a/apps/www/src/registry/default/components/editor/use-chat.tsx b/apps/www/src/registry/default/components/editor/use-chat.tsx new file mode 100644 index 0000000000..45aef100bd --- /dev/null +++ b/apps/www/src/registry/default/components/editor/use-chat.tsx @@ -0,0 +1,313 @@ +'use client'; + +import { type ReactNode, createContext, useContext, useState } from 'react'; + +import { faker } from '@faker-js/faker'; +import { cn } from '@udecode/cn'; +import { CopilotPlugin } from '@udecode/plate-ai/react'; +import { useEditorPlugin } from '@udecode/plate-common/react'; +import { useChat as useBaseChat } from 'ai/react'; +import { + ArrowUpRight, + Check, + ChevronsUpDown, + Eye, + EyeOff, + Settings, +} from 'lucide-react'; +import Link from 'next/link'; + +import { Button } from '@/registry/default/plate-ui/button'; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from '@/registry/default/plate-ui/command'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/registry/default/plate-ui/dialog'; +import { Input } from '@/registry/default/plate-ui/input'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@/registry/default/plate-ui/popover'; + +export const useChat = () => { + return useBaseChat({ + id: 'editor', + api: '/api/ai/command', + body: { + apiKey: useOpenAI().apiKey, + model: useOpenAI().model.value, + }, + fetch: async (input, init) => { + try { + return await fetch(input, init); + } catch (error) { + // Mock the API response. Remove it when you implement the route /api/ai + await new Promise((resolve) => setTimeout(resolve, 400)); + + const stream = fakeStreamText(); + + return new Response(stream, { + headers: { + Connection: 'keep-alive', + 'Content-Type': 'text/plain', + }, + }); + } + }, + }); +}; + +// Used for testing. Remove it after implementing useChat api. +const fakeStreamText = ({ + chunkCount = 10, + streamProtocol = 'data', +}: { + chunkCount?: number; + streamProtocol?: 'data' | 'text'; +} = {}) => { + const chunks = Array.from({ length: chunkCount }, () => ({ + delay: faker.number.int({ max: 150, min: 50 }), + texts: faker.lorem.words({ max: 3, min: 1 }) + ' ', + })); + const encoder = new TextEncoder(); + + return new ReadableStream({ + async start(controller) { + for (const chunk of chunks) { + await new Promise((resolve) => setTimeout(resolve, chunk.delay)); + + if (streamProtocol === 'text') { + controller.enqueue(encoder.encode(chunk.texts)); + } else { + controller.enqueue( + encoder.encode(`0:${JSON.stringify(chunk.texts)}\n`) + ); + } + } + + if (streamProtocol === 'data') { + controller.enqueue( + `d:{"finishReason":"stop","usage":{"promptTokens":0,"completionTokens":${chunks.length}}}\n` + ); + } + + controller.close(); + }, + }); +}; + +interface Model { + label: string; + value: string; +} + +interface OpenAIContextType { + apiKey: string; + model: Model; + setApiKey: (key: string) => void; + setModel: (model: Model) => void; +} + +export const models: Model[] = [ + { label: 'gpt-4o-mini', value: 'gpt-4o-mini' }, + { label: 'gpt-4o', value: 'gpt-4o' }, + { label: 'gpt-4-turbo', value: 'gpt-4-turbo' }, + { label: 'gpt-4', value: 'gpt-4' }, + { label: 'gpt-3.5-turbo', value: 'gpt-3.5-turbo' }, + { label: 'gpt-3.5-turbo-instruct', value: 'gpt-3.5-turbo-instruct' }, +]; + +const OpenAIContext = createContext(undefined); + +export function OpenAIProvider({ children }: { children: ReactNode }) { + const [apiKey, setApiKey] = useState(''); + const [model, setModel] = useState(models[0]); + + return ( + + {children} + + ); +} + +export function useOpenAI() { + const context = useContext(OpenAIContext); + + return ( + context ?? + ({ + apiKey: '', + model: models[0], + setApiKey: () => {}, + setModel: () => {}, + } as OpenAIContextType) + ); +} + +export function SettingsDialog() { + const { apiKey, model, setApiKey, setModel } = useOpenAI(); + const [tempKey, setTempKey] = useState(apiKey); + const [showKey, setShowKey] = useState(false); + const [open, setOpen] = useState(false); + const [openModel, setOpenModel] = useState(false); + + const { getOptions, setOption } = useEditorPlugin(CopilotPlugin); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + setApiKey(tempKey); + setOpen(false); + + const completeOptions = getOptions().completeOptions ?? {}; + + setOption('completeOptions', { + ...completeOptions, + body: { + ...completeOptions.body, + apiKey: tempKey, + model: model.value, + }, + }); + }; + + return ( + + + + + + + AI Settings + + Enter your{' '} + + OpenAI API key + + {' '} + to use AI features. + + +
+
+ setTempKey(e.target.value)} + placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" + data-1p-ignore + type={showKey ? 'text' : 'password'} + /> + +
+ + + + + + + + + No model found. + + + + {models.map((m) => ( + { + setModel(m); + setOpenModel(false); + }} + > + + {m.label} + + ))} + + + + + + + + +

+ Not stored anywhere. Used only for current session requests. +

+ + + ); +} diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 6c39f56195..b4e5c0ed05 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -69,9 +69,7 @@ import Prism from 'prismjs'; import { CheckPlugin } from '@/components/context/check-plugin'; import { settingsStore } from '@/components/context/settings-store'; -import { aiPlugins } from '@/lib/plate/demo/plugins/ai-plugins'; import { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions'; -import { copilotPlugins } from '@/lib/plate/demo/plugins/copilot-plugins'; import { createPlateUI } from '@/plate/create-plate-ui'; import { editableProps } from '@/plate/demo/editableProps'; import { isEnabled } from '@/plate/demo/is-enabled'; @@ -82,6 +80,8 @@ import { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin'; import { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin'; import { commentsData, usersData } from '@/plate/demo/values/commentsValue'; import { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue'; +import { aiPlugins } from '@/registry/default/components/editor/plugins/ai-plugins'; +import { copilotPlugins } from '@/registry/default/components/editor/plugins/copilot-plugins'; import { BlockContextMenu } from '@/registry/default/plate-ui/block-context-menu'; import { CommentsPopover } from '@/registry/default/plate-ui/comments-popover'; import { diff --git a/apps/www/src/registry/default/plate-ui/ai-menu.tsx b/apps/www/src/registry/default/plate-ui/ai-menu.tsx index b2aab3f0e9..2741157164 100644 --- a/apps/www/src/registry/default/plate-ui/ai-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/ai-menu.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; -import { faker } from '@faker-js/faker'; import { AIChatPlugin, useEditorChat } from '@udecode/plate-ai/react'; import { type TElement, @@ -23,9 +22,10 @@ import { BlockSelectionPlugin, useIsSelecting, } from '@udecode/plate-selection/react'; -import { useChat } from 'ai/react'; import { Loader2Icon } from 'lucide-react'; +import { useChat } from '@/registry/default/components/editor/use-chat'; + import { AIChatEditor } from './ai-chat-editor'; import { AIMenuItems } from './ai-menu-items'; import { Command, CommandList, InputCommand } from './command'; @@ -40,24 +40,7 @@ export function AIMenu() { const aiEditorRef = React.useRef(null); const [value, setValue] = React.useState(''); - const chat = useChat({ - id: 'editor', - // API to be implemented - api: '/api/ai', - // Mock the API response. Remove it when you implement the route /api/ai - fetch: async () => { - await new Promise((resolve) => setTimeout(resolve, 400)); - - const stream = fakeStreamText(); - - return new Response(stream, { - headers: { - Connection: 'keep-alive', - 'Content-Type': 'text/plain', - }, - }); - }, - }); + const chat = useChat(); const { input, isLoading, messages, setInput } = chat; const [anchorElement, setAnchorElement] = React.useState( @@ -179,42 +162,3 @@ export function AIMenu() { ); } - -// Used for testing. Remove it after implementing useChat api. -const fakeStreamText = ({ - chunkCount = 10, - streamProtocol = 'data', -}: { - chunkCount?: number; - streamProtocol?: 'data' | 'text'; -} = {}) => { - const chunks = Array.from({ length: chunkCount }, () => ({ - delay: faker.number.int({ max: 150, min: 50 }), - texts: faker.lorem.words({ max: 3, min: 1 }) + ' ', - })); - const encoder = new TextEncoder(); - - return new ReadableStream({ - async start(controller) { - for (const chunk of chunks) { - await new Promise((resolve) => setTimeout(resolve, chunk.delay)); - - if (streamProtocol === 'text') { - controller.enqueue(encoder.encode(chunk.texts)); - } else { - controller.enqueue( - encoder.encode(`0:${JSON.stringify(chunk.texts)}\n`) - ); - } - } - - if (streamProtocol === 'data') { - controller.enqueue( - `d:{"finishReason":"stop","usage":{"promptTokens":0,"completionTokens":${chunks.length}}}\n` - ); - } - - controller.close(); - }, - }); -}; diff --git a/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx b/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx index 535f20d68a..7ec8055ba4 100644 --- a/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx +++ b/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx @@ -1,7 +1,5 @@ 'use client'; -/* eslint-disable unicorn/prefer-export-from */ - import React, { useState } from 'react'; import { cn } from '@udecode/cn'; @@ -10,6 +8,7 @@ import { useCodeBlockComboboxState, } from '@udecode/plate-code-block/react'; import { Check, ChevronsUpDown } from 'lucide-react'; + // Prism must be imported before all language files import Prism from 'prismjs'; diff --git a/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx b/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx index fa138bd2e4..38061f2d0e 100644 --- a/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx +++ b/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx @@ -73,7 +73,7 @@ export function CursorOverlay({ cursors, ...props }: CursorOverlayProps) { ); } -const DragOverCursorPlugin = createPlatePlugin({ +export const DragOverCursorPlugin = createPlatePlugin({ key: 'dragOverCursor', options: { cursors: {} as Record> }, handlers: { @@ -110,7 +110,7 @@ const DragOverCursorPlugin = createPlatePlugin({ }); export const SelectionOverlayPlugin = createPlatePlugin({ - key: 'selection_over_lay', + key: 'selection_overlay', useHooks: () => { const { editor } = useEditorPlugin(BlockSelectionPlugin); const isSelecting = editor.useOptions(BlockSelectionPlugin).isSelecting; diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx index 3c9e6075c4..467698de88 100644 --- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx +++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import { diff --git a/apps/www/src/registry/default/plate-ui/floating-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/floating-toolbar-buttons.tsx index 76c83ce326..f2995fc0ca 100644 --- a/apps/www/src/registry/default/plate-ui/floating-toolbar-buttons.tsx +++ b/apps/www/src/registry/default/plate-ui/floating-toolbar-buttons.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import { diff --git a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx index 101d8f04f6..3f9d48c8a4 100644 --- a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx @@ -48,7 +48,7 @@ import { import { insertBlock, insertInlineElement, -} from '@/registry/default/lib/transforms'; +} from '@/registry/default/components/editor/transforms'; import { DropdownMenu, diff --git a/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx index 223d13f28d..2407b02e9f 100644 --- a/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx @@ -1,3 +1,4 @@ +'use client'; import React from 'react'; import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; diff --git a/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx b/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx index 4057b3552c..9bacde0fc8 100644 --- a/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx +++ b/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx @@ -1,3 +1,5 @@ +'use client'; + import { withCn } from '@udecode/cn'; import { PlateLeaf } from '@udecode/plate-common/react'; diff --git a/apps/www/src/registry/default/plate-ui/slash-input-element.tsx b/apps/www/src/registry/default/plate-ui/slash-input-element.tsx index 2253410298..eaf91f83dc 100644 --- a/apps/www/src/registry/default/plate-ui/slash-input-element.tsx +++ b/apps/www/src/registry/default/plate-ui/slash-input-element.tsx @@ -34,7 +34,7 @@ import { import { insertBlock, insertInlineElement, -} from '@/registry/default/lib/transforms'; +} from '@/registry/default/components/editor/transforms'; import { InlineCombobox, diff --git a/apps/www/src/registry/default/plate-ui/toc-element.tsx b/apps/www/src/registry/default/plate-ui/toc-element.tsx index 961886fb57..844b2bed28 100644 --- a/apps/www/src/registry/default/plate-ui/toc-element.tsx +++ b/apps/www/src/registry/default/plate-ui/toc-element.tsx @@ -1,3 +1,5 @@ +'use client'; + import { cn, withRef } from '@udecode/cn'; import { useTocElement, diff --git a/apps/www/src/registry/default/plate-ui/toggle-element.tsx b/apps/www/src/registry/default/plate-ui/toggle-element.tsx index b8e318b8de..42366f3b8c 100644 --- a/apps/www/src/registry/default/plate-ui/toggle-element.tsx +++ b/apps/www/src/registry/default/plate-ui/toggle-element.tsx @@ -1,3 +1,5 @@ +'use client'; + import { cn, withRef } from '@udecode/cn'; import { useElement } from '@udecode/plate-common/react'; import { diff --git a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx index d7cb41b329..6bf33c1185 100644 --- a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx @@ -29,7 +29,10 @@ import { SquareIcon, } from 'lucide-react'; -import { getBlockType, setBlockType } from '@/registry/default/lib/transforms'; +import { + getBlockType, + setBlockType, +} from '@/registry/default/components/editor/transforms'; import { DropdownMenu, diff --git a/apps/www/src/registry/registry-base-colors.ts b/apps/www/src/registry/registry-base-colors.ts index 10ec7a1a6f..bf3713ea26 100644 --- a/apps/www/src/registry/registry-base-colors.ts +++ b/apps/www/src/registry/registry-base-colors.ts @@ -10,11 +10,13 @@ export const baseColors = [ 'accent-foreground': '0 0% 98%', background: '240 10% 3.9%', border: '240 3.7% 25%', + brand: '213.3 93.9% 67.8%', card: '240 10% 3.9%', 'card-foreground': '0 0% 98%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '0 0% 98%', foreground: '0 0% 98%', + highlight: '48 96% 53%', input: '240 3.7% 25%', muted: '240 3.7% 15.9%', 'muted-foreground': '240 5% 64.9%', @@ -31,11 +33,13 @@ export const baseColors = [ 'accent-foreground': '240 5.9% 10%', background: '0 0% 100%', border: '240 5.9% 90%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '240 10% 3.9%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '0 0% 98%', foreground: '240 10% 3.9%', + highlight: '47.9 95.8% 53.1%', input: '240 5.9% 90%', muted: '240 4.8% 95.9%', 'muted-foreground': '240 3.8% 46.1%', @@ -63,11 +67,13 @@ export const baseColors = [ 'accent-foreground': '210 40% 98%', background: '222.2 84% 4.9%', border: '217.2 32.6% 17.5%', + brand: '213.3 93.9% 67.8%', card: '222.2 84% 4.9%', 'card-foreground': '210 40% 98%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '210 40% 98%', foreground: '210 40% 98%', + highlight: '48 96% 53%', input: '217.2 32.6% 17.5%', muted: '217.2 32.6% 17.5%', 'muted-foreground': '215 20.2% 65.1%', @@ -84,11 +90,13 @@ export const baseColors = [ 'accent-foreground': '222.2 47.4% 11.2%', background: '0 0% 100%', border: '214.3 31.8% 91.4%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '222.2 84% 4.9%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '210 40% 98%', foreground: '222.2 84% 4.9%', + highlight: '47.9 95.8% 53.1%', input: '214.3 31.8% 91.4%', muted: '210 40% 96.1%', 'muted-foreground': '215.4 16.3% 46.9%', @@ -116,11 +124,13 @@ export const baseColors = [ 'accent-foreground': '60 9.1% 97.8%', background: '20 14.3% 4.1%', border: '12 6.5% 15.1%', + brand: '213.3 93.9% 67.8%', card: '20 14.3% 4.1%', 'card-foreground': '60 9.1% 97.8%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '60 9.1% 97.8%', foreground: '60 9.1% 97.8%', + highlight: '48 96% 53%', input: '12 6.5% 15.1%', muted: '12 6.5% 15.1%', 'muted-foreground': '24 5.4% 63.9%', @@ -137,11 +147,13 @@ export const baseColors = [ 'accent-foreground': '24 9.8% 10%', background: '0 0% 100%', border: '20 5.9% 90%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '20 14.3% 4.1%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '60 9.1% 97.8%', foreground: '20 14.3% 4.1%', + highlight: '47.9 95.8% 53.1%', input: '20 5.9% 90%', muted: '60 4.8% 95.9%', 'muted-foreground': '25 5.3% 44.7%', @@ -169,11 +181,13 @@ export const baseColors = [ 'accent-foreground': '210 20% 98%', background: '224 71.4% 4.1%', border: '215 27.9% 16.9%', + brand: '213.3 93.9% 67.8%', card: '224 71.4% 4.1%', 'card-foreground': '210 20% 98%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '210 20% 98%', foreground: '210 20% 98%', + highlight: '48 96% 53%', input: '215 27.9% 16.9%', muted: '215 27.9% 16.9%', 'muted-foreground': '217.9 10.6% 64.9%', @@ -190,11 +204,13 @@ export const baseColors = [ 'accent-foreground': '220.9 39.3% 11%', background: '0 0% 100%', border: '220 13% 91%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '224 71.4% 4.1%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '210 20% 98%', foreground: '224 71.4% 4.1%', + highlight: '47.9 95.8% 53.1%', input: '220 13% 91%', muted: '220 14.3% 95.9%', 'muted-foreground': '220 8.9% 46.1%', @@ -222,11 +238,13 @@ export const baseColors = [ 'accent-foreground': '0 0% 98%', background: '0 0% 3.9%', border: '0 0% 14.9%', + brand: '213.3 93.9% 67.8%', card: '0 0% 3.9%', 'card-foreground': '0 0% 98%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '0 0% 98%', foreground: '0 0% 98%', + highlight: '48 96% 53%', input: '0 0% 14.9%', muted: '0 0% 14.9%', 'muted-foreground': '0 0% 63.9%', @@ -243,11 +261,13 @@ export const baseColors = [ 'accent-foreground': '0 0% 9%', background: '0 0% 100%', border: '0 0% 89.8%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '0 0% 3.9%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '0 0% 98%', foreground: '0 0% 3.9%', + highlight: '47.9 95.8% 53.1%', input: '0 0% 89.8%', muted: '0 0% 96.1%', 'muted-foreground': '0 0% 45.1%', @@ -274,11 +294,13 @@ export const baseColors = [ 'accent-foreground': '0 0% 98%', background: '0 0% 3.9%', border: '0 0% 14.9%', + brand: '213.3 93.9% 67.8%', card: '0 0% 3.9%', 'card-foreground': '0 0% 98%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '0 0% 98%', foreground: '0 0% 98%', + highlight: '48 96% 53%', input: '0 0% 14.9%', muted: '0 0% 14.9%', 'muted-foreground': '0 0% 63.9%', @@ -295,11 +317,13 @@ export const baseColors = [ 'accent-foreground': '0 0% 9%', background: '0 0% 100%', border: '0 0% 89.8%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '0 0% 3.9%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '0 0% 98%', foreground: '0 0% 3.9%', + highlight: '47.9 95.8% 53.1%', input: '0 0% 89.8%', muted: '0 0% 96.1%', 'muted-foreground': '0 0% 45.1%', @@ -327,11 +351,13 @@ export const baseColors = [ 'accent-foreground': '0 0% 98%', background: '20 14.3% 4.1%', border: '240 3.7% 25%', + brand: '213.3 93.9% 67.8%', card: '24 9.8% 10%', 'card-foreground': '0 0% 95%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '0 85.7% 97.3%', foreground: '0 0% 95%', + highlight: '48 96% 53%', input: '240 3.7% 25%', muted: '0 0% 15%', 'muted-foreground': '240 5% 64.9%', @@ -348,11 +374,13 @@ export const baseColors = [ 'accent-foreground': '240 5.9% 10%', background: '0 0% 100%', border: '240 5.9% 90%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '240 10% 3.9%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '0 0% 98%', foreground: '240 10% 3.9%', + highlight: '47.9 95.8% 53.1%', input: '240 5.9% 90%', muted: '240 4.8% 95.9%', 'muted-foreground': '240 3.8% 46.1%', @@ -380,11 +408,13 @@ export const baseColors = [ 'accent-foreground': '60 9.1% 97.8%', background: '20 14.3% 4.1%', border: '12 6.5% 15.1%', + brand: '213.3 93.9% 67.8%', card: '20 14.3% 4.1%', 'card-foreground': '60 9.1% 97.8%', destructive: '0 72.2% 50.6%', 'destructive-foreground': '60 9.1% 97.8%', foreground: '60 9.1% 97.8%', + highlight: '48 96% 53%', input: '12 6.5% 15.1%', muted: '12 6.5% 15.1%', 'muted-foreground': '24 5.4% 63.9%', @@ -401,11 +431,13 @@ export const baseColors = [ 'accent-foreground': '24 9.8% 10%', background: '0 0% 100%', border: '20 5.9% 90%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '20 14.3% 4.1%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '60 9.1% 97.8%', foreground: '20 14.3% 4.1%', + highlight: '47.9 95.8% 53.1%', input: '20 5.9% 90%', muted: '60 4.8% 95.9%', 'muted-foreground': '25 5.3% 44.7%', @@ -433,11 +465,13 @@ export const baseColors = [ 'accent-foreground': '0 0% 98%', background: '20 14.3% 4.1%', border: '240 3.7% 25%', + brand: '213.3 93.9% 67.8%', card: '24 9.8% 10%', 'card-foreground': '0 0% 95%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '0 85.7% 97.3%', foreground: '0 0% 95%', + highlight: '48 96% 53%', input: '240 3.7% 25%', muted: '0 0% 15%', 'muted-foreground': '240 5% 64.9%', @@ -454,11 +488,13 @@ export const baseColors = [ 'accent-foreground': '240 5.9% 10%', background: '0 0% 100%', border: '240 5.9% 90%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '240 10% 3.9%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '0 0% 98%', foreground: '240 10% 3.9%', + highlight: '47.9 95.8% 53.1%', input: '240 5.9% 90%', muted: '240 4.8% 95.9%', 'muted-foreground': '240 3.8% 46.1%', @@ -485,11 +521,13 @@ export const baseColors = [ 'accent-foreground': '210 40% 98%', background: '222.2 84% 4.9%', border: '217.2 32.6% 17.5%', + brand: '213.3 93.9% 67.8%', card: '222.2 84% 4.9%', 'card-foreground': '210 40% 98%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '210 40% 98%', foreground: '210 40% 98%', + highlight: '48 96% 53%', input: '217.2 32.6% 17.5%', muted: '217.2 32.6% 17.5%', 'muted-foreground': '215 20.2% 65.1%', @@ -506,11 +544,13 @@ export const baseColors = [ 'accent-foreground': '222.2 47.4% 11.2%', background: '0 0% 100%', border: '214.3 31.8% 91.4%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '222.2 84% 4.9%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '210 40% 98%', foreground: '222.2 84% 4.9%', + highlight: '47.9 95.8% 53.1%', input: '214.3 31.8% 91.4%', muted: '210 40% 96.1%', 'muted-foreground': '215.4 16.3% 46.9%', @@ -537,11 +577,13 @@ export const baseColors = [ 'accent-foreground': '60 9.1% 97.8%', background: '20 14.3% 4.1%', border: '12 6.5% 15.1%', + brand: '213.3 93.9% 67.8%', card: '20 14.3% 4.1%', 'card-foreground': '60 9.1% 97.8%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '60 9.1% 97.8%', foreground: '60 9.1% 97.8%', + highlight: '48 96% 53%', input: '12 6.5% 15.1%', muted: '12 6.5% 15.1%', 'muted-foreground': '24 5.4% 63.9%', @@ -558,11 +600,13 @@ export const baseColors = [ 'accent-foreground': '24 9.8% 10%', background: '0 0% 100%', border: '20 5.9% 90%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '20 14.3% 4.1%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '60 9.1% 97.8%', foreground: '20 14.3% 4.1%', + highlight: '47.9 95.8% 53.1%', input: '20 5.9% 90%', muted: '60 4.8% 95.9%', 'muted-foreground': '25 5.3% 44.7%', @@ -590,11 +634,13 @@ export const baseColors = [ 'accent-foreground': '210 20% 98%', background: '224 71.4% 4.1%', border: '215 27.9% 16.9%', + brand: '213.3 93.9% 67.8%', card: '224 71.4% 4.1%', 'card-foreground': '210 20% 98%', destructive: '0 62.8% 30.6%', 'destructive-foreground': '210 20% 98%', foreground: '210 20% 98%', + highlight: '48 96% 53%', input: '215 27.9% 16.9%', muted: '215 27.9% 16.9%', 'muted-foreground': '217.9 10.6% 64.9%', @@ -611,11 +657,13 @@ export const baseColors = [ 'accent-foreground': '220.9 39.3% 11%', background: '0 0% 100%', border: '220 13% 91%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '224 71.4% 4.1%', destructive: '0 72.22% 50.59%', 'destructive-foreground': '210 20% 98%', foreground: '224 71.4% 4.1%', + highlight: '47.9 95.8% 53.1%', input: '220 13% 91%', muted: '220 14.3% 95.9%', 'muted-foreground': '220 8.9% 46.1%', diff --git a/apps/www/src/registry/registry-blocks.ts b/apps/www/src/registry/registry-blocks.ts new file mode 100644 index 0000000000..e3bdf247da --- /dev/null +++ b/apps/www/src/registry/registry-blocks.ts @@ -0,0 +1,149 @@ +import type { Registry } from '@/registry/schema'; + +export const blocks: Registry = [ + { + category: 'Editors', + dependencies: [ + '@udecode/plate-common', + '@udecode/plate-ai', + '@udecode/cn', + '@udecode/plate-basic-marks', + '@udecode/plate-block-quote', + '@udecode/plate-code-block', + '@udecode/plate-comments', + '@udecode/plate-date', + '@udecode/plate-dnd', + '@udecode/plate-docx', + '@udecode/plate-emoji', + '@udecode/plate-excalidraw', + '@udecode/plate-font', + '@udecode/plate-heading', + '@udecode/plate-highlight', + '@udecode/plate-horizontal-rule', + '@udecode/plate-indent', + '@udecode/plate-indent-list', + '@udecode/plate-juice', + '@udecode/plate-kbd', + '@udecode/plate-layout', + '@udecode/plate-line-height', + '@udecode/plate-link', + '@udecode/plate-list', + '@udecode/plate-markdown', + '@udecode/plate-media', + '@udecode/plate-mention', + '@udecode/plate-node-id', + '@udecode/plate-reset-node', + '@udecode/plate-select', + '@udecode/plate-selection', + '@udecode/plate-slash-command', + '@udecode/plate-tabbable', + '@udecode/plate-table', + '@udecode/plate-toggle', + '@udecode/plate-trailing-block', + '@udecode/plate-alignment', + '@udecode/plate-autoformat', + '@udecode/plate-break', + '@udecode/plate-caption', + 'react-dnd', + 'react-dnd-html5-backend', + 'prismjs', + ], + files: [ + { + path: 'block/editor-ai/page.tsx', + target: 'app/editor/page.tsx', + type: 'registry:page', + }, + { + path: 'block/editor-ai/components/editor/plate-editor.tsx', + target: 'components/editor/plate-editor.tsx', + type: 'registry:component', + }, + { + path: 'block/editor-ai/components/editor/use-create-editor.tsx', + target: 'components/editor/use-create-editor.tsx', + type: 'registry:component', + }, + ], + name: 'editor-ai', + registryDependencies: [ + 'api-ai', + 'plate-types', + 'ai-plugins', + 'autoformat-plugin', + 'copilot-plugins', + 'ai-menu', + 'ai-leaf', + 'ghost-text', + 'comments-popover', + 'cursor-overlay', + 'editor', + 'fixed-toolbar', + 'fixed-toolbar-buttons', + 'floating-toolbar', + 'floating-toolbar-buttons', + 'block-context-menu', + 'blockquote-element', + 'code-block-element', + 'code-leaf', + 'code-line-element', + 'code-syntax-leaf', + 'column-element', + 'column-group-element', + 'comment-leaf', + 'date-element', + 'draggable', + 'emoji-input-element', + 'excalidraw-element', + 'heading-element', + 'highlight-leaf', + 'hr-element', + 'image-element', + 'image-preview', + 'indent-todo-marker', + 'kbd-leaf', + 'link-element', + 'link-floating-toolbar', + 'list-element', + 'media-embed-element', + 'mention-element', + 'mention-input-element', + 'paragraph-element', + 'placeholder', + 'slash-input-element', + 'table-cell-element', + 'table-element', + 'table-row-element', + 'toc-element', + 'toggle-element', + ], + type: 'registry:block', + }, + { + category: 'Editors', + dependencies: [ + '@udecode/plate-basic-elements', + '@udecode/plate-basic-marks', + ], + files: [ + { + path: 'block/editor-basic/page.tsx', + target: 'app/editor/page.tsx', + type: 'registry:page', + }, + { + path: 'block/editor-basic/components/editor/plate-editor.tsx', + target: 'components/editor/plate-editor.tsx', + type: 'registry:component', + }, + { + path: 'block/editor-basic/components/editor/use-create-editor.tsx', + target: 'components/editor/use-create-editor.tsx', + type: 'registry:component', + }, + ], + name: 'editor-basic', + registryDependencies: ['editor'], + type: 'registry:block', + }, +]; diff --git a/apps/www/src/registry/registry-components.ts b/apps/www/src/registry/registry-components.ts new file mode 100644 index 0000000000..750cc1ca8b --- /dev/null +++ b/apps/www/src/registry/registry-components.ts @@ -0,0 +1,123 @@ +import type { Registry } from '@/registry/schema'; + +const plugins: Registry = [ + { + dependencies: [ + '@udecode/plate-ai', + '@udecode/plate-basic-marks', + '@udecode/plate-block-quote', + '@udecode/plate-code-block', + '@udecode/plate-font', + '@udecode/plate-heading', + '@udecode/plate-horizontal-rule', + '@udecode/plate-indent', + '@udecode/plate-indent-list', + '@udecode/plate-link', + '@udecode/plate-markdown', + '@udecode/plate-selection', + 'prismjs', + ], + files: ['components/editor/plugins/ai-plugins.tsx'], + name: 'ai-plugins', + type: 'registry:component', + }, + { + dependencies: [ + '@udecode/plate-autoformat', + '@udecode/plate-basic-marks', + '@udecode/plate-block-quote', + '@udecode/plate-code-block', + '@udecode/plate-heading', + '@udecode/plate-highlight', + '@udecode/plate-horizontal-rule', + '@udecode/plate-indent-list', + '@udecode/plate-list', + '@udecode/plate-toggle', + ], + files: ['components/editor/plugins/autoformat-plugin.ts'], + name: 'autoformat-plugin', + type: 'registry:component', + }, + { + dependencies: [ + '@udecode/plate-ai', + '@udecode/plate-markdown', + '@faker-js/faker', + ], + files: ['components/editor/plugins/copilot-plugins.tsx'], + name: 'copilot-plugins', + registryDependencies: ['ghost-text'], + type: 'registry:component', + }, +]; + +export const components: Registry = [ + ...plugins, + { + dependencies: ['@udecode/plate-ai', 'ai', '@faker-js/faker'], + files: [ + { + path: 'components/editor/use-chat.tsx', + type: 'registry:component', + }, + ], + name: 'use-chat', + registryDependencies: ['button', 'dialog', 'input', 'command', 'popover'], + type: 'registry:component', + }, + { + dependencies: ['@ai-sdk/openai', 'ai'], + files: [ + { + path: 'components/api/ai/command/route.ts', + target: 'app/api/ai/command/route.ts', + type: 'registry:page', + }, + { + path: 'components/api/ai/copilot/route.ts', + target: 'app/api/ai/copilot/route.ts', + type: 'registry:page', + }, + ], + name: 'api-ai', + registryDependencies: ['use-chat'], + type: 'registry:component', + }, + { + dependencies: [ + '@udecode/plate-callout', + '@udecode/plate-code-block', + '@udecode/plate-date', + '@udecode/plate-heading', + '@udecode/plate-indent-list', + '@udecode/plate-layout', + '@udecode/plate-link', + '@udecode/plate-math', + '@udecode/plate-media', + '@udecode/plate-table', + ], + files: ['components/editor/transforms.ts'], + name: 'transforms', + type: 'registry:component', + }, + { + dependencies: [ + '@udecode/plate-block-quote', + '@udecode/plate-code-block', + '@udecode/plate-comments', + '@udecode/plate-common', + '@udecode/plate-excalidraw', + '@udecode/plate-heading', + '@udecode/plate-horizontal-rule', + '@udecode/plate-link', + '@udecode/plate-list', + '@udecode/plate-media', + '@udecode/plate-mention', + '@udecode/plate-table', + '@udecode/plate-toggle', + ], + files: ['components/editor/plate-types.ts'], + name: 'plate-types', + type: 'registry:component', + }, +]; diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts index b65a4b4c21..2231ea3485 100644 --- a/apps/www/src/registry/registry-examples.ts +++ b/apps/www/src/registry/registry-examples.ts @@ -752,10 +752,10 @@ export const examples: Registry = [ registryDependencies: [], type: 'registry:example', }, - { - external: true, - files: ['lib/plate-types.ts'], - name: 'plate-types', - type: 'registry:lib', - }, + // { + // external: true, + // files: ['lib/plate-types.ts'], + // name: 'plate-types', + // type: 'registry:lib', + // }, ]; diff --git a/apps/www/src/registry/registry-lib.ts b/apps/www/src/registry/registry-lib.ts index 8e67e70e73..3eac18913d 100644 --- a/apps/www/src/registry/registry-lib.ts +++ b/apps/www/src/registry/registry-lib.ts @@ -12,24 +12,4 @@ export const lib: Registry = [ name: 'utils', type: 'registry:lib', }, - { - dependencies: [ - '@udecode/plate-code-block', - '@udecode/plate-date', - '@udecode/plate-heading', - '@udecode/plate-indent-list', - '@udecode/plate-layout', - '@udecode/plate-math', - '@udecode/plate-media', - '@udecode/plate-table', - ], - files: [ - { - path: 'lib/transforms.ts', - type: 'registry:lib', - }, - ], - name: 'transforms', - type: 'registry:lib', - }, ]; diff --git a/apps/www/src/registry/registry-themes.ts b/apps/www/src/registry/registry-themes.ts index 5ebfa00d4a..4c62cbd233 100644 --- a/apps/www/src/registry/registry-themes.ts +++ b/apps/www/src/registry/registry-themes.ts @@ -8,6 +8,7 @@ export const themes: Registry = [ 'accent-foreground': '36 72% 17%', background: '36 39% 88%', border: '36 45% 60%', + brand: '213.3 93.9% 67.8%', card: '36 46% 82%', 'card-foreground': '36 45% 20%', 'chart-1': '25 34% 28%', @@ -18,6 +19,7 @@ export const themes: Registry = [ destructive: '0 84% 37%', 'destructive-foreground': '0 0% 98%', foreground: '36 45% 15%', + highlight: '48 96% 53%', input: '36 45% 60%', muted: '36 33% 75%', 'muted-foreground': '36 45% 25%', @@ -34,6 +36,7 @@ export const themes: Registry = [ 'accent-foreground': '36 72% 17%', background: '36 39% 88%', border: '36 45% 60%', + brand: '217.2 91.2% 59.8%', card: '36 46% 82%', 'card-foreground': '36 45% 20%', 'chart-1': '25 34% 28%', @@ -44,6 +47,7 @@ export const themes: Registry = [ destructive: '0 84% 37%', 'destructive-foreground': '0 0% 98%', foreground: '36 45% 15%', + highlight: '47.9 95.8% 53.1%', input: '36 45% 60%', muted: '36 33% 75%', 'muted-foreground': '36 45% 25%', @@ -66,6 +70,7 @@ export const themes: Registry = [ 'accent-foreground': '60 0% 100%', background: '240 5% 6%', border: '240 6% 20%', + brand: '213.3 93.9% 67.8%', card: '240 4% 10%', 'card-foreground': '60 5% 90%', 'chart-1': '359 2% 90%', @@ -76,6 +81,7 @@ export const themes: Registry = [ destructive: '0 60% 50%', 'destructive-foreground': '0 0% 98%', foreground: '60 5% 90%', + highlight: '48 96% 53%', input: '240 6% 20%', muted: '240 5% 25%', 'muted-foreground': '60 5% 85%', @@ -92,6 +98,7 @@ export const themes: Registry = [ 'accent-foreground': '60 0% 100%', background: '240 5% 6%', border: '240 6% 20%', + brand: '217.2 91.2% 59.8%', card: '240 4% 10%', 'card-foreground': '60 5% 90%', 'chart-1': '359 2% 90%', @@ -102,6 +109,7 @@ export const themes: Registry = [ destructive: '0 60% 50%', 'destructive-foreground': '0 0% 98%', foreground: '60 5% 90%', + highlight: '47.9 95.8% 53.1%', input: '240 6% 20%', muted: '240 5% 25%', 'muted-foreground': '60 5% 85%', @@ -124,6 +132,7 @@ export const themes: Registry = [ 'accent-foreground': '0 0% 98%', background: '240 10% 3.9%', border: '240 3.7% 15.9%', + brand: '213.3 93.9% 67.8%', card: '240 10% 3.9%', 'card-foreground': '0 0% 98%', 'chart-1': '142 88% 28%', @@ -134,6 +143,7 @@ export const themes: Registry = [ destructive: '0 72% 51%', 'destructive-foreground': '0 0% 98%', foreground: '0 0% 98%', + highlight: '48 96% 53%', input: '240 3.7% 15.9%', muted: '240 3.7% 15.9%', 'muted-foreground': '240 5% 64.9%', @@ -150,6 +160,7 @@ export const themes: Registry = [ 'accent-foreground': '240 5.9% 10%', background: '0 0% 100%', border: '240 5.9% 90%', + brand: '217.2 91.2% 59.8%', card: '0 0% 100%', 'card-foreground': '240 10% 3.9%', 'chart-1': '139 65% 20%', @@ -160,6 +171,7 @@ export const themes: Registry = [ destructive: '0 72% 51%', 'destructive-foreground': '0 0% 98%', foreground: '240 10% 3.9%', + highlight: '47.9 95.8% 53.1%', input: '240 5.9% 90%', muted: '240 4.8% 95.9%', 'muted-foreground': '240 3.8% 45%', diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts index 6f4601d62d..e0954f22ee 100644 --- a/apps/www/src/registry/registry-ui.ts +++ b/apps/www/src/registry/registry-ui.ts @@ -30,7 +30,7 @@ export const uiComponents: Registry = [ 'plate-ui/ai-chat-editor.tsx', ], name: 'ai-menu', - registryDependencies: ['command', 'popover', 'editor'], + registryDependencies: ['use-chat', 'command', 'popover', 'editor'], type: 'registry:ui', }, { @@ -85,7 +85,7 @@ export const uiComponents: Registry = [ }, files: ['plate-ui/block-context-menu.tsx'], name: 'block-context-menu', - registryDependencies: ['calendar', 'plate-element'], + registryDependencies: ['calendar', 'plate-element', 'context-menu'], type: 'registry:ui', }, { @@ -199,7 +199,11 @@ export const uiComponents: Registry = [ type: 'registry:ui', }, { - dependencies: [], + dependencies: [ + '@udecode/plate-cursor', + '@udecode/plate-dnd', + '@udecode/plate-selection', + ], doc: { description: 'A visual overlay for collaborative cursors and selections.', docs: [ @@ -1049,6 +1053,23 @@ export const uiNodes: Registry = [ ], type: 'registry:ui', }, + { + dependencies: ['@udecode/plate-media'], + doc: { + description: 'A modal component for previewing and manipulating images.', + docs: [ + { route: '/docs/media' }, + { + route: siteConfig.links.plateProComponent('image-preview'), + }, + ], + examples: ['media-demo', 'media-toolbar-pro'], + }, + files: ['plate-ui/image-preview.tsx'], + name: 'image-preview', + registryDependencies: [], + type: 'registry:ui', + }, { dependencies: ['@udecode/plate-kbd'], doc: { @@ -1357,6 +1378,20 @@ export const uiPrimitives: Registry = [ registryDependencies: ['dialog', 'input'], type: 'registry:ui', }, + { + dependencies: ['@radix-ui/react-context-menu'], + doc: { + description: + 'Displays a menu to the user — such as a set of actions or functions — triggered by a button.', + links: { + doc: 'https://ui.shadcn.com/docs/components/context-menu', + }, + }, + files: ['plate-ui/context-menu.tsx'], + name: 'context-menu', + registryDependencies: [], + type: 'registry:ui', + }, { dependencies: ['@radix-ui/react-dialog'], doc: { diff --git a/apps/www/src/registry/registry.ts b/apps/www/src/registry/registry.ts index d58d2f1535..b5f0527253 100644 --- a/apps/www/src/registry/registry.ts +++ b/apps/www/src/registry/registry.ts @@ -1,5 +1,7 @@ import type { Registry } from './schema'; +import { blocks } from './registry-blocks'; +import { components } from './registry-components'; import { examples } from './registry-examples'; import { hooks } from './registry-hooks'; import { lib } from './registry-lib'; @@ -8,7 +10,9 @@ import { ui } from './registry-ui'; export const registry: Registry = [ ...ui, + ...components, ...examples, + ...blocks, ...lib, ...hooks, ...themes, diff --git a/apps/www/src/registry/schema.ts b/apps/www/src/registry/schema.ts index 4e5e49dfa5..60f78fd26a 100644 --- a/apps/www/src/registry/schema.ts +++ b/apps/www/src/registry/schema.ts @@ -9,6 +9,7 @@ export const blockChunkSchema = z.object({ }) .optional(), description: z.string(), + descriptionSrc: z.string().optional(), file: z.string(), name: z.string(), }); diff --git a/config/eslint/bases/unicorn.cjs b/config/eslint/bases/unicorn.cjs index eec1ea3ffb..234fbb631e 100644 --- a/config/eslint/bases/unicorn.cjs +++ b/config/eslint/bases/unicorn.cjs @@ -29,6 +29,7 @@ module.exports = { 'unicorn/no-for-loop': 'off', 'unicorn/no-null': 'off', 'unicorn/no-thenable': 'off', + 'unicorn/prefer-export-from': 'off', 'unicorn/prefer-module': 'off', 'unicorn/prefer-optional-catch-binding': 'off', 'unicorn/prefer-regexp-test': 'off', diff --git a/package.json b/package.json index 32aa5d70f5..a6c50e62fc 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,10 @@ "build:templates": "turbo --filter \"./templates/**\" build", "build:watch": "ROARR_LOG=true turbowatch ./config/turbowatch.config.ts | roarr", "check:install": "yarn dlx @yarnpkg/doctor@4.0.0-rc.10 --configFileName config/.ncurc.yml packages", + "cli:full": "yarn cli:plate && yarn cli:editor-ai", "deps:check": "npx npm-check-updates@latest --configFileName config/ncurc.yml --workspaces --root --mergeConfig", "deps:update": "npx npm-check-updates@latest --configFileName config/ncurc.yml -u --workspaces --root --mergeConfig", "dev": "turbo --filter=www dev", - "dev:cli": "yarn workspace shadcx dev", "devt": "yarn workspace www devt", "docs:build": "cd docs && yarn && yarn build", "docs:start": "cd docs && yarn && yarn start", @@ -62,13 +62,13 @@ "p:tsup": "cd $INIT_CWD && tsup --config=${PROJECT_CWD}/config/tsup.config.ts", "p:typecheck": "cd $INIT_CWD && tsc -p $INIT_CWD/tsconfig.json", "release": "yarn build && yarn changeset publish", + "sync:plate": "node templates/plate-playground-template/scripts/sync-plate.cjs", "sync:templates": "./scripts/sync-templates.sh \"templates/*\"", "test": "yarn g:test", "test:wa": "yarn g:test:wa", "test:watch": "yarn g:test:watch", "typecheck": "yarn g:typecheck", - "typecheck:all": "yarn g:typecheck:all", - "sync:plate": "node templates/plate-playground-template/scripts/sync-plate.cjs" + "typecheck:all": "yarn g:typecheck:all" }, "resolutions": { "eslint-plugin-import": "2.27.5", @@ -128,7 +128,7 @@ "eslint-plugin-react": "^7.36.1", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-regexp": "^2.6.0", - "eslint-plugin-tailwindcss": "^3.17.4", + "eslint-plugin-tailwindcss": "^3.17.5", "eslint-plugin-testing-library": "^6.3.0", "eslint-plugin-unicorn": "^55.0.0", "eslint-plugin-unused-imports": "^4.1.3", diff --git a/packages/cli/.gitignore b/packages/cli/.gitignore new file mode 100644 index 0000000000..44f8b4494b --- /dev/null +++ b/packages/cli/.gitignore @@ -0,0 +1,2 @@ +apps +components \ No newline at end of file diff --git a/packages/cli/package.json b/packages/cli/package.json index 32de3b13df..1d651a0151 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "shadcx", - "version": "0.0.3", + "version": "0.0.6", "description": "Add Plate components to your apps.", "keywords": [ "components", diff --git a/packages/cli/src/commands/add.d.ts b/packages/cli/src/commands/add.d.ts new file mode 100644 index 0000000000..995e286b75 --- /dev/null +++ b/packages/cli/src/commands/add.d.ts @@ -0,0 +1,38 @@ +import { Command } from 'commander'; +import { z } from 'zod'; +export declare const addOptionsSchema: z.ZodObject<{ + all: z.ZodBoolean; + components: z.ZodOptional>; + cwd: z.ZodString; + list: z.ZodOptional; + overwrite: z.ZodBoolean; + path: z.ZodOptional; + registry: z.ZodOptional; + silent: z.ZodBoolean; + srcDir: z.ZodOptional; + yes: z.ZodBoolean; +}, "strip", z.ZodTypeAny, { + cwd: string; + silent: boolean; + yes: boolean; + overwrite: boolean; + all: boolean; + components?: string[] | undefined; + path?: string | undefined; + srcDir?: boolean | undefined; + list?: boolean | undefined; + registry?: string | undefined; +}, { + cwd: string; + silent: boolean; + yes: boolean; + overwrite: boolean; + all: boolean; + components?: string[] | undefined; + path?: string | undefined; + srcDir?: boolean | undefined; + list?: boolean | undefined; + registry?: string | undefined; +}>; +export declare const add: Command; +//# sourceMappingURL=add.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/commands/add.d.ts.map b/packages/cli/src/commands/add.d.ts.map new file mode 100644 index 0000000000..e76716e4b9 --- /dev/null +++ b/packages/cli/src/commands/add.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["add.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAexB,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAW3B,CAAC;AAEH,eAAO,MAAM,GAAG,SA8LZ,CAAC"} \ No newline at end of file diff --git a/packages/cli/src/commands/add.js b/packages/cli/src/commands/add.js new file mode 100644 index 0000000000..6d21b49b3c --- /dev/null +++ b/packages/cli/src/commands/add.js @@ -0,0 +1,390 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.add = exports.addOptionsSchema = void 0; +var commander_1 = require("commander"); +var deepmerge_1 = __importDefault(require("deepmerge")); +var path_1 = __importDefault(require("path")); +var prompts_1 = __importDefault(require("prompts")); +var zod_1 = require("zod"); +var init_1 = require("@/src/commands/init"); +var preflight_add_1 = require("@/src/preflights/preflight-add"); +var add_components_1 = require("@/src/utils/add-components"); +var create_project_1 = require("@/src/utils/create-project"); +var ERRORS = __importStar(require("@/src/utils/errors")); +var handle_error_1 = require("@/src/utils/handle-error"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var registry_1 = require("@/src/utils/registry"); +var update_app_index_1 = require("@/src/utils/update-app-index"); +var get_config_1 = require("../utils/get-config"); +exports.addOptionsSchema = zod_1.z.object({ + all: zod_1.z.boolean(), + components: zod_1.z.array(zod_1.z.string()).optional(), + cwd: zod_1.z.string(), + list: zod_1.z.boolean().optional(), + overwrite: zod_1.z.boolean(), + path: zod_1.z.string().optional(), + registry: zod_1.z.string().optional(), + silent: zod_1.z.boolean(), + srcDir: zod_1.z.boolean().optional(), + yes: zod_1.z.boolean(), +}); +exports.add = new commander_1.Command() + .name('add') + .description('add a component to your project') + .argument('[components...]', 'the components to add or a url to the component. Use prefix (eg. plate/editor) to specify registry') + .option('-y, --yes', 'skip confirmation prompt.', false) + .option('-o, --overwrite', 'overwrite existing files.', false) + .option('-c, --cwd ', 'the working directory. defaults to the current directory.', process.cwd()) + .option('-a, --all', 'add all available components', false) + .option('-p, --path ', 'the path to add the component to.') + .option('-s, --silent', 'mute output.', false) + .option('--src-dir', 'use the src directory when creating a new project.', false) + .option('-r, --registry ', 'registry name or url') + .option('-l, --list', 'list all available registries', false) + .action(function (components, opts) { return __awaiter(void 0, void 0, void 0, function () { + var registry_2, prefixedComponents, options, isTheme, confirm_1, _a, config, errors, proceed, url, res, registryConfig, _b, shouldUpdateAppIndex, projectPath, url, error_1; + var _c, _d, _e, _f, _g; + return __generator(this, function (_h) { + switch (_h.label) { + case 0: + _h.trys.push([0, 17, , 18]); + registry_2 = opts.registry; + prefixedComponents = components.map(function (component) { + var _a = component.split('/'), prefix = _a[0], name = _a[1]; + if (name && registry_1.REGISTRY_MAP[prefix]) { + registry_2 = prefix; + return name; + } + return component; + }); + options = exports.addOptionsSchema.parse(__assign({ components: prefixedComponents, cwd: path_1.default.resolve(opts.cwd), registry: registry_2 }, opts)); + isTheme = (_c = options.components) === null || _c === void 0 ? void 0 : _c.some(function (component) { + return component.includes('theme-'); + }); + if (!(!options.yes && isTheme)) return [3 /*break*/, 2]; + logger_1.logger.break(); + return [4 /*yield*/, (0, prompts_1.default)({ + message: highlighter_1.highlighter.warn('You are about to install a new theme. \nExisting CSS variables will be overwritten. Continue?'), + name: 'confirm', + type: 'confirm', + })]; + case 1: + confirm_1 = (_h.sent()).confirm; + if (!confirm_1) { + logger_1.logger.break(); + logger_1.logger.log('Theme installation cancelled.'); + logger_1.logger.break(); + process.exit(1); + } + _h.label = 2; + case 2: return [4 /*yield*/, (0, preflight_add_1.preFlightAdd)(options)]; + case 3: + _a = _h.sent(), config = _a.config, errors = _a.errors; + if (!(!config || + errors[ERRORS.MISSING_CONFIG] || + errors[ERRORS.MISSING_REGISTRY])) return [3 /*break*/, 7]; + return [4 /*yield*/, (0, prompts_1.default)({ + initial: true, + message: errors[ERRORS.MISSING_REGISTRY] + ? "You need to add ".concat(highlighter_1.highlighter.info("".concat(options.registry)), " registry to your config. Proceed?") + : "You need to create a ".concat(highlighter_1.highlighter.info('components.json'), " file to add components. Proceed?"), + name: 'proceed', + type: 'confirm', + })]; + case 4: + proceed = (_h.sent()).proceed; + if (!proceed) { + logger_1.logger.break(); + process.exit(1); + } + url = options.registry; + if (url) { + url = (_d = registry_1.REGISTRY_MAP[url]) !== null && _d !== void 0 ? _d : url; + } + return [4 /*yield*/, (0, init_1.runInit)({ + cwd: options.cwd, + defaults: false, + force: true, + isNewProject: false, + name: options.registry, + silent: true, + skipPreflight: false, + srcDir: options.srcDir, + url: url, + yes: true, + })]; + case 5: + config = _h.sent(); + options.cwd = config.resolvedPaths.cwd; + return [4 /*yield*/, (0, preflight_add_1.preFlightAdd)(options)]; + case 6: + res = _h.sent(); + // config = res.config!; + errors = res.errors; + _h.label = 7; + case 7: return [4 /*yield*/, getRegistryConfig(config, options)]; + case 8: + registryConfig = _h.sent(); + if (!!((_e = options.components) === null || _e === void 0 ? void 0 : _e.length)) return [3 /*break*/, 10]; + _b = options; + return [4 /*yield*/, promptForRegistryComponents(options, registryConfig.url)]; + case 9: + _b.components = _h.sent(); + _h.label = 10; + case 10: + shouldUpdateAppIndex = false; + if (!errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) return [3 /*break*/, 13]; + return [4 /*yield*/, (0, create_project_1.createProject)({ + cwd: options.cwd, + force: options.overwrite, + srcDir: options.srcDir, + })]; + case 11: + projectPath = (_h.sent()).projectPath; + if (!projectPath) { + logger_1.logger.break(); + process.exit(1); + } + options.cwd = projectPath; + url = options.registry; + if (url) { + url = (_f = registry_1.REGISTRY_MAP[url]) !== null && _f !== void 0 ? _f : url; + } + return [4 /*yield*/, (0, init_1.runInit)({ + cwd: options.cwd, + defaults: false, + force: true, + isNewProject: true, + name: options.registry, + silent: true, + skipPreflight: true, + srcDir: options.srcDir, + url: url, + yes: true, + })]; + case 12: + config = _h.sent(); + options.cwd = config.resolvedPaths.cwd; + shouldUpdateAppIndex = + ((_g = options.components) === null || _g === void 0 ? void 0 : _g.length) === 1 && + !!/\/chat\/b\//.exec(options.components[0]); + _h.label = 13; + case 13: + if (!config) { + throw new Error("Failed to read config at ".concat(highlighter_1.highlighter.info(options.cwd), ".")); + } + return [4 /*yield*/, (0, add_components_1.addComponents)(options.components, registryConfig, options)]; + case 14: + _h.sent(); + if (!shouldUpdateAppIndex) return [3 /*break*/, 16]; + return [4 /*yield*/, (0, update_app_index_1.updateAppIndex)(options.components[0], config)]; + case 15: + _h.sent(); + _h.label = 16; + case 16: return [3 /*break*/, 18]; + case 17: + error_1 = _h.sent(); + logger_1.logger.break(); + (0, handle_error_1.handleError)(error_1); + return [3 /*break*/, 18]; + case 18: return [2 /*return*/]; + } + }); +}); }); +function getRegistryConfig(config, opts) { + return __awaiter(this, void 0, void 0, function () { + var registry, selectedRegistry, _a, registryConfig; + var _b, _c; + return __generator(this, function (_d) { + switch (_d.label) { + case 0: + registry = opts.registry; + if (!(opts.list && + config.registries && + Object.keys(config.registries).length > 0)) return [3 /*break*/, 5]; + return [4 /*yield*/, (0, prompts_1.default)({ + choices: __spreadArray([ + { title: 'default', value: 'default' } + ], Object.entries(config.registries).map(function (_a) { + var name = _a[0]; + return ({ + title: name, + value: name, + }); + }), true), + message: 'Select a registry:', + name: 'selectedRegistry', + type: 'select', + })]; + case 1: + selectedRegistry = (_d.sent()).selectedRegistry; + if (!(selectedRegistry === 'default')) return [3 /*break*/, 2]; + _a = __assign({}, config); + return [3 /*break*/, 4]; + case 2: return [4 /*yield*/, (0, get_config_1.resolveConfigPaths)(opts.cwd, (0, deepmerge_1.default)(config, config.registries[selectedRegistry]))]; + case 3: + _a = _d.sent(); + _d.label = 4; + case 4: return [2 /*return*/, _a]; + case 5: + if (!registry) return [3 /*break*/, 11]; + if (!(registry.startsWith('http://') || registry.startsWith('https://'))) return [3 /*break*/, 8]; + if (!config.registries) return [3 /*break*/, 7]; + registryConfig = (_b = Object.values(config.registries)) === null || _b === void 0 ? void 0 : _b.find(function (reg) { return reg.url === registry; }); + if (!registryConfig) return [3 /*break*/, 7]; + return [4 /*yield*/, (0, get_config_1.resolveConfigPaths)(opts.cwd, (0, deepmerge_1.default)(config, registryConfig))]; + case 6: return [2 /*return*/, _d.sent()]; + case 7: return [2 /*return*/, __assign(__assign({}, config), { url: registry })]; + case 8: + if (!((_c = config.registries) === null || _c === void 0 ? void 0 : _c[registry])) return [3 /*break*/, 10]; + return [4 /*yield*/, (0, get_config_1.resolveConfigPaths)(opts.cwd, (0, deepmerge_1.default)(config, config.registries[registry]))]; + case 9: return [2 /*return*/, _d.sent()]; + case 10: + // If it's neither a URL nor a known registry name, warn the user and fallback to the default config + logger_1.logger.warn("Registry \"".concat(registry, "\" not found in configuration. Using the default registry.")); + return [2 /*return*/, __assign({}, config)]; + case 11: + // If no registry is specified and no registries in config, use the default config + return [2 /*return*/, __assign({}, config)]; + } + }); + }); +} +function promptForRegistryComponents(options, registryUrl) { + return __awaiter(this, void 0, void 0, function () { + var registryIndex, components, result; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: return [4 /*yield*/, (0, registry_1.getRegistryIndex)(registryUrl)]; + case 1: + registryIndex = _b.sent(); + if (!registryIndex) { + logger_1.logger.break(); + (0, handle_error_1.handleError)(new Error('Failed to fetch registry index.')); + return [2 /*return*/, []]; + } + if (options.all) { + return [2 /*return*/, registryIndex.map(function (entry) { return entry.name; })]; + } + if ((_a = options.components) === null || _a === void 0 ? void 0 : _a.length) { + return [2 /*return*/, options.components]; + } + return [4 /*yield*/, (0, prompts_1.default)({ + choices: registryIndex + .filter(function (entry) { return entry.type === 'registry:ui'; }) + .map(function (entry) { + var _a; + return ({ + selected: options.all ? true : (_a = options.components) === null || _a === void 0 ? void 0 : _a.includes(entry.name), + title: entry.name, + value: entry.name, + }); + }), + hint: 'Space to select. A to toggle all. Enter to submit.', + instructions: false, + message: 'Which components would you like to add?', + name: 'components', + type: 'multiselect', + })]; + case 2: + components = (_b.sent()).components; + if (!(components === null || components === void 0 ? void 0 : components.length)) { + logger_1.logger.warn('No components selected. Exiting.'); + logger_1.logger.info(''); + process.exit(1); + } + result = zod_1.z.array(zod_1.z.string()).safeParse(components); + if (!result.success) { + logger_1.logger.error(''); + (0, handle_error_1.handleError)(new Error('Something went wrong. Please try again.')); + return [2 /*return*/, []]; + } + return [2 /*return*/, result.data]; + } + }); + }); +} diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts index b55aa61fb8..1acd589785 100644 --- a/packages/cli/src/commands/add.ts +++ b/packages/cli/src/commands/add.ts @@ -12,7 +12,7 @@ import * as ERRORS from '@/src/utils/errors'; import { handleError } from '@/src/utils/handle-error'; import { highlighter } from '@/src/utils/highlighter'; import { logger } from '@/src/utils/logger'; -import { getRegistryIndex } from '@/src/utils/registry'; +import { REGISTRY_MAP, getRegistryIndex } from '@/src/utils/registry'; import { updateAppIndex } from '@/src/utils/update-app-index'; import { type Config, resolveConfigPaths } from '../utils/get-config'; @@ -35,7 +35,7 @@ export const add = new Command() .description('add a component to your project') .argument( '[components...]', - 'the components to add or a url to the component.' + 'the components to add or a url to the component. Use prefix (eg. plate/editor) to specify registry' ) .option('-y, --yes', 'skip confirmation prompt.', false) .option('-o, --overwrite', 'overwrite existing files.', false) @@ -56,11 +56,27 @@ export const add = new Command() .option('-l, --list', 'list all available registries', false) .action(async (components, opts) => { try { + // DIFF START + let registry = opts.registry; + const prefixedComponents = components.map((component: any) => { + const [prefix, name] = component.split('/'); + + if (name && REGISTRY_MAP[prefix as keyof typeof REGISTRY_MAP]) { + registry = prefix; + + return name; + } + + return component; + }); + const options = addOptionsSchema.parse({ - components, + components: prefixedComponents, cwd: path.resolve(opts.cwd), + registry, ...opts, }); + // DIFF END // Confirm if user is installing themes. // For now, we assume a theme is prefixed with "theme-". @@ -90,12 +106,20 @@ export const add = new Command() let { config, errors } = await preFlightAdd(options); // No components.json file. Prompt the user to run init. - if (errors[ERRORS.MISSING_CONFIG]) { + if ( + !config || + errors[ERRORS.MISSING_CONFIG] || + errors[ERRORS.MISSING_REGISTRY] + ) { const { proceed } = await prompts({ initial: true, - message: `You need to create a ${highlighter.info( - 'components.json' - )} file to add components. Proceed?`, + message: errors[ERRORS.MISSING_REGISTRY] + ? `You need to add ${highlighter.info( + `${options.registry}` + )} registry to your config. Proceed?` + : `You need to create a ${highlighter.info( + 'components.json' + )} file to add components. Proceed?`, name: 'proceed', type: 'confirm', }); @@ -105,20 +129,32 @@ export const add = new Command() process.exit(1); } + let url = options.registry; + + if (url) { + url = REGISTRY_MAP[url as keyof typeof REGISTRY_MAP] ?? url; + } + config = await runInit({ cwd: options.cwd, defaults: false, force: true, isNewProject: false, + name: options.registry, silent: true, skipPreflight: false, srcDir: options.srcDir, - url: options.registry, + url, yes: true, }); + + options.cwd = config.resolvedPaths.cwd; + const res = await preFlightAdd(options); + // config = res.config!; + errors = res.errors!; } - const registryConfig = await getRegistryConfig(config as any, options); + const registryConfig = await getRegistryConfig(config, options); if (!options.components?.length) { options.components = await promptForRegistryComponents( @@ -143,17 +179,25 @@ export const add = new Command() options.cwd = projectPath; + let url = options.registry; + + if (url) { + url = REGISTRY_MAP[url as keyof typeof REGISTRY_MAP] ?? url; + } + config = await runInit({ cwd: options.cwd, defaults: false, force: true, isNewProject: true, + name: options.registry, silent: true, skipPreflight: true, srcDir: options.srcDir, - url: options.registry, + url, yes: true, }); + options.cwd = config.resolvedPaths.cwd; shouldUpdateAppIndex = options.components?.length === 1 && @@ -212,8 +256,10 @@ async function getRegistryConfig( // If a registry is specified if (registry) { // If it's a URL, use it directly + if (registry.startsWith('http://') || registry.startsWith('https://')) { // Find registry by url + if (config.registries) { const registryConfig = Object.values(config.registries)?.find( (reg) => reg.url === registry diff --git a/packages/cli/src/commands/diff.d.ts b/packages/cli/src/commands/diff.d.ts new file mode 100644 index 0000000000..577d4d5172 --- /dev/null +++ b/packages/cli/src/commands/diff.d.ts @@ -0,0 +1,3 @@ +import { Command } from "commander"; +export declare const diff: Command; +//# sourceMappingURL=diff.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/commands/diff.d.ts.map b/packages/cli/src/commands/diff.d.ts.map new file mode 100644 index 0000000000..93db1f3eed --- /dev/null +++ b/packages/cli/src/commands/diff.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["diff.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAYnC,eAAO,MAAM,IAAI,SAwHb,CAAA"} \ No newline at end of file diff --git a/packages/cli/src/commands/diff.js b/packages/cli/src/commands/diff.js new file mode 100644 index 0000000000..ae1e381149 --- /dev/null +++ b/packages/cli/src/commands/diff.js @@ -0,0 +1,277 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.diff = void 0; +var fs_1 = require("fs"); +var path_1 = __importDefault(require("path")); +var get_config_1 = require("@/src/utils/get-config"); +var handle_error_1 = require("@/src/utils/handle-error"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var registry_1 = require("@/src/utils/registry"); +var transformers_1 = require("@/src/utils/transformers"); +var commander_1 = require("commander"); +var diff_1 = require("diff"); +var zod_1 = require("zod"); +var updateOptionsSchema = zod_1.z.object({ + component: zod_1.z.string().optional(), + yes: zod_1.z.boolean(), + cwd: zod_1.z.string(), + path: zod_1.z.string().optional(), + registry: zod_1.z.string().optional(), +}); +exports.diff = new commander_1.Command() + .name("diff") + .description("check for updates against the registry") + .argument("[component]", "the component name") + .option("-y, --yes", "skip confirmation prompt.", false) + .option("-c, --cwd ", "the working directory. defaults to the current directory.", process.cwd()) + .option("--registry ", "custom registry URL") + .action(function (name, opts) { return __awaiter(void 0, void 0, void 0, function () { + var options_1, cwd, config, registryIndex, targetDir_1, projectComponents, componentsWithUpdates, _i, projectComponents_1, component_1, changes_2, _a, componentsWithUpdates_1, component_2, _b, _c, change, component, changes, _d, changes_1, change, error_1; + return __generator(this, function (_e) { + switch (_e.label) { + case 0: + _e.trys.push([0, 13, , 14]); + options_1 = updateOptionsSchema.parse(__assign({ component: name }, opts)); + cwd = path_1.default.resolve(options_1.cwd); + if (!(0, fs_1.existsSync)(cwd)) { + logger_1.logger.error("The path ".concat(cwd, " does not exist. Please try again.")); + process.exit(1); + } + return [4 /*yield*/, (0, get_config_1.getConfig)(cwd)]; + case 1: + config = _e.sent(); + if (!config) { + logger_1.logger.warn("Configuration is missing. Please run ".concat(highlighter_1.highlighter.success("init"), " to create a components.json file.")); + process.exit(1); + } + return [4 /*yield*/, (0, registry_1.getRegistryIndex)(options_1.registry)]; + case 2: + registryIndex = _e.sent(); + if (!registryIndex) { + (0, handle_error_1.handleError)(new Error("Failed to fetch registry index.")); + process.exit(1); + } + if (!!options_1.component) return [3 /*break*/, 7]; + targetDir_1 = config.resolvedPaths.components; + projectComponents = registryIndex.filter(function (item) { + var _a; + for (var _i = 0, _b = (_a = item.files) !== null && _a !== void 0 ? _a : []; _i < _b.length; _i++) { + var file = _b[_i]; + var filePath = path_1.default.resolve(targetDir_1, typeof file === "string" ? file : file.path); + if ((0, fs_1.existsSync)(filePath)) { + return true; + } + } + return false; + }); + componentsWithUpdates = []; + _i = 0, projectComponents_1 = projectComponents; + _e.label = 3; + case 3: + if (!(_i < projectComponents_1.length)) return [3 /*break*/, 6]; + component_1 = projectComponents_1[_i]; + return [4 /*yield*/, diffComponent(component_1, config)]; + case 4: + changes_2 = _e.sent(); + if (changes_2.length) { + componentsWithUpdates.push({ + name: component_1.name, + changes: changes_2, + }); + } + _e.label = 5; + case 5: + _i++; + return [3 /*break*/, 3]; + case 6: + if (!componentsWithUpdates.length) { + logger_1.logger.info("No updates found."); + process.exit(0); + } + logger_1.logger.info("The following components have updates available:"); + for (_a = 0, componentsWithUpdates_1 = componentsWithUpdates; _a < componentsWithUpdates_1.length; _a++) { + component_2 = componentsWithUpdates_1[_a]; + logger_1.logger.info("- ".concat(component_2.name)); + for (_b = 0, _c = component_2.changes; _b < _c.length; _b++) { + change = _c[_b]; + logger_1.logger.info(" - ".concat(change.filePath)); + } + } + logger_1.logger.break(); + logger_1.logger.info("Run ".concat(highlighter_1.highlighter.success("diff "), " to see the changes.")); + process.exit(0); + _e.label = 7; + case 7: + component = registryIndex.find(function (item) { return item.name === options_1.component; }); + if (!component) { + logger_1.logger.error("The component ".concat(highlighter_1.highlighter.success(options_1.component), " does not exist.")); + process.exit(1); + } + return [4 /*yield*/, diffComponent(component, config)]; + case 8: + changes = _e.sent(); + if (!changes.length) { + logger_1.logger.info("No updates found for ".concat(options_1.component, ".")); + process.exit(0); + } + _d = 0, changes_1 = changes; + _e.label = 9; + case 9: + if (!(_d < changes_1.length)) return [3 /*break*/, 12]; + change = changes_1[_d]; + logger_1.logger.info("- ".concat(change.filePath)); + return [4 /*yield*/, printDiff(change.patch)]; + case 10: + _e.sent(); + logger_1.logger.info(""); + _e.label = 11; + case 11: + _d++; + return [3 /*break*/, 9]; + case 12: return [3 /*break*/, 14]; + case 13: + error_1 = _e.sent(); + (0, handle_error_1.handleError)(error_1); + return [3 /*break*/, 14]; + case 14: return [2 /*return*/]; + } + }); +}); }); +function diffComponent(component, config) { + return __awaiter(this, void 0, void 0, function () { + var payload, baseColor, changes, _i, payload_1, item, targetDir, _a, _b, file, filePath, fileContent, registryContent, patch; + var _c; + return __generator(this, function (_d) { + switch (_d.label) { + case 0: return [4 /*yield*/, (0, registry_1.fetchTree)(config.style, [component])]; + case 1: + payload = _d.sent(); + return [4 /*yield*/, (0, registry_1.getRegistryBaseColor)(config.tailwind.baseColor)]; + case 2: + baseColor = _d.sent(); + if (!payload) { + return [2 /*return*/, []]; + } + changes = []; + _i = 0, payload_1 = payload; + _d.label = 3; + case 3: + if (!(_i < payload_1.length)) return [3 /*break*/, 10]; + item = payload_1[_i]; + return [4 /*yield*/, (0, registry_1.getItemTargetPath)(config, item)]; + case 4: + targetDir = _d.sent(); + if (!targetDir) { + return [3 /*break*/, 9]; + } + _a = 0, _b = (_c = item.files) !== null && _c !== void 0 ? _c : []; + _d.label = 5; + case 5: + if (!(_a < _b.length)) return [3 /*break*/, 9]; + file = _b[_a]; + filePath = path_1.default.resolve(targetDir, typeof file === "string" ? file : file.path); + if (!(0, fs_1.existsSync)(filePath)) { + return [3 /*break*/, 8]; + } + return [4 /*yield*/, fs_1.promises.readFile(filePath, "utf8")]; + case 6: + fileContent = _d.sent(); + if (typeof file === "string" || !file.content) { + return [3 /*break*/, 8]; + } + return [4 /*yield*/, (0, transformers_1.transform)({ + filename: file.path, + raw: file.content, + config: config, + baseColor: baseColor, + })]; + case 7: + registryContent = _d.sent(); + patch = (0, diff_1.diffLines)(registryContent, fileContent); + if (patch.length > 1) { + changes.push({ + filePath: filePath, + patch: patch, + }); + } + _d.label = 8; + case 8: + _a++; + return [3 /*break*/, 5]; + case 9: + _i++; + return [3 /*break*/, 3]; + case 10: return [2 /*return*/, changes]; + } + }); + }); +} +function printDiff(diff) { + return __awaiter(this, void 0, void 0, function () { + return __generator(this, function (_a) { + diff.forEach(function (part) { + if (part) { + if (part.added) { + return process.stdout.write(highlighter_1.highlighter.success(part.value)); + } + if (part.removed) { + return process.stdout.write(highlighter_1.highlighter.error(part.value)); + } + return process.stdout.write(part.value); + } + }); + return [2 /*return*/]; + }); + }); +} diff --git a/packages/cli/src/commands/init.d.ts b/packages/cli/src/commands/init.d.ts new file mode 100644 index 0000000000..cd974f5c9f --- /dev/null +++ b/packages/cli/src/commands/init.d.ts @@ -0,0 +1,100 @@ +import { Command } from 'commander'; +import { z } from 'zod'; +export declare const registryMap: { + magic: string; + plate: string; + shadcn: string; +}; +export declare const initOptionsSchema: z.ZodObject<{ + components: z.ZodOptional>; + cwd: z.ZodString; + defaults: z.ZodBoolean; + force: z.ZodBoolean; + isNewProject: z.ZodBoolean; + name: z.ZodOptional; + pm: z.ZodOptional>; + silent: z.ZodBoolean; + srcDir: z.ZodOptional; + url: z.ZodOptional; + yes: z.ZodBoolean; +}, "strip", z.ZodTypeAny, { + cwd: string; + silent: boolean; + defaults: boolean; + force: boolean; + isNewProject: boolean; + yes: boolean; + components?: string[] | undefined; + url?: string | undefined; + name?: string | undefined; + pm?: "npm" | "pnpm" | "yarn" | "bun" | undefined; + srcDir?: boolean | undefined; +}, { + cwd: string; + silent: boolean; + defaults: boolean; + force: boolean; + isNewProject: boolean; + yes: boolean; + components?: string[] | undefined; + url?: string | undefined; + name?: string | undefined; + pm?: "npm" | "pnpm" | "yarn" | "bun" | undefined; + srcDir?: boolean | undefined; +}>; +export declare const init: Command; +export declare function runInit(options: z.infer & { + skipPreflight?: boolean; +}): Promise<{ + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + rsc: boolean; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }; + tsx: boolean; + resolvedPaths: { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +}>; +//# sourceMappingURL=init.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/commands/init.d.ts.map b/packages/cli/src/commands/init.d.ts.map new file mode 100644 index 0000000000..7a8dbe5249 --- /dev/null +++ b/packages/cli/src/commands/init.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["init.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAgCxB,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,IAAI,SAmEb,CAAC;AAEL,wBAAsB,OAAO,CAC3B,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,GAAG;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6IF"} \ No newline at end of file diff --git a/packages/cli/src/commands/init.js b/packages/cli/src/commands/init.js new file mode 100644 index 0000000000..240946cc15 --- /dev/null +++ b/packages/cli/src/commands/init.js @@ -0,0 +1,555 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.init = exports.initOptionsSchema = exports.registryMap = void 0; +exports.runInit = runInit; +var commander_1 = require("commander"); +var deepmerge_1 = __importDefault(require("deepmerge")); +var fs_1 = require("fs"); +var path_1 = __importDefault(require("path")); +var prompts_1 = __importDefault(require("prompts")); +var zod_1 = require("zod"); +var preflight_init_1 = require("@/src/preflights/preflight-init"); +var add_components_1 = require("@/src/utils/add-components"); +var create_project_1 = require("@/src/utils/create-project"); +var ERRORS = __importStar(require("@/src/utils/errors")); +var get_config_1 = require("@/src/utils/get-config"); +var get_project_info_1 = require("@/src/utils/get-project-info"); +var handle_error_1 = require("@/src/utils/handle-error"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var registry_1 = require("@/src/utils/registry"); +var spinner_1 = require("@/src/utils/spinner"); +var update_tailwind_content_1 = require("@/src/utils/updaters/update-tailwind-content"); +var is_different_1 = require("../utils/is-different"); +exports.registryMap = { + magic: 'https://magicui.design/r', + plate: 'https://platejs.org/r', + shadcn: registry_1.REGISTRY_URL, +}; +exports.initOptionsSchema = zod_1.z.object({ + components: zod_1.z.array(zod_1.z.string()).optional(), + cwd: zod_1.z.string(), + defaults: zod_1.z.boolean(), + force: zod_1.z.boolean(), + isNewProject: zod_1.z.boolean(), + name: zod_1.z.string().optional(), + pm: zod_1.z.enum(['npm', 'pnpm', 'yarn', 'bun']).optional(), + silent: zod_1.z.boolean(), + srcDir: zod_1.z.boolean().optional(), + url: zod_1.z.string().optional(), + yes: zod_1.z.boolean(), +}); +exports.init = new commander_1.Command() + .name('init') + .description('initialize your project and install dependencies') + .argument('[components...]', 'the components to add or a url to the component.') + .option('-y, --yes', 'skip confirmation prompt.', true) + .option('-d, --defaults,', 'use default configuration.', false) + .option('-f, --force', 'force overwrite of existing configuration.', false) + .option('-c, --cwd ', 'the working directory. defaults to the current directory.', process.cwd()) + .option('-s, --silent', 'mute output.', false) + .option('--src-dir', 'use the src directory when creating a new project.', false) + .option('-n, --name ', 'registry name') + .option('--pm ', 'package manager to use (npm, pnpm, yarn, bun)') + .action(function (components, opts) { return __awaiter(void 0, void 0, void 0, function () { + var url, name_1, actualComponents, registry, options, error_1; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + url = registry_1.REGISTRY_URL; + name_1 = opts.name; + actualComponents = __spreadArray([], components, true); + if (components.length > 0) { + registry = registry_1.REGISTRY_MAP[components[0]]; + if (registry) { + url = registry; + name_1 = components[0]; + actualComponents = components.slice(1); + } + else if (components[0].startsWith('http')) { + url = components[0]; + name_1 = components[0]; + actualComponents = components.slice(1); + } + } + options = exports.initOptionsSchema.parse(__assign(__assign({ cwd: path_1.default.resolve(opts.cwd), isNewProject: false }, opts), { components: actualComponents, name: name_1, url: url })); + // DIFF END + return [4 /*yield*/, runInit(options)]; + case 1: + // DIFF END + _a.sent(); + logger_1.logger.log("".concat(highlighter_1.highlighter.success('Success!'), " Project initialization completed.\nYou may now add components.")); + logger_1.logger.break(); + return [3 /*break*/, 3]; + case 2: + error_1 = _a.sent(); + logger_1.logger.break(); + (0, handle_error_1.handleError)(error_1); + return [3 /*break*/, 3]; + case 3: return [2 /*return*/]; + } + }); +}); }); +function runInit(options) { + return __awaiter(this, void 0, void 0, function () { + var projectInfo, preflight, projectPath, res, projectConfig, isNew, config, newConfig, registryName, url, rest, _a, res_1, res_2, _b, proceed, componentSpinner, targetPath, registryConfig, registry, fullConfig, components, _c, _d, _e, _f; + var _g; + return __generator(this, function (_h) { + switch (_h.label) { + case 0: + if (!options.skipPreflight) return [3 /*break*/, 2]; + return [4 /*yield*/, (0, get_project_info_1.getProjectInfo)(options.cwd)]; + case 1: + projectInfo = _h.sent(); + return [3 /*break*/, 6]; + case 2: return [4 /*yield*/, (0, preflight_init_1.preFlightInit)(options)]; + case 3: + preflight = _h.sent(); + if (!preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) return [3 /*break*/, 5]; + return [4 /*yield*/, (0, create_project_1.createProject)(options)]; + case 4: + projectPath = (_h.sent()).projectPath; + if (!projectPath) { + process.exit(1); + } + options.cwd = projectPath; + options.isNewProject = true; + _h.label = 5; + case 5: + projectInfo = preflight.projectInfo; + _h.label = 6; + case 6: return [4 /*yield*/, (0, get_project_info_1.getProjectConfig)(options.cwd, projectInfo)]; + case 7: + res = _h.sent(); + projectConfig = res === null || res === void 0 ? void 0 : res[0]; + isNew = res === null || res === void 0 ? void 0 : res[1]; + if (!projectConfig) return [3 /*break*/, 18]; + if (!(isNew || options.url === projectConfig.url)) return [3 /*break*/, 15]; + if (!(options.url === projectConfig.url)) return [3 /*break*/, 10]; + return [4 /*yield*/, (0, registry_1.getDefaultConfig)(projectConfig, options.url)]; + case 8: + projectConfig = _h.sent(); + return [4 /*yield*/, promptForMinimalConfig(projectConfig, options)]; + case 9: + // Updating top-level config + config = _h.sent(); + return [3 /*break*/, 14]; + case 10: + url = options.url, rest = __rest(options, ["url"]); + _a = promptForMinimalConfig; + return [4 /*yield*/, (0, registry_1.getDefaultConfig)(projectConfig)]; + case 11: return [4 /*yield*/, _a.apply(void 0, [_h.sent(), __assign({}, rest)])]; + case 12: + newConfig = _h.sent(); + return [4 /*yield*/, promptForNestedRegistryConfig(newConfig, options)]; + case 13: + res_1 = _h.sent(); + config = res_1.config; + registryName = res_1.name; + _h.label = 14; + case 14: return [3 /*break*/, 17]; + case 15: return [4 /*yield*/, promptForNestedRegistryConfig(projectConfig, options)]; + case 16: + res_2 = _h.sent(); + config = res_2.config; + registryName = res_2.name; + _h.label = 17; + case 17: return [3 /*break*/, 21]; + case 18: + _b = promptForConfig; + return [4 /*yield*/, (0, get_config_1.getConfig)(options.cwd)]; + case 19: return [4 /*yield*/, _b.apply(void 0, [_h.sent(), options.url])]; + case 20: + // New configuration + config = _h.sent(); + _h.label = 21; + case 21: + if (!!options.yes) return [3 /*break*/, 23]; + return [4 /*yield*/, (0, prompts_1.default)({ + initial: true, + message: "Write configuration to ".concat(highlighter_1.highlighter.info('components.json'), ". Proceed?"), + name: 'proceed', + type: 'confirm', + })]; + case 22: + proceed = (_h.sent()).proceed; + if (!proceed) { + process.exit(0); + } + _h.label = 23; + case 23: + if (config.url === registry_1.REGISTRY_URL) { + delete config.url; + } + componentSpinner = (0, spinner_1.spinner)("Writing components.json.").start(); + targetPath = path_1.default.resolve(options.cwd, 'components.json'); + return [4 /*yield*/, fs_1.promises.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8')]; + case 24: + _h.sent(); + componentSpinner.succeed(); + registryConfig = config; + if (registryName) { + registry = (_g = config.registries) === null || _g === void 0 ? void 0 : _g[registryName]; + if (registry) { + registryConfig = (0, deepmerge_1.default)(config, registry); + } + } + return [4 /*yield*/, (0, get_config_1.resolveConfigPaths)(options.cwd, registryConfig)]; + case 25: + fullConfig = _h.sent(); + components = __spreadArray(['index'], (options.components || []), true); + if (!newConfig) return [3 /*break*/, 28]; + _c = add_components_1.addComponents; + _d = [components]; + return [4 /*yield*/, (0, get_config_1.resolveConfigPaths)(options.cwd, newConfig)]; + case 26: return [4 /*yield*/, _c.apply(void 0, _d.concat([_h.sent(), { + isNewProject: options.isNewProject || (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.name) === 'next-app', + // Init will always overwrite files. + overwrite: true, + silent: options.silent, + }]))]; + case 27: + _h.sent(); + _h.label = 28; + case 28: return [4 /*yield*/, (0, add_components_1.addComponents)(components, fullConfig, { + isNewProject: options.isNewProject || (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.name) === 'next-app', + // Init will always overwrite files. + overwrite: true, + registryName: registryName, + silent: options.silent, + })]; + case 29: + _h.sent(); + if (!(options.isNewProject && options.srcDir)) return [3 /*break*/, 34]; + if (!newConfig) return [3 /*break*/, 32]; + _e = update_tailwind_content_1.updateTailwindContent; + _f = [['./src/**/*.{js,ts,jsx,tsx,mdx}']]; + return [4 /*yield*/, (0, get_config_1.resolveConfigPaths)(options.cwd, newConfig)]; + case 30: return [4 /*yield*/, _e.apply(void 0, _f.concat([_h.sent(), { + silent: options.silent, + }]))]; + case 31: + _h.sent(); + _h.label = 32; + case 32: return [4 /*yield*/, (0, update_tailwind_content_1.updateTailwindContent)(['./src/**/*.{js,ts,jsx,tsx,mdx}'], fullConfig, { + silent: options.silent, + })]; + case 33: + _h.sent(); + _h.label = 34; + case 34: return [2 /*return*/, fullConfig]; + } + }); + }); +} +function promptForConfig() { + return __awaiter(this, arguments, void 0, function (defaultConfig, registryUrl) { + var _a, styles, baseColors, options; + var _b, _c, _d, _e, _f, _g, _h; + if (defaultConfig === void 0) { defaultConfig = null; } + return __generator(this, function (_j) { + switch (_j.label) { + case 0: return [4 /*yield*/, Promise.all([ + (0, registry_1.getRegistryStyles)(registryUrl), + (0, registry_1.getRegistryBaseColors)(), + ])]; + case 1: + _a = _j.sent(), styles = _a[0], baseColors = _a[1]; + logger_1.logger.info(''); + return [4 /*yield*/, (0, prompts_1.default)(__spreadArray(__spreadArray([ + { + active: 'yes', + inactive: 'no', + initial: (_b = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.tsx) !== null && _b !== void 0 ? _b : true, + message: "Would you like to use ".concat(highlighter_1.highlighter.info('TypeScript'), " (recommended)?"), + name: 'typescript', + type: 'toggle', + } + ], (styles.length > 1 + ? [ + { + choices: styles.map(function (style) { return ({ + title: style.label, + value: style.name, + }); }), + message: "Which ".concat(highlighter_1.highlighter.info('style'), " would you like to use?"), + name: 'style', + type: 'select', + }, + ] + : []), true), [ + { + choices: baseColors.map(function (color) { return ({ + title: color.label, + value: color.name, + }); }), + message: "Which color would you like to use as the ".concat(highlighter_1.highlighter.info('base color'), "?"), + name: 'tailwindBaseColor', + type: 'select', + }, + { + initial: (_c = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.tailwind.css) !== null && _c !== void 0 ? _c : get_config_1.DEFAULT_TAILWIND_CSS, + message: "Where is your ".concat(highlighter_1.highlighter.info('global CSS'), " file?"), + name: 'tailwindCss', + type: 'text', + }, + { + active: 'yes', + inactive: 'no', + initial: (_d = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.tailwind.cssVariables) !== null && _d !== void 0 ? _d : true, + message: "Would you like to use ".concat(highlighter_1.highlighter.info('CSS variables'), " for theming?"), + name: 'tailwindCssVariables', + type: 'toggle', + }, + { + initial: '', + message: "Are you using a custom ".concat(highlighter_1.highlighter.info('tailwind prefix eg. tw-'), "? (Leave blank if not)"), + name: 'tailwindPrefix', + type: 'text', + }, + { + initial: (_e = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.tailwind.config) !== null && _e !== void 0 ? _e : get_config_1.DEFAULT_TAILWIND_CONFIG, + message: "Where is your ".concat(highlighter_1.highlighter.info('tailwind.config.js'), " located?"), + name: 'tailwindConfig', + type: 'text', + }, + { + initial: (_f = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.aliases.components) !== null && _f !== void 0 ? _f : get_config_1.DEFAULT_COMPONENTS, + message: "Configure the import alias for ".concat(highlighter_1.highlighter.info('components'), ":"), + name: 'components', + type: 'text', + }, + { + initial: (_g = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.aliases.utils) !== null && _g !== void 0 ? _g : get_config_1.DEFAULT_UTILS, + message: "Configure the import alias for ".concat(highlighter_1.highlighter.info('utils'), ":"), + name: 'utils', + type: 'text', + }, + { + active: 'yes', + inactive: 'no', + initial: (_h = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.rsc) !== null && _h !== void 0 ? _h : true, + message: "Are you using ".concat(highlighter_1.highlighter.info('React Server Components'), "?"), + name: 'rsc', + type: 'toggle', + }, + ], false))]; + case 2: + options = _j.sent(); + return [2 /*return*/, get_config_1.rawConfigSchema.parse({ + $schema: 'https://ui.shadcn.com/schema.json', + aliases: { + components: options.components, + hooks: options.components.replace(/\/components$/, 'hooks'), + // TODO: fix this. + lib: options.components.replace(/\/components$/, 'lib'), + utils: options.utils, + }, + rsc: options.rsc, + style: options.style, + tailwind: { + baseColor: options.tailwindBaseColor, + config: options.tailwindConfig, + css: options.tailwindCss, + cssVariables: options.tailwindCssVariables, + prefix: options.tailwindPrefix, + }, + tsx: options.typescript, + url: options.url, + })]; + } + }); + }); +} +function promptForMinimalConfig(defaultConfig, opts) { + return __awaiter(this, void 0, void 0, function () { + var style, baseColor, cssVariables, _a, styles, baseColors, options; + var _b, _c, _d; + return __generator(this, function (_e) { + switch (_e.label) { + case 0: + style = defaultConfig.style; + baseColor = defaultConfig.tailwind.baseColor; + cssVariables = defaultConfig.tailwind.cssVariables; + if (!!opts.defaults) return [3 /*break*/, 3]; + return [4 /*yield*/, Promise.all([ + (0, registry_1.getRegistryStyles)(opts.url), + (0, registry_1.getRegistryBaseColors)(), + ])]; + case 1: + _a = _e.sent(), styles = _a[0], baseColors = _a[1]; + return [4 /*yield*/, (0, prompts_1.default)(__spreadArray(__spreadArray([], (styles.length > 1 + ? [ + { + choices: styles.map(function (style) { return ({ + title: style.label, + value: style.name, + }); }), + initial: styles.findIndex(function (s) { return s.name === style; }), + message: "Which ".concat(highlighter_1.highlighter.info('style'), " would you like to use?"), + name: 'style', + type: 'select', + }, + ] + : []), true), [ + { + choices: baseColors.map(function (color) { return ({ + title: color.label, + value: color.name, + }); }), + message: "Which color would you like to use as the ".concat(highlighter_1.highlighter.info('base color'), "?"), + name: 'tailwindBaseColor', + type: 'select', + }, + { + active: 'yes', + inactive: 'no', + initial: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.tailwind.cssVariables, + message: "Would you like to use ".concat(highlighter_1.highlighter.info('CSS variables'), " for theming?"), + name: 'tailwindCssVariables', + type: 'toggle', + }, + ], false))]; + case 2: + options = _e.sent(); + style = (_b = options.style) !== null && _b !== void 0 ? _b : style; + baseColor = (_c = options.tailwindBaseColor) !== null && _c !== void 0 ? _c : baseColor; + cssVariables = (_d = options.tailwindCssVariables) !== null && _d !== void 0 ? _d : cssVariables; + _e.label = 3; + case 3: return [2 /*return*/, get_config_1.rawConfigSchema.parse({ + $schema: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.$schema, + aliases: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.aliases, + registries: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.registries, + rsc: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.rsc, + style: style, + tailwind: __assign(__assign({}, defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.tailwind), { baseColor: baseColor, cssVariables: cssVariables }), + tsx: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.tsx, + url: opts.url, + })]; + } + }); + }); +} +function promptForNestedRegistryConfig(defaultConfig, opts) { + return __awaiter(this, void 0, void 0, function () { + var nestedDefaultConfig, name, newConfig, relevantFields, defaultConfigSubset, newConfigSubset, registryConfig, resolvedPaths, topLevelConfig; + var _a; + var _b, _c; + return __generator(this, function (_d) { + switch (_d.label) { + case 0: return [4 /*yield*/, (0, registry_1.getDefaultConfig)(__assign({}, defaultConfig), opts.url)]; + case 1: + nestedDefaultConfig = _d.sent(); + name = (_c = (_b = opts.name) !== null && _b !== void 0 ? _b : nestedDefaultConfig.name) !== null && _c !== void 0 ? _c : opts.url; + logger_1.logger.info('Initializing ' + name + ' registry...'); + return [4 /*yield*/, promptForMinimalConfig(nestedDefaultConfig, opts)]; + case 2: + newConfig = _d.sent(); + relevantFields = ['style', 'tailwind', 'rsc', 'tsx', 'aliases']; + defaultConfigSubset = Object.fromEntries(relevantFields.map(function (field) { return [field, defaultConfig[field]]; })); + newConfigSubset = Object.fromEntries(relevantFields.map(function (field) { return [field, newConfig[field]]; })); + registryConfig = (0, is_different_1.getDifferences)(newConfigSubset, defaultConfigSubset); + registryConfig.url = opts.url; + resolvedPaths = defaultConfig.resolvedPaths, topLevelConfig = __rest(defaultConfig, ["resolvedPaths"]); + return [2 /*return*/, { + config: __assign(__assign({}, topLevelConfig), { registries: __assign(__assign({}, defaultConfig.registries), (_a = {}, _a[name] = registryConfig, _a)) }), + name: name, + }]; + } + }); + }); +} diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 9dfa4f966b..59193d1e41 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -24,6 +24,7 @@ import { handleError } from '@/src/utils/handle-error'; import { highlighter } from '@/src/utils/highlighter'; import { logger } from '@/src/utils/logger'; import { + REGISTRY_MAP, REGISTRY_URL, getDefaultConfig, getRegistryBaseColors, @@ -34,6 +35,12 @@ import { updateTailwindContent } from '@/src/utils/updaters/update-tailwind-cont import { getDifferences } from '../utils/is-different'; +export const registryMap = { + magic: 'https://magicui.design/r', + plate: 'https://platejs.org/r', + shadcn: REGISTRY_URL, +}; + export const initOptionsSchema = z.object({ components: z.array(z.string()).optional(), cwd: z.string(), @@ -41,6 +48,7 @@ export const initOptionsSchema = z.object({ force: z.boolean(), isNewProject: z.boolean(), name: z.string().optional(), + pm: z.enum(['npm', 'pnpm', 'yarn', 'bun']).optional(), silent: z.boolean(), srcDir: z.boolean().optional(), url: z.string().optional(), @@ -68,16 +76,39 @@ export const init = new Command() 'use the src directory when creating a new project.', false ) - .option('-u, --url ', 'registry URL', REGISTRY_URL) .option('-n, --name ', 'registry name') + .option('--pm ', 'package manager to use (npm, pnpm, yarn, bun)') .action(async (components, opts) => { try { + // DIFF START + let url = REGISTRY_URL; + let name = opts.name; + let actualComponents = [...components]; + + if (components.length > 0) { + const registry = + REGISTRY_MAP[components[0] as keyof typeof REGISTRY_MAP]; + + if (registry) { + url = registry; + name = components[0]; + actualComponents = components.slice(1); + } else if (components[0].startsWith('http')) { + url = components[0]; + name = components[0]; + actualComponents = components.slice(1); + } + } + const options = initOptionsSchema.parse({ - components, cwd: path.resolve(opts.cwd), isNewProject: false, ...opts, + components: actualComponents, + name, + url, }); + // DIFF END await runInit(options); @@ -124,15 +155,30 @@ export async function runInit( const isNew = res?.[1]; let config: Config; + let newConfig: Config | undefined; + let registryName: string | undefined; if (projectConfig) { if (isNew || options.url === projectConfig.url) { - projectConfig = await getDefaultConfig(projectConfig, options.url); - // Updating top-level config - config = await promptForMinimalConfig(projectConfig, options); + if (options.url === projectConfig.url) { + projectConfig = await getDefaultConfig(projectConfig, options.url); + // Updating top-level config + config = await promptForMinimalConfig(projectConfig, options); + } else { + const { url, ...rest } = options; + newConfig = await promptForMinimalConfig( + await getDefaultConfig(projectConfig), + { ...rest } + ); + const res = await promptForNestedRegistryConfig(newConfig, options); + config = res.config; + registryName = res.name; + } } else { // Updating nested registry config - config = await promptForNestedRegistryConfig(projectConfig, options); + const res = await promptForNestedRegistryConfig(projectConfig, options); + config = res.config; + registryName = res.name; } } else { // New configuration @@ -163,14 +209,11 @@ export async function runInit( componentSpinner.succeed(); let registryConfig = config; - let registryName: string | undefined; - const id = options.name ?? options.url; - if (id) { - const registry = config.registries?.[id]; + if (registryName) { + const registry = config.registries?.[registryName]; if (registry) { - registryName = id; registryConfig = deepmerge(config, registry) as any; } } @@ -178,6 +221,21 @@ export async function runInit( // Add components. const fullConfig = await resolveConfigPaths(options.cwd, registryConfig); const components = ['index', ...(options.components || [])]; + + if (newConfig) { + await addComponents( + components, + await resolveConfigPaths(options.cwd, newConfig), + { + isNewProject: + options.isNewProject || projectInfo?.framework.name === 'next-app', + // Init will always overwrite files. + overwrite: true, + silent: options.silent, + } + ); + } + await addComponents(components, fullConfig, { isNewProject: options.isNewProject || projectInfo?.framework.name === 'next-app', @@ -190,6 +248,16 @@ export async function runInit( // If a new project is using src dir, let's update the tailwind content config. // TODO: Handle this per framework. if (options.isNewProject && options.srcDir) { + if (newConfig) { + await updateTailwindContent( + ['./src/**/*.{js,ts,jsx,tsx,mdx}'], + await resolveConfigPaths(options.cwd, newConfig), + { + silent: options.silent, + } + ); + } + await updateTailwindContent( ['./src/**/*.{js,ts,jsx,tsx,mdx}'], fullConfig, @@ -412,6 +480,10 @@ async function promptForNestedRegistryConfig( opts.url ); + const name = opts.name ?? nestedDefaultConfig.name ?? opts.url!; + + logger.info('Initializing ' + name + ' registry...'); + const newConfig = await promptForMinimalConfig(nestedDefaultConfig, opts); const relevantFields = ['style', 'tailwind', 'rsc', 'tsx', 'aliases']; @@ -434,10 +506,13 @@ async function promptForNestedRegistryConfig( const { resolvedPaths, ...topLevelConfig } = defaultConfig; return { - ...topLevelConfig, - registries: { - ...defaultConfig.registries, - [opts.name ?? opts.url!]: registryConfig, + config: { + ...topLevelConfig, + registries: { + ...defaultConfig.registries, + [name]: registryConfig, + }, }, - } as Config; + name, + } as { config: Config; name: string }; } diff --git a/packages/cli/src/index.d.ts b/packages/cli/src/index.d.ts new file mode 100644 index 0000000000..dc1ec89565 --- /dev/null +++ b/packages/cli/src/index.d.ts @@ -0,0 +1,3 @@ +#!/usr/bin/env node +export {}; +//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/index.d.ts.map b/packages/cli/src/index.d.ts.map new file mode 100644 index 0000000000..82335e72a1 --- /dev/null +++ b/packages/cli/src/index.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js new file mode 100644 index 0000000000..4da3c3a4da --- /dev/null +++ b/packages/cli/src/index.js @@ -0,0 +1,64 @@ +#!/usr/bin/env node +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var add_1 = require("@/src/commands/add"); +var diff_1 = require("@/src/commands/diff"); +var init_1 = require("@/src/commands/init"); +var commander_1 = require("commander"); +var package_json_1 = __importDefault(require("../package.json")); +process.on("SIGINT", function () { return process.exit(0); }); +process.on("SIGTERM", function () { return process.exit(0); }); +function main() { + return __awaiter(this, void 0, void 0, function () { + var program; + return __generator(this, function (_a) { + program = new commander_1.Command() + .name("shadcn") + .description("add components and dependencies to your project") + .version(package_json_1.default.version || "1.0.0", "-v, --version", "display the version number"); + program.addCommand(init_1.init).addCommand(add_1.add).addCommand(diff_1.diff); + program.parse(); + return [2 /*return*/]; + }); + }); +} +main(); diff --git a/packages/cli/src/preflights/preflight-add.d.ts b/packages/cli/src/preflights/preflight-add.d.ts new file mode 100644 index 0000000000..13f6b3ea3c --- /dev/null +++ b/packages/cli/src/preflights/preflight-add.d.ts @@ -0,0 +1,61 @@ +import type { addOptionsSchema } from '@/src/commands/add'; +import type { z } from 'zod'; +export declare function preFlightAdd(options: z.infer): Promise<{ + config: null; + errors: Record; +} | { + config: { + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + rsc: boolean; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }; + tsx: boolean; + resolvedPaths: { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; + }; + errors: Record; +}>; +//# sourceMappingURL=preflight-add.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/preflights/preflight-add.d.ts.map b/packages/cli/src/preflights/preflight-add.d.ts.map new file mode 100644 index 0000000000..21a5f7a1af --- /dev/null +++ b/packages/cli/src/preflights/preflight-add.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"preflight-add.d.ts","sourceRoot":"","sources":["preflight-add.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAW7B,wBAAsB,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6E3E"} \ No newline at end of file diff --git a/packages/cli/src/preflights/preflight-add.js b/packages/cli/src/preflights/preflight-add.js new file mode 100644 index 0000000000..437961d446 --- /dev/null +++ b/packages/cli/src/preflights/preflight-add.js @@ -0,0 +1,135 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.preFlightAdd = preFlightAdd; +var fs_extra_1 = __importDefault(require("fs-extra")); +var path_1 = __importDefault(require("path")); +var ERRORS = __importStar(require("@/src/utils/errors")); +var get_config_1 = require("@/src/utils/get-config"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var registry_1 = require("@/src/utils/registry"); +function preFlightAdd(options) { + return __awaiter(this, void 0, void 0, function () { + var errors, configPath, config, registryUrl_1, hasRegistry, error_1; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: + errors = {}; + // Ensure target directory exists. + // Check for empty project. We assume if no package.json exists, the project is empty. + if (!fs_extra_1.default.existsSync(options.cwd) || + !fs_extra_1.default.existsSync(path_1.default.resolve(options.cwd, 'package.json'))) { + errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true; + return [2 /*return*/, { + config: null, + errors: errors, + }]; + } + configPath = path_1.default.resolve(options.cwd, 'components.json'); + if (!fs_extra_1.default.existsSync(configPath)) { + errors[ERRORS.MISSING_CONFIG] = true; + return [2 /*return*/, { + config: null, + errors: errors, + }]; + } + _b.label = 1; + case 1: + _b.trys.push([1, 3, , 4]); + return [4 /*yield*/, (0, get_config_1.getConfig)(options.cwd)]; + case 2: + config = _b.sent(); + if (!config) { + errors[ERRORS.MISSING_CONFIG] = true; + return [2 /*return*/, { config: null, errors: errors }]; + } + // Check if the required registry exists in config + if (options.registry) { + registryUrl_1 = registry_1.REGISTRY_MAP[options.registry]; + hasRegistry = ((_a = config.registries) === null || _a === void 0 ? void 0 : _a[options.registry]) || + Object.values(config.registries || {}).some(function (reg) { return reg.url === registryUrl_1; }); + if (!hasRegistry) { + errors[ERRORS.MISSING_REGISTRY] = true; + return [2 /*return*/, { config: config, errors: errors }]; + } + } + return [2 /*return*/, { + config: config, + errors: errors, + }]; + case 3: + error_1 = _b.sent(); + logger_1.logger.break(); + logger_1.logger.error("An invalid ".concat(highlighter_1.highlighter.info('components.json'), " file was found at ").concat(highlighter_1.highlighter.info(options.cwd), ".\nBefore you can add components, you must create a valid ").concat(highlighter_1.highlighter.info('components.json'), " file by running the ").concat(highlighter_1.highlighter.info('init'), " command.")); + logger_1.logger.error("Learn more at ".concat(highlighter_1.highlighter.info('https://ui.shadcn.com/docs/components-json'), ".")); + logger_1.logger.break(); + process.exit(1); + return [3 /*break*/, 4]; + case 4: return [2 /*return*/]; + } + }); + }); +} diff --git a/packages/cli/src/preflights/preflight-add.ts b/packages/cli/src/preflights/preflight-add.ts index 24b141af44..01d7f5bac3 100644 --- a/packages/cli/src/preflights/preflight-add.ts +++ b/packages/cli/src/preflights/preflight-add.ts @@ -1,61 +1,90 @@ -import path from "path" -import { addOptionsSchema } from "@/src/commands/add" -import * as ERRORS from "@/src/utils/errors" -import { getConfig } from "@/src/utils/get-config" -import { highlighter } from "@/src/utils/highlighter" -import { logger } from "@/src/utils/logger" -import fs from "fs-extra" -import { z } from "zod" +import type { addOptionsSchema } from '@/src/commands/add'; +import type { z } from 'zod'; + +import fs from 'fs-extra'; +import path from 'path'; + +import * as ERRORS from '@/src/utils/errors'; +import { getConfig } from '@/src/utils/get-config'; +import { highlighter } from '@/src/utils/highlighter'; +import { logger } from '@/src/utils/logger'; +import { REGISTRY_MAP } from '@/src/utils/registry'; export async function preFlightAdd(options: z.infer) { - const errors: Record = {} + const errors: Record = {}; // Ensure target directory exists. // Check for empty project. We assume if no package.json exists, the project is empty. if ( !fs.existsSync(options.cwd) || - !fs.existsSync(path.resolve(options.cwd, "package.json")) + !fs.existsSync(path.resolve(options.cwd, 'package.json')) ) { - errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true + errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true; + return { - errors, config: null, - } + errors, + }; } // Check for existing components.json file. - if (!fs.existsSync(path.resolve(options.cwd, "components.json"))) { - errors[ERRORS.MISSING_CONFIG] = true + const configPath = path.resolve(options.cwd, 'components.json'); + + if (!fs.existsSync(configPath)) { + errors[ERRORS.MISSING_CONFIG] = true; + return { - errors, config: null, - } + errors, + }; } try { - const config = await getConfig(options.cwd) + const config = await getConfig(options.cwd); + + if (!config) { + errors[ERRORS.MISSING_CONFIG] = true; + + return { config: null, errors }; + } + // Check if the required registry exists in config + if (options.registry) { + const registryUrl = + REGISTRY_MAP[options.registry as keyof typeof REGISTRY_MAP]; + const hasRegistry = + config.registries?.[options.registry] || + Object.values(config.registries || {}).some( + (reg) => reg.url === registryUrl + ); + + if (!hasRegistry) { + errors[ERRORS.MISSING_REGISTRY] = true; + + return { config, errors }; + } + } return { + config, errors, - config: config!, - } + }; } catch (error) { - logger.break() + logger.break(); logger.error( `An invalid ${highlighter.info( - "components.json" + 'components.json' )} file was found at ${highlighter.info( options.cwd )}.\nBefore you can add components, you must create a valid ${highlighter.info( - "components.json" - )} file by running the ${highlighter.info("init")} command.` - ) + 'components.json' + )} file by running the ${highlighter.info('init')} command.` + ); logger.error( `Learn more at ${highlighter.info( - "https://ui.shadcn.com/docs/components-json" + 'https://ui.shadcn.com/docs/components-json' )}.` - ) - logger.break() - process.exit(1) + ); + logger.break(); + process.exit(1); } } diff --git a/packages/cli/src/preflights/preflight-init.d.ts b/packages/cli/src/preflights/preflight-init.d.ts new file mode 100644 index 0000000000..a3060de1e8 --- /dev/null +++ b/packages/cli/src/preflights/preflight-init.d.ts @@ -0,0 +1,18 @@ +import type { initOptionsSchema } from '@/src/commands/init'; +import type { z } from 'zod'; +export declare function preFlightInit(options: z.infer): Promise<{ + errors: Record; + projectInfo: null; +} | { + errors: Record; + projectInfo: { + aliasPrefix: string | null; + framework: import("../utils/frameworks").Framework; + isRSC: boolean; + isSrcDir: boolean; + isTsx: boolean; + tailwindConfigFile: string | null; + tailwindCssFile: string | null; + }; +}>; +//# sourceMappingURL=preflight-init.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/preflights/preflight-init.d.ts.map b/packages/cli/src/preflights/preflight-init.d.ts.map new file mode 100644 index 0000000000..f3a46ef34a --- /dev/null +++ b/packages/cli/src/preflights/preflight-init.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"preflight-init.d.ts","sourceRoot":"","sources":["preflight-init.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAW7B,wBAAsB,aAAa,CACjC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC;;;;;;;;;;;;;;GA0I3C"} \ No newline at end of file diff --git a/packages/cli/src/preflights/preflight-init.js b/packages/cli/src/preflights/preflight-init.js new file mode 100644 index 0000000000..7e45daab89 --- /dev/null +++ b/packages/cli/src/preflights/preflight-init.js @@ -0,0 +1,168 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.preFlightInit = preFlightInit; +var fs_extra_1 = __importDefault(require("fs-extra")); +var path_1 = __importDefault(require("path")); +var ERRORS = __importStar(require("@/src/utils/errors")); +var get_project_info_1 = require("@/src/utils/get-project-info"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var spinner_1 = require("@/src/utils/spinner"); +function preFlightInit(options) { + return __awaiter(this, void 0, void 0, function () { + var errors, projectSpinner, frameworkSpinner, projectInfo, tailwindSpinner, tsConfigSpinner; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + errors = {}; + // Ensure target directory exists. + // Check for empty project. We assume if no package.json exists, the project is empty. + if (!fs_extra_1.default.existsSync(options.cwd) || + !fs_extra_1.default.existsSync(path_1.default.resolve(options.cwd, 'package.json'))) { + errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true; + return [2 /*return*/, { + errors: errors, + projectInfo: null, + }]; + } + projectSpinner = (0, spinner_1.spinner)("Preflight checks.", { + silent: options.silent, + }).start(); + if (fs_extra_1.default.existsSync(path_1.default.resolve(options.cwd, 'components.json')) && + !options.force && + !options.url) { + projectSpinner === null || projectSpinner === void 0 ? void 0 : projectSpinner.fail(); + logger_1.logger.break(); + logger_1.logger.error("A ".concat(highlighter_1.highlighter.info('components.json'), " file already exists at ").concat(highlighter_1.highlighter.info(options.cwd), ".\nTo start over, remove the ").concat(highlighter_1.highlighter.info('components.json'), " file and run ").concat(highlighter_1.highlighter.info('init'), " again.")); + logger_1.logger.break(); + process.exit(1); + } + projectSpinner === null || projectSpinner === void 0 ? void 0 : projectSpinner.succeed(); + frameworkSpinner = (0, spinner_1.spinner)("Verifying framework.", { + silent: options.silent, + }).start(); + return [4 /*yield*/, (0, get_project_info_1.getProjectInfo)(options.cwd)]; + case 1: + projectInfo = _a.sent(); + if (!projectInfo || (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.name) === 'manual') { + errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true; + frameworkSpinner === null || frameworkSpinner === void 0 ? void 0 : frameworkSpinner.fail(); + logger_1.logger.break(); + if (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.links.installation) { + logger_1.logger.error("We could not detect a supported framework at ".concat(highlighter_1.highlighter.info(options.cwd), ".\n") + + "Visit ".concat(highlighter_1.highlighter.info(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.links.installation), " to manually configure your project.\nOnce configured, you can use the cli to add components.")); + } + logger_1.logger.break(); + process.exit(1); + } + frameworkSpinner === null || frameworkSpinner === void 0 ? void 0 : frameworkSpinner.succeed("Verifying framework. Found ".concat(highlighter_1.highlighter.info(projectInfo.framework.label), ".")); + tailwindSpinner = (0, spinner_1.spinner)("Validating Tailwind CSS.", { + silent: options.silent, + }).start(); + if (!(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.tailwindConfigFile) || !(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.tailwindCssFile)) { + errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true; + tailwindSpinner === null || tailwindSpinner === void 0 ? void 0 : tailwindSpinner.fail(); + } + else { + tailwindSpinner === null || tailwindSpinner === void 0 ? void 0 : tailwindSpinner.succeed(); + } + tsConfigSpinner = (0, spinner_1.spinner)("Validating import alias.", { + silent: options.silent, + }).start(); + if (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.aliasPrefix) { + tsConfigSpinner === null || tsConfigSpinner === void 0 ? void 0 : tsConfigSpinner.succeed(); + } + else { + errors[ERRORS.IMPORT_ALIAS_MISSING] = true; + tsConfigSpinner === null || tsConfigSpinner === void 0 ? void 0 : tsConfigSpinner.fail(); + } + if (Object.keys(errors).length > 0) { + if (errors[ERRORS.TAILWIND_NOT_CONFIGURED]) { + logger_1.logger.break(); + logger_1.logger.error("No Tailwind CSS configuration found at ".concat(highlighter_1.highlighter.info(options.cwd), ".")); + logger_1.logger.error("It is likely you do not have Tailwind CSS installed or have an invalid configuration."); + logger_1.logger.error("Install Tailwind CSS then try again."); + if (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.links.tailwind) { + logger_1.logger.error("Visit ".concat(highlighter_1.highlighter.info(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.links.tailwind), " to get started.")); + } + } + if (errors[ERRORS.IMPORT_ALIAS_MISSING]) { + logger_1.logger.break(); + logger_1.logger.error("No import alias found in your tsconfig.json file."); + if (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.links.installation) { + logger_1.logger.error("Visit ".concat(highlighter_1.highlighter.info(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.framework.links.installation), " to learn how to set an import alias.")); + } + } + logger_1.logger.break(); + process.exit(1); + } + return [2 /*return*/, { + errors: errors, + projectInfo: projectInfo, + }]; + } + }); + }); +} diff --git a/packages/cli/src/preflights/preflight-init.ts b/packages/cli/src/preflights/preflight-init.ts index a0742c03af..a713e99137 100644 --- a/packages/cli/src/preflights/preflight-init.ts +++ b/packages/cli/src/preflights/preflight-init.ts @@ -1,64 +1,70 @@ -import path from "path" -import { initOptionsSchema } from "@/src/commands/init" -import * as ERRORS from "@/src/utils/errors" -import { getProjectInfo } from "@/src/utils/get-project-info" -import { highlighter } from "@/src/utils/highlighter" -import { logger } from "@/src/utils/logger" -import { spinner } from "@/src/utils/spinner" -import fs from "fs-extra" -import { z } from "zod" +import type { initOptionsSchema } from '@/src/commands/init'; +import type { z } from 'zod'; + +import fs from 'fs-extra'; +import path from 'path'; + +import * as ERRORS from '@/src/utils/errors'; +import { getProjectInfo } from '@/src/utils/get-project-info'; +import { highlighter } from '@/src/utils/highlighter'; +import { logger } from '@/src/utils/logger'; +import { spinner } from '@/src/utils/spinner'; export async function preFlightInit( options: z.infer ) { - const errors: Record = {} + const errors: Record = {}; // Ensure target directory exists. // Check for empty project. We assume if no package.json exists, the project is empty. if ( !fs.existsSync(options.cwd) || - !fs.existsSync(path.resolve(options.cwd, "package.json")) + !fs.existsSync(path.resolve(options.cwd, 'package.json')) ) { - errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true + errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true; + return { errors, projectInfo: null, - } + }; } const projectSpinner = spinner(`Preflight checks.`, { silent: options.silent, - }).start() + }).start(); if ( - fs.existsSync(path.resolve(options.cwd, "components.json")) && - !options.force + fs.existsSync(path.resolve(options.cwd, 'components.json')) && + !options.force && + !options.url ) { - projectSpinner?.fail() - logger.break() + projectSpinner?.fail(); + logger.break(); logger.error( `A ${highlighter.info( - "components.json" + 'components.json' )} file already exists at ${highlighter.info( options.cwd )}.\nTo start over, remove the ${highlighter.info( - "components.json" - )} file and run ${highlighter.info("init")} again.` - ) - logger.break() - process.exit(1) + 'components.json' + )} file and run ${highlighter.info('init')} again.` + ); + logger.break(); + process.exit(1); } - projectSpinner?.succeed() + projectSpinner?.succeed(); const frameworkSpinner = spinner(`Verifying framework.`, { silent: options.silent, - }).start() - const projectInfo = await getProjectInfo(options.cwd) - if (!projectInfo || projectInfo?.framework.name === "manual") { - errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true - frameworkSpinner?.fail() - logger.break() + }).start(); + const projectInfo = await getProjectInfo(options.cwd); + + if (!projectInfo || projectInfo?.framework.name === 'manual') { + errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true; + frameworkSpinner?.fail(); + logger.break(); + if (projectInfo?.framework.links.installation) { logger.error( `We could not detect a supported framework at ${highlighter.info( @@ -67,76 +73,80 @@ export async function preFlightInit( `Visit ${highlighter.info( projectInfo?.framework.links.installation )} to manually configure your project.\nOnce configured, you can use the cli to add components.` - ) + ); } - logger.break() - process.exit(1) + + logger.break(); + process.exit(1); } + frameworkSpinner?.succeed( `Verifying framework. Found ${highlighter.info( projectInfo.framework.label )}.` - ) + ); const tailwindSpinner = spinner(`Validating Tailwind CSS.`, { silent: options.silent, - }).start() + }).start(); + if (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile) { - errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true - tailwindSpinner?.fail() + errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true; + tailwindSpinner?.fail(); } else { - tailwindSpinner?.succeed() + tailwindSpinner?.succeed(); } const tsConfigSpinner = spinner(`Validating import alias.`, { silent: options.silent, - }).start() - if (!projectInfo?.aliasPrefix) { - errors[ERRORS.IMPORT_ALIAS_MISSING] = true - tsConfigSpinner?.fail() + }).start(); + + if (projectInfo?.aliasPrefix) { + tsConfigSpinner?.succeed(); } else { - tsConfigSpinner?.succeed() + errors[ERRORS.IMPORT_ALIAS_MISSING] = true; + tsConfigSpinner?.fail(); } - if (Object.keys(errors).length > 0) { if (errors[ERRORS.TAILWIND_NOT_CONFIGURED]) { - logger.break() + logger.break(); logger.error( `No Tailwind CSS configuration found at ${highlighter.info( options.cwd )}.` - ) + ); logger.error( `It is likely you do not have Tailwind CSS installed or have an invalid configuration.` - ) - logger.error(`Install Tailwind CSS then try again.`) + ); + logger.error(`Install Tailwind CSS then try again.`); + if (projectInfo?.framework.links.tailwind) { logger.error( `Visit ${highlighter.info( projectInfo?.framework.links.tailwind )} to get started.` - ) + ); } } - if (errors[ERRORS.IMPORT_ALIAS_MISSING]) { - logger.break() - logger.error(`No import alias found in your tsconfig.json file.`) + logger.break(); + logger.error(`No import alias found in your tsconfig.json file.`); + if (projectInfo?.framework.links.installation) { logger.error( `Visit ${highlighter.info( projectInfo?.framework.links.installation )} to learn how to set an import alias.` - ) + ); } } - logger.break() - process.exit(1) + logger.break(); + process.exit(1); } return { errors, projectInfo, - } + }; } diff --git a/packages/cli/src/utils/add-components.d.ts b/packages/cli/src/utils/add-components.d.ts new file mode 100644 index 0000000000..8b821dce19 --- /dev/null +++ b/packages/cli/src/utils/add-components.d.ts @@ -0,0 +1,8 @@ +import type { Config } from '@/src/utils/get-config'; +export declare function addComponents(components: string[], config: Config, options: { + isNewProject?: boolean; + overwrite?: boolean; + registryName?: string; + silent?: boolean; +}): Promise; +//# sourceMappingURL=add-components.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/add-components.d.ts.map b/packages/cli/src/utils/add-components.d.ts.map new file mode 100644 index 0000000000..f5104b4b83 --- /dev/null +++ b/packages/cli/src/utils/add-components.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"add-components.d.ts","sourceRoot":"","sources":["add-components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAWrD,wBAAsB,aAAa,CACjC,UAAU,EAAE,MAAM,EAAE,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,iBA0CF"} \ No newline at end of file diff --git a/packages/cli/src/utils/add-components.js b/packages/cli/src/utils/add-components.js new file mode 100644 index 0000000000..c3225ee9a6 --- /dev/null +++ b/packages/cli/src/utils/add-components.js @@ -0,0 +1,108 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.addComponents = addComponents; +var handle_error_1 = require("@/src/utils/handle-error"); +var logger_1 = require("@/src/utils/logger"); +var registry_1 = require("@/src/utils/registry"); +var spinner_1 = require("@/src/utils/spinner"); +var update_css_vars_1 = require("@/src/utils/updaters/update-css-vars"); +var update_dependencies_1 = require("@/src/utils/updaters/update-dependencies"); +var update_files_1 = require("@/src/utils/updaters/update-files"); +var update_tailwind_config_1 = require("@/src/utils/updaters/update-tailwind-config"); +function addComponents(components, config, options) { + return __awaiter(this, void 0, void 0, function () { + var registrySpinner, tree; + var _a, _b; + return __generator(this, function (_c) { + switch (_c.label) { + case 0: + options = __assign({ isNewProject: false, overwrite: false, silent: false }, options); + registrySpinner = (_a = (0, spinner_1.spinner)("Checking registry.", { + silent: options.silent, + })) === null || _a === void 0 ? void 0 : _a.start(); + return [4 /*yield*/, (0, registry_1.registryResolveItemsTree)(components, config)]; + case 1: + tree = _c.sent(); + if (!tree) { + registrySpinner === null || registrySpinner === void 0 ? void 0 : registrySpinner.fail(); + return [2 /*return*/, (0, handle_error_1.handleError)(new Error('Failed to fetch components from registry.'))]; + } + registrySpinner === null || registrySpinner === void 0 ? void 0 : registrySpinner.succeed(); + return [4 /*yield*/, (0, update_tailwind_config_1.updateTailwindConfig)((_b = tree.tailwind) === null || _b === void 0 ? void 0 : _b.config, config, { + silent: options.silent, + })]; + case 2: + _c.sent(); + return [4 /*yield*/, (0, update_css_vars_1.updateCssVars)(tree.cssVars, config, { + cleanupDefaultNextStyles: options.isNewProject, + registryName: options.registryName, + silent: options.silent, + })]; + case 3: + _c.sent(); + return [4 /*yield*/, (0, update_dependencies_1.updateDependencies)(tree.dependencies, config, { + silent: options.silent, + })]; + case 4: + _c.sent(); + return [4 /*yield*/, (0, update_files_1.updateFiles)(tree.files, config, { + overwrite: options.overwrite, + silent: options.silent, + })]; + case 5: + _c.sent(); + if (tree.docs) { + logger_1.logger.info(tree.docs); + } + return [2 /*return*/]; + } + }); + }); +} diff --git a/packages/cli/src/utils/create-project.d.ts b/packages/cli/src/utils/create-project.d.ts new file mode 100644 index 0000000000..9de5b4dc2a --- /dev/null +++ b/packages/cli/src/utils/create-project.d.ts @@ -0,0 +1,10 @@ +import type { initOptionsSchema } from '@/src/commands/init'; +import type { z } from 'zod'; +export declare function createProject(options: Pick, 'cwd' | 'force' | 'pm' | 'srcDir'>): Promise<{ + projectName: null; + projectPath: null; +} | { + projectName: any; + projectPath: string; +}>; +//# sourceMappingURL=create-project.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/create-project.d.ts.map b/packages/cli/src/utils/create-project.d.ts.map new file mode 100644 index 0000000000..ba10da64cd --- /dev/null +++ b/packages/cli/src/utils/create-project.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"create-project.d.ts","sourceRoot":"","sources":["create-project.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAY7B,wBAAsB,aAAa,CACjC,OAAO,EAAE,IAAI,CACX,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,EACjC,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,CAClC;;;;;;GA4GF"} \ No newline at end of file diff --git a/packages/cli/src/utils/create-project.js b/packages/cli/src/utils/create-project.js new file mode 100644 index 0000000000..791fe5d61a --- /dev/null +++ b/packages/cli/src/utils/create-project.js @@ -0,0 +1,175 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.createProject = createProject; +var execa_1 = require("execa"); +var fs_extra_1 = __importDefault(require("fs-extra")); +var path_1 = __importDefault(require("path")); +var prompts_1 = __importDefault(require("prompts")); +var get_package_manager_1 = require("@/src/utils/get-package-manager"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var spinner_1 = require("@/src/utils/spinner"); +function createProject(options) { + return __awaiter(this, void 0, void 0, function () { + var proceed, packageManager, _a, name, projectPath, error_1, createSpinner, args, error_2; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: + options = __assign({ srcDir: false }, options); + if (!!options.force) return [3 /*break*/, 2]; + return [4 /*yield*/, (0, prompts_1.default)({ + initial: true, + message: "The path ".concat(highlighter_1.highlighter.info(options.cwd), " does not contain a package.json file. Would you like to start a new ").concat(highlighter_1.highlighter.info('Next.js'), " project?"), + name: 'proceed', + type: 'confirm', + })]; + case 1: + proceed = (_b.sent()).proceed; + if (!proceed) { + return [2 /*return*/, { + projectName: null, + projectPath: null, + }]; + } + _b.label = 2; + case 2: + _a = options.pm; + if (_a) return [3 /*break*/, 4]; + return [4 /*yield*/, (0, get_package_manager_1.getPackageManager)(options.cwd, { + withFallback: true, + })]; + case 3: + _a = (_b.sent()); + _b.label = 4; + case 4: + packageManager = _a; + return [4 /*yield*/, (0, prompts_1.default)({ + format: function (value) { return value.trim(); }, + initial: 'my-app', + message: "What is your project named?", + name: 'name', + type: 'text', + validate: function (value) { + return value.length > 128 ? "Name should be less than 128 characters." : true; + }, + })]; + case 5: + name = (_b.sent()).name; + projectPath = "".concat(options.cwd, "/").concat(name); + _b.label = 6; + case 6: + _b.trys.push([6, 8, , 9]); + return [4 /*yield*/, fs_extra_1.default.access(options.cwd, fs_extra_1.default.constants.W_OK)]; + case 7: + _b.sent(); + return [3 /*break*/, 9]; + case 8: + error_1 = _b.sent(); + logger_1.logger.break(); + logger_1.logger.error("The path ".concat(highlighter_1.highlighter.info(options.cwd), " is not writable.")); + logger_1.logger.error("It is likely you do not have write permissions for this folder or the path ".concat(highlighter_1.highlighter.info(options.cwd), " does not exist.")); + logger_1.logger.break(); + process.exit(1); + return [3 /*break*/, 9]; + case 9: + if (fs_extra_1.default.existsSync(path_1.default.resolve(options.cwd, name, 'package.json'))) { + logger_1.logger.break(); + logger_1.logger.error("A project with the name ".concat(highlighter_1.highlighter.info(name), " already exists.")); + logger_1.logger.error("Please choose a different name and try again."); + logger_1.logger.break(); + process.exit(1); + } + createSpinner = (0, spinner_1.spinner)("Creating a new Next.js project. This may take a few minutes.").start(); + args = [ + '--tailwind', + '--eslint', + '--typescript', + '--app', + options.srcDir ? '--src-dir' : '--no-src-dir', + '--no-import-alias', + "--use-".concat(packageManager), + ]; + _b.label = 10; + case 10: + _b.trys.push([10, 12, , 13]); + return [4 /*yield*/, (0, execa_1.execa)('npx', __spreadArray(['create-next-app@14.2.16', projectPath, '--silent'], args, true), { + cwd: options.cwd, + })]; + case 11: + _b.sent(); + return [3 /*break*/, 13]; + case 12: + error_2 = _b.sent(); + logger_1.logger.break(); + logger_1.logger.error("Something went wrong creating a new Next.js project. Please try again.", error_2); + process.exit(1); + return [3 /*break*/, 13]; + case 13: + createSpinner === null || createSpinner === void 0 ? void 0 : createSpinner.succeed('Creating a new Next.js project.'); + return [2 /*return*/, { + projectName: name, + projectPath: projectPath, + }]; + } + }); + }); +} diff --git a/packages/cli/src/utils/create-project.ts b/packages/cli/src/utils/create-project.ts index 972ee4889b..ac139c63e8 100644 --- a/packages/cli/src/utils/create-project.ts +++ b/packages/cli/src/utils/create-project.ts @@ -12,7 +12,10 @@ import { logger } from '@/src/utils/logger'; import { spinner } from '@/src/utils/spinner'; export async function createProject( - options: Pick, 'cwd' | 'force' | 'srcDir'> + options: Pick< + z.infer, + 'cwd' | 'force' | 'pm' | 'srcDir' + > ) { options = { srcDir: false, @@ -39,9 +42,11 @@ export async function createProject( } } - const packageManager = await getPackageManager(options.cwd, { - withFallback: true, - }); + const packageManager = + options.pm || + (await getPackageManager(options.cwd, { + withFallback: true, + })); const { name } = await prompts({ format: (value: string) => value.trim(), @@ -106,7 +111,8 @@ export async function createProject( } catch (error) { logger.break(); logger.error( - `Something went wrong creating a new Next.js project. Please try again.` + `Something went wrong creating a new Next.js project. Please try again.`, + error ); process.exit(1); } diff --git a/packages/cli/src/utils/errors.d.ts b/packages/cli/src/utils/errors.d.ts new file mode 100644 index 0000000000..24b9b3d2cd --- /dev/null +++ b/packages/cli/src/utils/errors.d.ts @@ -0,0 +1,14 @@ +export declare const MISSING_DIR_OR_EMPTY_PROJECT = "1"; +export declare const EXISTING_CONFIG = "2"; +export declare const MISSING_CONFIG = "3"; +export declare const MISSING_REGISTRY = "3b"; +export declare const FAILED_CONFIG_READ = "4"; +export declare const TAILWIND_NOT_CONFIGURED = "5"; +export declare const IMPORT_ALIAS_MISSING = "6"; +export declare const UNSUPPORTED_FRAMEWORK = "7"; +export declare const COMPONENT_URL_NOT_FOUND = "8"; +export declare const COMPONENT_URL_UNAUTHORIZED = "9"; +export declare const COMPONENT_URL_FORBIDDEN = "10"; +export declare const COMPONENT_URL_BAD_REQUEST = "11"; +export declare const COMPONENT_URL_INTERNAL_SERVER_ERROR = "12"; +//# sourceMappingURL=errors.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/errors.d.ts.map b/packages/cli/src/utils/errors.d.ts.map new file mode 100644 index 0000000000..77840d0321 --- /dev/null +++ b/packages/cli/src/utils/errors.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["errors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,eAAO,MAAM,uBAAuB,OAAO,CAAC;AAE5C,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C,eAAO,MAAM,mCAAmC,OAAO,CAAC"} \ No newline at end of file diff --git a/packages/cli/src/utils/errors.js b/packages/cli/src/utils/errors.js new file mode 100644 index 0000000000..efd61e58c5 --- /dev/null +++ b/packages/cli/src/utils/errors.js @@ -0,0 +1,16 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.COMPONENT_URL_INTERNAL_SERVER_ERROR = exports.COMPONENT_URL_BAD_REQUEST = exports.COMPONENT_URL_FORBIDDEN = exports.COMPONENT_URL_UNAUTHORIZED = exports.COMPONENT_URL_NOT_FOUND = exports.UNSUPPORTED_FRAMEWORK = exports.IMPORT_ALIAS_MISSING = exports.TAILWIND_NOT_CONFIGURED = exports.FAILED_CONFIG_READ = exports.MISSING_REGISTRY = exports.MISSING_CONFIG = exports.EXISTING_CONFIG = exports.MISSING_DIR_OR_EMPTY_PROJECT = void 0; +exports.MISSING_DIR_OR_EMPTY_PROJECT = '1'; +exports.EXISTING_CONFIG = '2'; +exports.MISSING_CONFIG = '3'; +exports.MISSING_REGISTRY = '3b'; +exports.FAILED_CONFIG_READ = '4'; +exports.TAILWIND_NOT_CONFIGURED = '5'; +exports.IMPORT_ALIAS_MISSING = '6'; +exports.UNSUPPORTED_FRAMEWORK = '7'; +exports.COMPONENT_URL_NOT_FOUND = '8'; +exports.COMPONENT_URL_UNAUTHORIZED = '9'; +exports.COMPONENT_URL_FORBIDDEN = '10'; +exports.COMPONENT_URL_BAD_REQUEST = '11'; +exports.COMPONENT_URL_INTERNAL_SERVER_ERROR = '12'; diff --git a/packages/cli/src/utils/errors.ts b/packages/cli/src/utils/errors.ts index c1ff21b377..87b675366c 100644 --- a/packages/cli/src/utils/errors.ts +++ b/packages/cli/src/utils/errors.ts @@ -1,12 +1,25 @@ -export const MISSING_DIR_OR_EMPTY_PROJECT = "1" -export const EXISTING_CONFIG = "2" -export const MISSING_CONFIG = "3" -export const FAILED_CONFIG_READ = "4" -export const TAILWIND_NOT_CONFIGURED = "5" -export const IMPORT_ALIAS_MISSING = "6" -export const UNSUPPORTED_FRAMEWORK = "7" -export const COMPONENT_URL_NOT_FOUND = "8" -export const COMPONENT_URL_UNAUTHORIZED = "9" -export const COMPONENT_URL_FORBIDDEN = "10" -export const COMPONENT_URL_BAD_REQUEST = "11" -export const COMPONENT_URL_INTERNAL_SERVER_ERROR = "12" +export const MISSING_DIR_OR_EMPTY_PROJECT = '1'; + +export const EXISTING_CONFIG = '2'; + +export const MISSING_CONFIG = '3'; + +export const MISSING_REGISTRY = '3b'; + +export const FAILED_CONFIG_READ = '4'; + +export const TAILWIND_NOT_CONFIGURED = '5'; + +export const IMPORT_ALIAS_MISSING = '6'; + +export const UNSUPPORTED_FRAMEWORK = '7'; + +export const COMPONENT_URL_NOT_FOUND = '8'; + +export const COMPONENT_URL_UNAUTHORIZED = '9'; + +export const COMPONENT_URL_FORBIDDEN = '10'; + +export const COMPONENT_URL_BAD_REQUEST = '11'; + +export const COMPONENT_URL_INTERNAL_SERVER_ERROR = '12'; diff --git a/packages/cli/src/utils/frameworks.d.ts b/packages/cli/src/utils/frameworks.d.ts new file mode 100644 index 0000000000..b8a647bce8 --- /dev/null +++ b/packages/cli/src/utils/frameworks.d.ts @@ -0,0 +1,68 @@ +export declare const FRAMEWORKS: { + readonly "next-app": { + readonly name: "next-app"; + readonly label: "Next.js"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/next"; + readonly tailwind: "https://tailwindcss.com/docs/guides/nextjs"; + }; + }; + readonly "next-pages": { + readonly name: "next-pages"; + readonly label: "Next.js"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/next"; + readonly tailwind: "https://tailwindcss.com/docs/guides/nextjs"; + }; + }; + readonly remix: { + readonly name: "remix"; + readonly label: "Remix"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/remix"; + readonly tailwind: "https://tailwindcss.com/docs/guides/remix"; + }; + }; + readonly vite: { + readonly name: "vite"; + readonly label: "Vite"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/vite"; + readonly tailwind: "https://tailwindcss.com/docs/guides/vite"; + }; + }; + readonly astro: { + readonly name: "astro"; + readonly label: "Astro"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/astro"; + readonly tailwind: "https://tailwindcss.com/docs/guides/astro"; + }; + }; + readonly laravel: { + readonly name: "laravel"; + readonly label: "Laravel"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/laravel"; + readonly tailwind: "https://tailwindcss.com/docs/guides/laravel"; + }; + }; + readonly gatsby: { + readonly name: "gatsby"; + readonly label: "Gatsby"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/gatsby"; + readonly tailwind: "https://tailwindcss.com/docs/guides/gatsby"; + }; + }; + readonly manual: { + readonly name: "manual"; + readonly label: "Manual"; + readonly links: { + readonly installation: "https://ui.shadcn.com/docs/installation/manual"; + readonly tailwind: "https://tailwindcss.com/docs/installation"; + }; + }; +}; +export type Framework = (typeof FRAMEWORKS)[keyof typeof FRAMEWORKS]; +//# sourceMappingURL=frameworks.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/frameworks.d.ts.map b/packages/cli/src/utils/frameworks.d.ts.map new file mode 100644 index 0000000000..8aeb5867ab --- /dev/null +++ b/packages/cli/src/utils/frameworks.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"frameworks.d.ts","sourceRoot":"","sources":["frameworks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEb,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAA"} \ No newline at end of file diff --git a/packages/cli/src/utils/frameworks.js b/packages/cli/src/utils/frameworks.js new file mode 100644 index 0000000000..f099acc2b2 --- /dev/null +++ b/packages/cli/src/utils/frameworks.js @@ -0,0 +1,69 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.FRAMEWORKS = void 0; +exports.FRAMEWORKS = { + "next-app": { + name: "next-app", + label: "Next.js", + links: { + installation: "https://ui.shadcn.com/docs/installation/next", + tailwind: "https://tailwindcss.com/docs/guides/nextjs", + }, + }, + "next-pages": { + name: "next-pages", + label: "Next.js", + links: { + installation: "https://ui.shadcn.com/docs/installation/next", + tailwind: "https://tailwindcss.com/docs/guides/nextjs", + }, + }, + remix: { + name: "remix", + label: "Remix", + links: { + installation: "https://ui.shadcn.com/docs/installation/remix", + tailwind: "https://tailwindcss.com/docs/guides/remix", + }, + }, + vite: { + name: "vite", + label: "Vite", + links: { + installation: "https://ui.shadcn.com/docs/installation/vite", + tailwind: "https://tailwindcss.com/docs/guides/vite", + }, + }, + astro: { + name: "astro", + label: "Astro", + links: { + installation: "https://ui.shadcn.com/docs/installation/astro", + tailwind: "https://tailwindcss.com/docs/guides/astro", + }, + }, + laravel: { + name: "laravel", + label: "Laravel", + links: { + installation: "https://ui.shadcn.com/docs/installation/laravel", + tailwind: "https://tailwindcss.com/docs/guides/laravel", + }, + }, + gatsby: { + name: "gatsby", + label: "Gatsby", + links: { + installation: "https://ui.shadcn.com/docs/installation/gatsby", + tailwind: "https://tailwindcss.com/docs/guides/gatsby", + }, + }, + manual: { + name: "manual", + label: "Manual", + links: { + installation: "https://ui.shadcn.com/docs/installation/manual", + tailwind: "https://tailwindcss.com/docs/installation", + }, + }, +}; diff --git a/packages/cli/src/utils/get-config.d.ts b/packages/cli/src/utils/get-config.d.ts new file mode 100644 index 0000000000..c5527e8944 --- /dev/null +++ b/packages/cli/src/utils/get-config.d.ts @@ -0,0 +1,584 @@ +import { z } from 'zod'; +export declare const DEFAULT_STYLE = "default"; +export declare const DEFAULT_COMPONENTS = "@/components"; +export declare const DEFAULT_UTILS = "@/lib/utils"; +export declare const DEFAULT_TAILWIND_CSS = "app/globals.css"; +export declare const DEFAULT_TAILWIND_CONFIG = "tailwind.config.js"; +export declare const DEFAULT_TAILWIND_BASE_COLOR = "slate"; +export declare const rawConfigSchema: z.ZodObject<{ + $schema: z.ZodOptional; + aliases: z.ZodObject<{ + components: z.ZodString; + hooks: z.ZodOptional; + lib: z.ZodOptional; + ui: z.ZodOptional; + utils: z.ZodString; + }, "strip", z.ZodTypeAny, { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }, { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }>; + name: z.ZodOptional; + registries: z.ZodOptional; + hooks: z.ZodOptional; + lib: z.ZodOptional; + ui: z.ZodOptional; + utils: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + }, { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + }>>; + rsc: z.ZodOptional; + style: z.ZodOptional; + tailwind: z.ZodOptional; + config: z.ZodOptional; + css: z.ZodOptional; + cssVariables: z.ZodOptional; + prefix: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }, { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }>>; + tsx: z.ZodOptional; + url: z.ZodString; + }, "strip", z.ZodTypeAny, { + url: string; + aliases?: { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + } | undefined; + rsc?: boolean | undefined; + style?: string | undefined; + tailwind?: { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + } | undefined; + tsx?: boolean | undefined; + }, { + url: string; + aliases?: { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + } | undefined; + rsc?: boolean | undefined; + style?: string | undefined; + tailwind?: { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + } | undefined; + tsx?: boolean | undefined; + }>>>; + rsc: z.ZodDefault; + style: z.ZodString; + tailwind: z.ZodObject<{ + baseColor: z.ZodString; + config: z.ZodString; + css: z.ZodString; + cssVariables: z.ZodDefault; + prefix: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }, { + baseColor: string; + config: string; + css: string; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }>; + tsx: z.ZodDefault; + url: z.ZodOptional; +}, "strict", z.ZodTypeAny, { + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + rsc: boolean; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }; + tsx: boolean; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +}, { + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }; + rsc?: boolean | undefined; + tsx?: boolean | undefined; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +}>; +export type RawConfig = z.infer; +export declare const configSchema: z.ZodObject; + aliases: z.ZodObject<{ + components: z.ZodString; + hooks: z.ZodOptional; + lib: z.ZodOptional; + ui: z.ZodOptional; + utils: z.ZodString; + }, "strip", z.ZodTypeAny, { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }, { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }>; + name: z.ZodOptional; + registries: z.ZodOptional; + hooks: z.ZodOptional; + lib: z.ZodOptional; + ui: z.ZodOptional; + utils: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + }, { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + }>>; + rsc: z.ZodOptional; + style: z.ZodOptional; + tailwind: z.ZodOptional; + config: z.ZodOptional; + css: z.ZodOptional; + cssVariables: z.ZodOptional; + prefix: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }, { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }>>; + tsx: z.ZodOptional; + url: z.ZodString; + }, "strip", z.ZodTypeAny, { + url: string; + aliases?: { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + } | undefined; + rsc?: boolean | undefined; + style?: string | undefined; + tailwind?: { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + } | undefined; + tsx?: boolean | undefined; + }, { + url: string; + aliases?: { + components?: string | undefined; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + utils?: string | undefined; + } | undefined; + rsc?: boolean | undefined; + style?: string | undefined; + tailwind?: { + baseColor?: string | undefined; + config?: string | undefined; + css?: string | undefined; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + } | undefined; + tsx?: boolean | undefined; + }>>>; + rsc: z.ZodDefault; + style: z.ZodString; + tailwind: z.ZodObject<{ + baseColor: z.ZodString; + config: z.ZodString; + css: z.ZodString; + cssVariables: z.ZodDefault; + prefix: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }, { + baseColor: string; + config: string; + css: string; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }>; + tsx: z.ZodDefault; + url: z.ZodOptional; +}, { + resolvedPaths: z.ZodObject<{ + components: z.ZodString; + cwd: z.ZodString; + hooks: z.ZodString; + lib: z.ZodString; + tailwindConfig: z.ZodString; + tailwindCss: z.ZodString; + ui: z.ZodString; + utils: z.ZodString; + }, "strip", z.ZodTypeAny, { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }, { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }>; +}>, "strict", z.ZodTypeAny, { + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + rsc: boolean; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }; + tsx: boolean; + resolvedPaths: { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +}, { + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables?: boolean | undefined; + prefix?: string | undefined; + }; + resolvedPaths: { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }; + rsc?: boolean | undefined; + tsx?: boolean | undefined; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +}>; +export type Config = z.infer; +export declare function getConfig(cwd: string): Promise<{ + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + rsc: boolean; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }; + tsx: boolean; + resolvedPaths: { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +} | null>; +export declare function resolveConfigPaths(cwd: string, config: RawConfig): Promise<{ + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + rsc: boolean; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }; + tsx: boolean; + resolvedPaths: { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +}>; +export declare function getRawConfig(cwd: string): Promise; +//# sourceMappingURL=get-config.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/get-config.d.ts.map b/packages/cli/src/utils/get-config.d.ts.map new file mode 100644 index 0000000000..5142e8e489 --- /dev/null +++ b/packages/cli/src/utils/get-config.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"get-config.d.ts","sourceRoot":"","sources":["get-config.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAKxB,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD,eAAO,MAAM,uBAAuB,uBAAuB,CAAC;AAE5D,eAAO,MAAM,2BAA2B,UAAU,CAAC;AAiCnD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBjB,CAAC;AAEZ,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC;AAExD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWvB,CAAC;AAEH,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAElD,wBAAsB,SAAS,CAAC,GAAG,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAQ1C;AAED,wBAAsB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CtE;AAED,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAgBzE"} \ No newline at end of file diff --git a/packages/cli/src/utils/get-config.js b/packages/cli/src/utils/get-config.js new file mode 100644 index 0000000000..69619c7be8 --- /dev/null +++ b/packages/cli/src/utils/get-config.js @@ -0,0 +1,246 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.configSchema = exports.rawConfigSchema = exports.DEFAULT_TAILWIND_BASE_COLOR = exports.DEFAULT_TAILWIND_CONFIG = exports.DEFAULT_TAILWIND_CSS = exports.DEFAULT_UTILS = exports.DEFAULT_COMPONENTS = exports.DEFAULT_STYLE = void 0; +exports.getConfig = getConfig; +exports.resolveConfigPaths = resolveConfigPaths; +exports.getRawConfig = getRawConfig; +var cosmiconfig_1 = require("cosmiconfig"); +var path_1 = __importDefault(require("path")); +var tsconfig_paths_1 = require("tsconfig-paths"); +var zod_1 = require("zod"); +var highlighter_1 = require("@/src/utils/highlighter"); +var resolve_import_1 = require("@/src/utils/resolve-import"); +exports.DEFAULT_STYLE = 'default'; +exports.DEFAULT_COMPONENTS = '@/components'; +exports.DEFAULT_UTILS = '@/lib/utils'; +exports.DEFAULT_TAILWIND_CSS = 'app/globals.css'; +exports.DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js'; +exports.DEFAULT_TAILWIND_BASE_COLOR = 'slate'; +// TODO: Figure out if we want to support all cosmiconfig formats. +// A simple components.json file would be nice. +var explorer = (0, cosmiconfig_1.cosmiconfig)('components', { + searchPlaces: ['components.json'], +}); +var registrySchema = zod_1.z.object({ + aliases: zod_1.z + .object({ + components: zod_1.z.string().optional(), + hooks: zod_1.z.string().optional(), + lib: zod_1.z.string().optional(), + ui: zod_1.z.string().optional(), + utils: zod_1.z.string().optional(), + }) + .optional(), + rsc: zod_1.z.coerce.boolean().optional(), + style: zod_1.z.string().optional(), + tailwind: zod_1.z + .object({ + baseColor: zod_1.z.string().optional(), + config: zod_1.z.string().optional(), + css: zod_1.z.string().optional(), + cssVariables: zod_1.z.boolean().optional(), + prefix: zod_1.z.string().optional(), + }) + .optional(), + tsx: zod_1.z.coerce.boolean().optional(), + url: zod_1.z.string(), +}); +exports.rawConfigSchema = zod_1.z + .object({ + $schema: zod_1.z.string().optional(), + aliases: zod_1.z.object({ + components: zod_1.z.string(), + hooks: zod_1.z.string().optional(), + lib: zod_1.z.string().optional(), + ui: zod_1.z.string().optional(), + utils: zod_1.z.string(), + }), + name: zod_1.z.string().optional(), + registries: zod_1.z.record(zod_1.z.string(), registrySchema).optional(), + rsc: zod_1.z.coerce.boolean().default(false), + style: zod_1.z.string(), + tailwind: zod_1.z.object({ + baseColor: zod_1.z.string(), + config: zod_1.z.string(), + css: zod_1.z.string(), + cssVariables: zod_1.z.boolean().default(true), + prefix: zod_1.z.string().default('').optional(), + }), + tsx: zod_1.z.coerce.boolean().default(true), + url: zod_1.z.string().optional(), +}) + .strict(); +exports.configSchema = exports.rawConfigSchema.extend({ + resolvedPaths: zod_1.z.object({ + components: zod_1.z.string(), + cwd: zod_1.z.string(), + hooks: zod_1.z.string(), + lib: zod_1.z.string(), + tailwindConfig: zod_1.z.string(), + tailwindCss: zod_1.z.string(), + ui: zod_1.z.string(), + utils: zod_1.z.string(), + }), +}); +function getConfig(cwd) { + return __awaiter(this, void 0, void 0, function () { + var config; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, getRawConfig(cwd)]; + case 1: + config = _a.sent(); + if (!config) { + return [2 /*return*/, null]; + } + return [4 /*yield*/, resolveConfigPaths(cwd, config)]; + case 2: return [2 /*return*/, _a.sent()]; + } + }); + }); +} +function resolveConfigPaths(cwd, config) { + return __awaiter(this, void 0, void 0, function () { + var tsConfig, _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m; + var _o, _p; + var _q, _r, _s, _t; + return __generator(this, function (_u) { + switch (_u.label) { + case 0: return [4 /*yield*/, (0, tsconfig_paths_1.loadConfig)(cwd)]; + case 1: + tsConfig = _u.sent(); + if (tsConfig.resultType === 'failed') { + throw new Error("Failed to load ".concat(config.tsx ? 'tsconfig' : 'jsconfig', ".json. ").concat((_q = tsConfig.message) !== null && _q !== void 0 ? _q : '').trim()); + } + _b = (_a = exports.configSchema).parse; + _c = [__assign({}, config)]; + _o = {}; + _p = {}; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.components, tsConfig)]; + case 2: + _p.components = _u.sent(), + _p.cwd = cwd; + if (!config.aliases.hooks) return [3 /*break*/, 4]; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.hooks, tsConfig)]; + case 3: + _d = _u.sent(); + return [3 /*break*/, 6]; + case 4: + _f = (_e = path_1.default).resolve; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.components, tsConfig)]; + case 5: + _d = _f.apply(_e, [(_r = (_u.sent())) !== null && _r !== void 0 ? _r : cwd, '..', + 'hooks']); + _u.label = 6; + case 6: + _p.hooks = _d; + if (!config.aliases.lib) return [3 /*break*/, 8]; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.lib, tsConfig)]; + case 7: + _g = _u.sent(); + return [3 /*break*/, 10]; + case 8: + _j = (_h = path_1.default).resolve; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.utils, tsConfig)]; + case 9: + _g = _j.apply(_h, [(_s = (_u.sent())) !== null && _s !== void 0 ? _s : cwd, '..']); + _u.label = 10; + case 10: + // TODO: Make this configurable. + // For now, we assume the lib and hooks directories are one level up from the components directory. + _p.lib = _g, + _p.tailwindConfig = path_1.default.resolve(cwd, config.tailwind.config), + _p.tailwindCss = path_1.default.resolve(cwd, config.tailwind.css); + if (!config.aliases.ui) return [3 /*break*/, 12]; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.ui, tsConfig)]; + case 11: + _k = _u.sent(); + return [3 /*break*/, 14]; + case 12: + _m = (_l = path_1.default).resolve; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.components, tsConfig)]; + case 13: + _k = _m.apply(_l, [(_t = (_u.sent())) !== null && _t !== void 0 ? _t : cwd, 'ui']); + _u.label = 14; + case 14: + _p.ui = _k; + return [4 /*yield*/, (0, resolve_import_1.resolveImport)(config.aliases.utils, tsConfig)]; + case 15: return [2 /*return*/, _b.apply(_a, [__assign.apply(void 0, _c.concat([(_o.resolvedPaths = (_p.utils = _u.sent(), + _p), _o)]))])]; + } + }); + }); +} +function getRawConfig(cwd) { + return __awaiter(this, void 0, void 0, function () { + var configResult, error_1, componentPath; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + return [4 /*yield*/, explorer.search(cwd)]; + case 1: + configResult = _a.sent(); + if (!configResult) { + return [2 /*return*/, null]; + } + return [2 /*return*/, exports.rawConfigSchema.parse(configResult.config)]; + case 2: + error_1 = _a.sent(); + componentPath = "".concat(cwd, "/components.json"); + throw new Error("Invalid configuration found in ".concat(highlighter_1.highlighter.info(componentPath), ".")); + case 3: return [2 /*return*/]; + } + }); + }); +} diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts index 7e430e9af4..3a1e6ec3b5 100644 --- a/packages/cli/src/utils/get-config.ts +++ b/packages/cli/src/utils/get-config.ts @@ -1,160 +1,166 @@ -import path from "path" -import { highlighter } from "@/src/utils/highlighter" -import { resolveImport } from "@/src/utils/resolve-import" -import { cosmiconfig } from "cosmiconfig" -import { loadConfig } from "tsconfig-paths" -import { z } from "zod" - -export const DEFAULT_STYLE = "default" -export const DEFAULT_COMPONENTS = "@/components" -export const DEFAULT_UTILS = "@/lib/utils" -export const DEFAULT_TAILWIND_CSS = "app/globals.css" -export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.js" -export const DEFAULT_TAILWIND_BASE_COLOR = "slate" +import { cosmiconfig } from 'cosmiconfig'; +import path from 'path'; +import { loadConfig } from 'tsconfig-paths'; +import { z } from 'zod'; + +import { highlighter } from '@/src/utils/highlighter'; +import { resolveImport } from '@/src/utils/resolve-import'; + +export const DEFAULT_STYLE = 'default'; + +export const DEFAULT_COMPONENTS = '@/components'; + +export const DEFAULT_UTILS = '@/lib/utils'; + +export const DEFAULT_TAILWIND_CSS = 'app/globals.css'; + +export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js'; + +export const DEFAULT_TAILWIND_BASE_COLOR = 'slate'; // TODO: Figure out if we want to support all cosmiconfig formats. // A simple components.json file would be nice. -const explorer = cosmiconfig("components", { - searchPlaces: ["components.json"], -}) +const explorer = cosmiconfig('components', { + searchPlaces: ['components.json'], +}); const registrySchema = z.object({ - url: z.string(), - style: z.string().optional(), + aliases: z + .object({ + components: z.string().optional(), + hooks: z.string().optional(), + lib: z.string().optional(), + ui: z.string().optional(), + utils: z.string().optional(), + }) + .optional(), rsc: z.coerce.boolean().optional(), - tsx: z.coerce.boolean().optional(), + style: z.string().optional(), tailwind: z .object({ + baseColor: z.string().optional(), config: z.string().optional(), css: z.string().optional(), - baseColor: z.string().optional(), cssVariables: z.boolean().optional(), prefix: z.string().optional(), }) .optional(), - aliases: z - .object({ - components: z.string().optional(), - utils: z.string().optional(), - ui: z.string().optional(), - lib: z.string().optional(), - hooks: z.string().optional(), - }) - .optional(), -}) + tsx: z.coerce.boolean().optional(), + url: z.string(), +}); export const rawConfigSchema = z .object({ $schema: z.string().optional(), - style: z.string(), + aliases: z.object({ + components: z.string(), + hooks: z.string().optional(), + lib: z.string().optional(), + ui: z.string().optional(), + utils: z.string(), + }), + name: z.string().optional(), + registries: z.record(z.string(), registrySchema).optional(), rsc: z.coerce.boolean().default(false), - tsx: z.coerce.boolean().default(true), + style: z.string(), tailwind: z.object({ + baseColor: z.string(), config: z.string(), css: z.string(), - baseColor: z.string(), cssVariables: z.boolean().default(true), - prefix: z.string().default("").optional(), - }), - aliases: z.object({ - components: z.string(), - utils: z.string(), - ui: z.string().optional(), - lib: z.string().optional(), - hooks: z.string().optional(), + prefix: z.string().default('').optional(), }), + tsx: z.coerce.boolean().default(true), url: z.string().optional(), - registries: z.record(z.string(), registrySchema).optional(), }) - .strict() + .strict(); -export type RawConfig = z.infer +export type RawConfig = z.infer; export const configSchema = rawConfigSchema.extend({ resolvedPaths: z.object({ + components: z.string(), cwd: z.string(), + hooks: z.string(), + lib: z.string(), tailwindConfig: z.string(), tailwindCss: z.string(), - utils: z.string(), - components: z.string(), - lib: z.string(), - hooks: z.string(), ui: z.string(), + utils: z.string(), }), -}) +}); -export type Config = z.infer +export type Config = z.infer; export async function getConfig(cwd: string) { - const config = await getRawConfig(cwd) + const config = await getRawConfig(cwd); if (!config) { - return null + return null; } - return await resolveConfigPaths(cwd, config) + return await resolveConfigPaths(cwd, config); } export async function resolveConfigPaths(cwd: string, config: RawConfig) { // Read tsconfig.json. - const tsConfig = await loadConfig(cwd) + const tsConfig = await loadConfig(cwd); - if (tsConfig.resultType === "failed") { + if (tsConfig.resultType === 'failed') { throw new Error( - `Failed to load ${config.tsx ? "tsconfig" : "jsconfig"}.json. ${ - tsConfig.message ?? "" + `Failed to load ${config.tsx ? 'tsconfig' : 'jsconfig'}.json. ${ + tsConfig.message ?? '' }`.trim() - ) + ); } return configSchema.parse({ ...config, resolvedPaths: { + components: await resolveImport(config.aliases.components, tsConfig), cwd, - tailwindConfig: path.resolve(cwd, config.tailwind.config), - tailwindCss: path.resolve(cwd, config.tailwind.css), - utils: await resolveImport(config.aliases["utils"], tsConfig), - components: await resolveImport(config.aliases["components"], tsConfig), - ui: config.aliases["ui"] - ? await resolveImport(config.aliases["ui"], tsConfig) + hooks: config.aliases.hooks + ? await resolveImport(config.aliases.hooks, tsConfig) : path.resolve( - (await resolveImport(config.aliases["components"], tsConfig)) ?? - cwd, - "ui" + (await resolveImport(config.aliases.components, tsConfig)) ?? cwd, + '..', + 'hooks' ), // TODO: Make this configurable. // For now, we assume the lib and hooks directories are one level up from the components directory. - lib: config.aliases["lib"] - ? await resolveImport(config.aliases["lib"], tsConfig) + lib: config.aliases.lib + ? await resolveImport(config.aliases.lib, tsConfig) : path.resolve( - (await resolveImport(config.aliases["utils"], tsConfig)) ?? cwd, - ".." + (await resolveImport(config.aliases.utils, tsConfig)) ?? cwd, + '..' ), - hooks: config.aliases["hooks"] - ? await resolveImport(config.aliases["hooks"], tsConfig) + tailwindConfig: path.resolve(cwd, config.tailwind.config), + tailwindCss: path.resolve(cwd, config.tailwind.css), + ui: config.aliases.ui + ? await resolveImport(config.aliases.ui, tsConfig) : path.resolve( - (await resolveImport(config.aliases["components"], tsConfig)) ?? - cwd, - "..", - "hooks" + (await resolveImport(config.aliases.components, tsConfig)) ?? cwd, + 'ui' ), + utils: await resolveImport(config.aliases.utils, tsConfig), }, - }) + }); } export async function getRawConfig(cwd: string): Promise { try { - const configResult = await explorer.search(cwd) + const configResult = await explorer.search(cwd); if (!configResult) { - return null + return null; } - return rawConfigSchema.parse(configResult.config) + return rawConfigSchema.parse(configResult.config); } catch (error) { - const componentPath = `${cwd}/components.json` + const componentPath = `${cwd}/components.json`; + throw new Error( `Invalid configuration found in ${highlighter.info(componentPath)}.` - ) + ); } } diff --git a/packages/cli/src/utils/get-package-info.d.ts b/packages/cli/src/utils/get-package-info.d.ts new file mode 100644 index 0000000000..3282cfafe3 --- /dev/null +++ b/packages/cli/src/utils/get-package-info.d.ts @@ -0,0 +1,3 @@ +import { type PackageJson } from "type-fest"; +export declare function getPackageInfo(cwd?: string, shouldThrow?: boolean): PackageJson | null; +//# sourceMappingURL=get-package-info.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/get-package-info.d.ts.map b/packages/cli/src/utils/get-package-info.d.ts.map new file mode 100644 index 0000000000..0f2f72c37c --- /dev/null +++ b/packages/cli/src/utils/get-package-info.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"get-package-info.d.ts","sourceRoot":"","sources":["get-package-info.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAE5C,wBAAgB,cAAc,CAC5B,GAAG,GAAE,MAAW,EAChB,WAAW,GAAE,OAAc,GAC1B,WAAW,GAAG,IAAI,CAMpB"} \ No newline at end of file diff --git a/packages/cli/src/utils/get-package-info.js b/packages/cli/src/utils/get-package-info.js new file mode 100644 index 0000000000..086b766503 --- /dev/null +++ b/packages/cli/src/utils/get-package-info.js @@ -0,0 +1,16 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.getPackageInfo = getPackageInfo; +var path_1 = __importDefault(require("path")); +var fs_extra_1 = __importDefault(require("fs-extra")); +function getPackageInfo(cwd, shouldThrow) { + if (cwd === void 0) { cwd = ""; } + if (shouldThrow === void 0) { shouldThrow = true; } + var packageJsonPath = path_1.default.join(cwd, "package.json"); + return fs_extra_1.default.readJSONSync(packageJsonPath, { + throws: shouldThrow, + }); +} diff --git a/packages/cli/src/utils/get-package-manager.d.ts b/packages/cli/src/utils/get-package-manager.d.ts new file mode 100644 index 0000000000..bc56c64103 --- /dev/null +++ b/packages/cli/src/utils/get-package-manager.d.ts @@ -0,0 +1,5 @@ +export declare function getPackageManager(targetDir: string, { withFallback }?: { + withFallback?: boolean; +}): Promise<'bun' | 'npm' | 'pnpm' | 'yarn'>; +export declare function getPackageRunner(cwd: string): Promise<"pnpm dlx" | "bunx" | "npx">; +//# sourceMappingURL=get-package-manager.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/get-package-manager.d.ts.map b/packages/cli/src/utils/get-package-manager.d.ts.map new file mode 100644 index 0000000000..7861caf1c1 --- /dev/null +++ b/packages/cli/src/utils/get-package-manager.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"get-package-manager.d.ts","sourceRoot":"","sources":["get-package-manager.ts"],"names":[],"mappings":"AAEA,wBAAsB,iBAAiB,CACrC,SAAS,EAAE,MAAM,EACjB,EAAE,YAAY,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAEzC,GACA,OAAO,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,CAwB1C;AAED,wBAAsB,gBAAgB,CAAC,GAAG,EAAE,MAAM,wCAOjD"} \ No newline at end of file diff --git a/packages/cli/src/utils/get-package-manager.js b/packages/cli/src/utils/get-package-manager.js new file mode 100644 index 0000000000..285ecd78e4 --- /dev/null +++ b/packages/cli/src/utils/get-package-manager.js @@ -0,0 +1,93 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.getPackageManager = getPackageManager; +exports.getPackageRunner = getPackageRunner; +var ni_1 = require("@antfu/ni"); +function getPackageManager(targetDir_1) { + return __awaiter(this, arguments, void 0, function (targetDir, _a) { + var packageManager, userAgent; + var _b = _a === void 0 ? { + withFallback: false, + } : _a, withFallback = _b.withFallback; + return __generator(this, function (_c) { + switch (_c.label) { + case 0: return [4 /*yield*/, (0, ni_1.detect)({ cwd: targetDir, programmatic: true })]; + case 1: + packageManager = _c.sent(); + if (packageManager === 'yarn@berry') + return [2 /*return*/, 'yarn']; + if (packageManager === 'pnpm@6') + return [2 /*return*/, 'pnpm']; + if (packageManager === 'bun') + return [2 /*return*/, 'bun']; + if (!withFallback) { + return [2 /*return*/, packageManager !== null && packageManager !== void 0 ? packageManager : 'npm']; + } + userAgent = process.env.npm_config_user_agent || ''; + if (userAgent.startsWith('yarn')) { + return [2 /*return*/, 'yarn']; + } + if (userAgent.startsWith('pnpm')) { + return [2 /*return*/, 'pnpm']; + } + if (userAgent.startsWith('bun')) { + return [2 /*return*/, 'bun']; + } + return [2 /*return*/, 'npm']; + } + }); + }); +} +function getPackageRunner(cwd) { + return __awaiter(this, void 0, void 0, function () { + var packageManager; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, getPackageManager(cwd)]; + case 1: + packageManager = _a.sent(); + if (packageManager === 'pnpm') + return [2 /*return*/, 'pnpm dlx']; + if (packageManager === 'bun') + return [2 /*return*/, 'bunx']; + return [2 /*return*/, 'npx']; + } + }); + }); +} diff --git a/packages/cli/src/utils/get-package-manager.ts b/packages/cli/src/utils/get-package-manager.ts index db9632b826..7ca7da8731 100644 --- a/packages/cli/src/utils/get-package-manager.ts +++ b/packages/cli/src/utils/get-package-manager.ts @@ -1,45 +1,41 @@ -import { detect } from "@antfu/ni" +import { detect } from '@antfu/ni'; export async function getPackageManager( targetDir: string, { withFallback }: { withFallback?: boolean } = { withFallback: false, } -): Promise<"yarn" | "pnpm" | "bun" | "npm"> { - const packageManager = await detect({ programmatic: true, cwd: targetDir }) - - if (packageManager === "yarn@berry") return "yarn" - if (packageManager === "pnpm@6") return "pnpm" - if (packageManager === "bun") return "bun" +): Promise<'bun' | 'npm' | 'pnpm' | 'yarn'> { + const packageManager = await detect({ cwd: targetDir, programmatic: true }); + if (packageManager === 'yarn@berry') return 'yarn'; + if (packageManager === 'pnpm@6') return 'pnpm'; + if (packageManager === 'bun') return 'bun'; if (!withFallback) { - return packageManager ?? "npm" + return packageManager ?? 'npm'; } // Fallback to user agent if not detected. - const userAgent = process.env.npm_config_user_agent || "" + const userAgent = process.env.npm_config_user_agent || ''; - if (userAgent.startsWith("yarn")) { - return "yarn" + if (userAgent.startsWith('yarn')) { + return 'yarn'; } - - if (userAgent.startsWith("pnpm")) { - return "pnpm" + if (userAgent.startsWith('pnpm')) { + return 'pnpm'; } - - if (userAgent.startsWith("bun")) { - return "bun" + if (userAgent.startsWith('bun')) { + return 'bun'; } - return "npm" + return 'npm'; } export async function getPackageRunner(cwd: string) { - const packageManager = await getPackageManager(cwd) - - if (packageManager === "pnpm") return "pnpm dlx" + const packageManager = await getPackageManager(cwd); - if (packageManager === "bun") return "bunx" + if (packageManager === 'pnpm') return 'pnpm dlx'; + if (packageManager === 'bun') return 'bunx'; - return "npx" + return 'npx'; } diff --git a/packages/cli/src/utils/get-project-info.d.ts b/packages/cli/src/utils/get-project-info.d.ts new file mode 100644 index 0000000000..c79a0ec867 --- /dev/null +++ b/packages/cli/src/utils/get-project-info.d.ts @@ -0,0 +1,20 @@ +import { type Framework } from '@/src/utils/frameworks'; +import { type Config } from '@/src/utils/get-config'; +type ProjectInfo = { + aliasPrefix: string | null; + framework: Framework; + isRSC: boolean; + isSrcDir: boolean; + isTsx: boolean; + tailwindConfigFile: string | null; + tailwindCssFile: string | null; +}; +export declare function getProjectInfo(cwd: string): Promise; +export declare function getTailwindCssFile(cwd: string): Promise; +export declare function getTailwindConfigFile(cwd: string): Promise; +export declare function getTsConfigAliasPrefix(cwd: string): Promise; +export declare function isTypeScriptProject(cwd: string): Promise; +export declare function getTsConfig(): Promise; +export declare function getProjectConfig(cwd: string, defaultProjectInfo?: ProjectInfo | null): Promise<[Config, boolean] | null>; +export {}; +//# sourceMappingURL=get-project-info.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/get-project-info.d.ts.map b/packages/cli/src/utils/get-project-info.d.ts.map new file mode 100644 index 0000000000..672c01851e --- /dev/null +++ b/packages/cli/src/utils/get-project-info.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"get-project-info.d.ts","sourceRoot":"","sources":["get-project-info.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,wBAAwB,CAAC;AACpE,OAAO,EACL,KAAK,MAAM,EAIZ,MAAM,wBAAwB,CAAC;AAIhC,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAUF,wBAAsB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAoF7E;AAED,wBAAsB,kBAAkB,CAAC,GAAG,EAAE,MAAM,0BAqBnD;AAED,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,MAAM,0BAYtD;AAED,wBAAsB,sBAAsB,CAAC,GAAG,EAAE,MAAM,0BAoBvD;AAED,wBAAsB,mBAAmB,CAAC,GAAG,EAAE,MAAM,oBAQpD;AAED,wBAAsB,WAAW,iBAahC;AAED,wBAAsB,gBAAgB,CACpC,GAAG,EAAE,MAAM,EACX,kBAAkB,GAAE,WAAW,GAAG,IAAW,GAC5C,OAAO,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,CAuCnC"} \ No newline at end of file diff --git a/packages/cli/src/utils/get-project-info.js b/packages/cli/src/utils/get-project-info.js new file mode 100644 index 0000000000..30fafe31e3 --- /dev/null +++ b/packages/cli/src/utils/get-project-info.js @@ -0,0 +1,320 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.getProjectInfo = getProjectInfo; +exports.getTailwindCssFile = getTailwindCssFile; +exports.getTailwindConfigFile = getTailwindConfigFile; +exports.getTsConfigAliasPrefix = getTsConfigAliasPrefix; +exports.isTypeScriptProject = isTypeScriptProject; +exports.getTsConfig = getTsConfig; +exports.getProjectConfig = getProjectConfig; +var fast_glob_1 = __importDefault(require("fast-glob")); +var fs_extra_1 = __importDefault(require("fs-extra")); +var path_1 = __importDefault(require("path")); +var tsconfig_paths_1 = require("tsconfig-paths"); +var frameworks_1 = require("@/src/utils/frameworks"); +var get_config_1 = require("@/src/utils/get-config"); +var get_package_info_1 = require("@/src/utils/get-package-info"); +var registry_1 = require("@/src/utils/registry"); +var PROJECT_SHARED_IGNORE = [ + '**/node_modules/**', + '.next', + 'public', + 'dist', + 'build', +]; +function getProjectInfo(cwd) { + return __awaiter(this, void 0, void 0, function () { + var _a, configFiles, isSrcDir, isTsx, tailwindConfigFile, tailwindCssFile, aliasPrefix, packageJson, isUsingAppDir, type; + var _b, _c, _d, _e, _f, _g; + return __generator(this, function (_h) { + switch (_h.label) { + case 0: return [4 /*yield*/, Promise.all([ + fast_glob_1.default.glob('**/{next,vite,astro}.config.*|gatsby-config.*|composer.json', { + cwd: cwd, + deep: 3, + ignore: PROJECT_SHARED_IGNORE, + }), + fs_extra_1.default.pathExists(path_1.default.resolve(cwd, 'src')), + isTypeScriptProject(cwd), + getTailwindConfigFile(cwd), + getTailwindCssFile(cwd), + getTsConfigAliasPrefix(cwd), + (0, get_package_info_1.getPackageInfo)(cwd, false), + ])]; + case 1: + _a = _h.sent(), configFiles = _a[0], isSrcDir = _a[1], isTsx = _a[2], tailwindConfigFile = _a[3], tailwindCssFile = _a[4], aliasPrefix = _a[5], packageJson = _a[6]; + return [4 /*yield*/, fs_extra_1.default.pathExists(path_1.default.resolve(cwd, "".concat(isSrcDir ? 'src/' : '', "app")))]; + case 2: + isUsingAppDir = _h.sent(); + type = { + aliasPrefix: aliasPrefix, + framework: frameworks_1.FRAMEWORKS.manual, + isRSC: false, + isSrcDir: isSrcDir, + isTsx: isTsx, + tailwindConfigFile: tailwindConfigFile, + tailwindCssFile: tailwindCssFile, + }; + // Next.js. + if ((_b = configFiles.find(function (file) { return file.startsWith('next.config.'); })) === null || _b === void 0 ? void 0 : _b.length) { + type.framework = isUsingAppDir + ? frameworks_1.FRAMEWORKS['next-app'] + : frameworks_1.FRAMEWORKS['next-pages']; + type.isRSC = isUsingAppDir; + return [2 /*return*/, type]; + } + // Astro. + if ((_c = configFiles.find(function (file) { return file.startsWith('astro.config.'); })) === null || _c === void 0 ? void 0 : _c.length) { + type.framework = frameworks_1.FRAMEWORKS.astro; + return [2 /*return*/, type]; + } + // Gatsby. + if ((_d = configFiles.find(function (file) { return file.startsWith('gatsby-config.'); })) === null || _d === void 0 ? void 0 : _d.length) { + type.framework = frameworks_1.FRAMEWORKS.gatsby; + return [2 /*return*/, type]; + } + // Laravel. + if ((_e = configFiles.find(function (file) { return file.startsWith('composer.json'); })) === null || _e === void 0 ? void 0 : _e.length) { + type.framework = frameworks_1.FRAMEWORKS.laravel; + return [2 /*return*/, type]; + } + // Remix. + if (Object.keys((_f = packageJson === null || packageJson === void 0 ? void 0 : packageJson.dependencies) !== null && _f !== void 0 ? _f : {}).find(function (dep) { + return dep.startsWith('@remix-run/'); + })) { + type.framework = frameworks_1.FRAMEWORKS.remix; + return [2 /*return*/, type]; + } + // Vite. + // Some Remix templates also have a vite.config.* file. + // We'll assume that it got caught by the Remix check above. + if ((_g = configFiles.find(function (file) { return file.startsWith('vite.config.'); })) === null || _g === void 0 ? void 0 : _g.length) { + type.framework = frameworks_1.FRAMEWORKS.vite; + return [2 /*return*/, type]; + } + return [2 /*return*/, type]; + } + }); + }); +} +function getTailwindCssFile(cwd) { + return __awaiter(this, void 0, void 0, function () { + var files, _i, files_1, file, contents; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, fast_glob_1.default.glob(['**/*.css', '**/*.scss'], { + cwd: cwd, + deep: 5, + ignore: PROJECT_SHARED_IGNORE, + })]; + case 1: + files = _a.sent(); + if (files.length === 0) { + return [2 /*return*/, null]; + } + _i = 0, files_1 = files; + _a.label = 2; + case 2: + if (!(_i < files_1.length)) return [3 /*break*/, 5]; + file = files_1[_i]; + return [4 /*yield*/, fs_extra_1.default.readFile(path_1.default.resolve(cwd, file), 'utf8')]; + case 3: + contents = _a.sent(); + // Assume that if the file contains `@tailwind base` it's the main css file. + if (contents.includes('@tailwind base')) { + return [2 /*return*/, file]; + } + _a.label = 4; + case 4: + _i++; + return [3 /*break*/, 2]; + case 5: return [2 /*return*/, null]; + } + }); + }); +} +function getTailwindConfigFile(cwd) { + return __awaiter(this, void 0, void 0, function () { + var files; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, fast_glob_1.default.glob('tailwind.config.*', { + cwd: cwd, + deep: 3, + ignore: PROJECT_SHARED_IGNORE, + })]; + case 1: + files = _a.sent(); + if (files.length === 0) { + return [2 /*return*/, null]; + } + return [2 /*return*/, files[0]]; + } + }); + }); +} +function getTsConfigAliasPrefix(cwd) { + return __awaiter(this, void 0, void 0, function () { + var tsConfig, _i, _a, _b, alias, paths; + var _c; + return __generator(this, function (_d) { + switch (_d.label) { + case 0: return [4 /*yield*/, (0, tsconfig_paths_1.loadConfig)(cwd)]; + case 1: + tsConfig = _d.sent(); + if ((tsConfig === null || tsConfig === void 0 ? void 0 : tsConfig.resultType) === 'failed' || !(tsConfig === null || tsConfig === void 0 ? void 0 : tsConfig.paths)) { + return [2 /*return*/, null]; + } + // This assume that the first alias is the prefix. + for (_i = 0, _a = Object.entries(tsConfig.paths); _i < _a.length; _i++) { + _b = _a[_i], alias = _b[0], paths = _b[1]; + if (paths.includes('./*') || + paths.includes('./src/*') || + paths.includes('./app/*') || + paths.includes('./resources/js/*') // Laravel. + ) { + return [2 /*return*/, (_c = alias.at(0)) !== null && _c !== void 0 ? _c : null]; + } + } + return [2 /*return*/, null]; + } + }); + }); +} +function isTypeScriptProject(cwd) { + return __awaiter(this, void 0, void 0, function () { + var files; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, fast_glob_1.default.glob('tsconfig.*', { + cwd: cwd, + deep: 1, + ignore: PROJECT_SHARED_IGNORE, + })]; + case 1: + files = _a.sent(); + return [2 /*return*/, files.length > 0]; + } + }); + }); +} +function getTsConfig() { + return __awaiter(this, void 0, void 0, function () { + var tsconfigPath, tsconfig, error_1; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + tsconfigPath = path_1.default.join('tsconfig.json'); + return [4 /*yield*/, fs_extra_1.default.readJSON(tsconfigPath)]; + case 1: + tsconfig = _a.sent(); + if (!tsconfig) { + throw new Error('tsconfig.json is missing'); + } + return [2 /*return*/, tsconfig]; + case 2: + error_1 = _a.sent(); + return [2 /*return*/, null]; + case 3: return [2 /*return*/]; + } + }); + }); +} +function getProjectConfig(cwd_1) { + return __awaiter(this, arguments, void 0, function (cwd, defaultProjectInfo) { + var _a, existingConfig, projectInfo, config; + if (defaultProjectInfo === void 0) { defaultProjectInfo = null; } + return __generator(this, function (_b) { + switch (_b.label) { + case 0: return [4 /*yield*/, Promise.all([ + (0, get_config_1.getConfig)(cwd), + defaultProjectInfo + ? Promise.resolve(defaultProjectInfo) + : getProjectInfo(cwd), + ])]; + case 1: + _a = _b.sent(), existingConfig = _a[0], projectInfo = _a[1]; + if (existingConfig) { + return [2 /*return*/, [__assign(__assign({}, existingConfig), { url: registry_1.REGISTRY_URL }), false]]; + } + if (!(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.tailwindConfigFile) || !projectInfo.tailwindCssFile) { + return [2 /*return*/, null]; + } + config = { + $schema: 'https://ui.shadcn.com/schema.json', + aliases: { + components: "".concat(projectInfo.aliasPrefix, "/components"), + hooks: "".concat(projectInfo.aliasPrefix, "/hooks"), + lib: "".concat(projectInfo.aliasPrefix, "/lib"), + ui: "".concat(projectInfo.aliasPrefix, "/components/ui"), + utils: "".concat(projectInfo.aliasPrefix, "/lib/utils"), + }, + rsc: projectInfo.isRSC, + style: 'new-york', + tailwind: { + baseColor: 'zinc', + config: projectInfo.tailwindConfigFile, + css: projectInfo.tailwindCssFile, + cssVariables: true, + prefix: '', + }, + tsx: projectInfo.isTsx, + url: registry_1.REGISTRY_URL, + }; + return [4 /*yield*/, (0, get_config_1.resolveConfigPaths)(cwd, config)]; + case 2: return [2 /*return*/, [_b.sent(), true]]; + } + }); + }); +} diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts index afc605e732..d89ec1128d 100644 --- a/packages/cli/src/utils/get-project-info.ts +++ b/packages/cli/src/utils/get-project-info.ts @@ -1,34 +1,35 @@ -import path from "path" -import { FRAMEWORKS, Framework } from "@/src/utils/frameworks" +import fg from 'fast-glob'; +import fs from 'fs-extra'; +import path from 'path'; +import { loadConfig } from 'tsconfig-paths'; + +import { type Framework, FRAMEWORKS } from '@/src/utils/frameworks'; import { - Config, - RawConfig, + type Config, + type RawConfig, getConfig, resolveConfigPaths, -} from "@/src/utils/get-config" -import { getPackageInfo } from "@/src/utils/get-package-info" -import { REGISTRY_URL } from "@/src/utils/registry" -import fg from "fast-glob" -import fs from "fs-extra" -import { loadConfig } from "tsconfig-paths" +} from '@/src/utils/get-config'; +import { getPackageInfo } from '@/src/utils/get-package-info'; +import { REGISTRY_URL } from '@/src/utils/registry'; type ProjectInfo = { - framework: Framework - isSrcDir: boolean - isRSC: boolean - isTsx: boolean - tailwindConfigFile: string | null - tailwindCssFile: string | null - aliasPrefix: string | null -} + aliasPrefix: string | null; + framework: Framework; + isRSC: boolean; + isSrcDir: boolean; + isTsx: boolean; + tailwindConfigFile: string | null; + tailwindCssFile: string | null; +}; const PROJECT_SHARED_IGNORE = [ - "**/node_modules/**", - ".next", - "public", - "dist", - "build", -] + '**/node_modules/**', + '.next', + 'public', + 'dist', + 'build', +]; export async function getProjectInfo(cwd: string): Promise { const [ @@ -40,161 +41,163 @@ export async function getProjectInfo(cwd: string): Promise { aliasPrefix, packageJson, ] = await Promise.all([ - fg.glob("**/{next,vite,astro}.config.*|gatsby-config.*|composer.json", { + fg.glob('**/{next,vite,astro}.config.*|gatsby-config.*|composer.json', { cwd, deep: 3, ignore: PROJECT_SHARED_IGNORE, }), - fs.pathExists(path.resolve(cwd, "src")), + fs.pathExists(path.resolve(cwd, 'src')), isTypeScriptProject(cwd), getTailwindConfigFile(cwd), getTailwindCssFile(cwd), getTsConfigAliasPrefix(cwd), getPackageInfo(cwd, false), - ]) + ]); const isUsingAppDir = await fs.pathExists( - path.resolve(cwd, `${isSrcDir ? "src/" : ""}app`) - ) + path.resolve(cwd, `${isSrcDir ? 'src/' : ''}app`) + ); const type: ProjectInfo = { - framework: FRAMEWORKS["manual"], - isSrcDir, + aliasPrefix, + framework: FRAMEWORKS.manual, isRSC: false, + isSrcDir, isTsx, tailwindConfigFile, tailwindCssFile, - aliasPrefix, - } + }; // Next.js. - if (configFiles.find((file) => file.startsWith("next.config."))?.length) { + if (configFiles.find((file) => file.startsWith('next.config.'))?.length) { type.framework = isUsingAppDir - ? FRAMEWORKS["next-app"] - : FRAMEWORKS["next-pages"] - type.isRSC = isUsingAppDir - return type - } + ? FRAMEWORKS['next-app'] + : FRAMEWORKS['next-pages']; + type.isRSC = isUsingAppDir; - // Astro. - if (configFiles.find((file) => file.startsWith("astro.config."))?.length) { - type.framework = FRAMEWORKS["astro"] - return type + return type; } + // Astro. + if (configFiles.find((file) => file.startsWith('astro.config.'))?.length) { + type.framework = FRAMEWORKS.astro; - // Gatsby. - if (configFiles.find((file) => file.startsWith("gatsby-config."))?.length) { - type.framework = FRAMEWORKS["gatsby"] - return type + return type; } + // Gatsby. + if (configFiles.find((file) => file.startsWith('gatsby-config.'))?.length) { + type.framework = FRAMEWORKS.gatsby; - // Laravel. - if (configFiles.find((file) => file.startsWith("composer.json"))?.length) { - type.framework = FRAMEWORKS["laravel"] - return type + return type; } + // Laravel. + if (configFiles.find((file) => file.startsWith('composer.json'))?.length) { + type.framework = FRAMEWORKS.laravel; + return type; + } // Remix. if ( Object.keys(packageJson?.dependencies ?? {}).find((dep) => - dep.startsWith("@remix-run/") + dep.startsWith('@remix-run/') ) ) { - type.framework = FRAMEWORKS["remix"] - return type - } + type.framework = FRAMEWORKS.remix; + return type; + } // Vite. // Some Remix templates also have a vite.config.* file. // We'll assume that it got caught by the Remix check above. - if (configFiles.find((file) => file.startsWith("vite.config."))?.length) { - type.framework = FRAMEWORKS["vite"] - return type + if (configFiles.find((file) => file.startsWith('vite.config.'))?.length) { + type.framework = FRAMEWORKS.vite; + + return type; } - return type + return type; } export async function getTailwindCssFile(cwd: string) { - const files = await fg.glob(["**/*.css", "**/*.scss"], { + const files = await fg.glob(['**/*.css', '**/*.scss'], { cwd, deep: 5, ignore: PROJECT_SHARED_IGNORE, - }) + }); - if (!files.length) { - return null + if (files.length === 0) { + return null; } for (const file of files) { - const contents = await fs.readFile(path.resolve(cwd, file), "utf8") + const contents = await fs.readFile(path.resolve(cwd, file), 'utf8'); + // Assume that if the file contains `@tailwind base` it's the main css file. - if (contents.includes("@tailwind base")) { - return file + if (contents.includes('@tailwind base')) { + return file; } } - return null + return null; } export async function getTailwindConfigFile(cwd: string) { - const files = await fg.glob("tailwind.config.*", { + const files = await fg.glob('tailwind.config.*', { cwd, deep: 3, ignore: PROJECT_SHARED_IGNORE, - }) + }); - if (!files.length) { - return null + if (files.length === 0) { + return null; } - return files[0] + return files[0]; } export async function getTsConfigAliasPrefix(cwd: string) { - const tsConfig = await loadConfig(cwd) + const tsConfig = await loadConfig(cwd); - if (tsConfig?.resultType === "failed" || !tsConfig?.paths) { - return null + if (tsConfig?.resultType === 'failed' || !tsConfig?.paths) { + return null; } // This assume that the first alias is the prefix. for (const [alias, paths] of Object.entries(tsConfig.paths)) { if ( - paths.includes("./*") || - paths.includes("./src/*") || - paths.includes("./app/*") || - paths.includes("./resources/js/*") // Laravel. + paths.includes('./*') || + paths.includes('./src/*') || + paths.includes('./app/*') || + paths.includes('./resources/js/*') // Laravel. ) { - return alias.at(0) ?? null + return alias.at(0) ?? null; } } - return null + return null; } export async function isTypeScriptProject(cwd: string) { - const files = await fg.glob("tsconfig.*", { + const files = await fg.glob('tsconfig.*', { cwd, deep: 1, ignore: PROJECT_SHARED_IGNORE, - }) + }); - return files.length > 0 + return files.length > 0; } export async function getTsConfig() { try { - const tsconfigPath = path.join("tsconfig.json") - const tsconfig = await fs.readJSON(tsconfigPath) + const tsconfigPath = path.join('tsconfig.json'); + const tsconfig = await fs.readJSON(tsconfigPath); if (!tsconfig) { - throw new Error("tsconfig.json is missing") + throw new Error('tsconfig.json is missing'); } - return tsconfig + return tsconfig; } catch (error) { - return null + return null; } } @@ -205,44 +208,39 @@ export async function getProjectConfig( // Check for existing component config. const [existingConfig, projectInfo] = await Promise.all([ getConfig(cwd), - !defaultProjectInfo - ? getProjectInfo(cwd) - : Promise.resolve(defaultProjectInfo), - ]) + defaultProjectInfo + ? Promise.resolve(defaultProjectInfo) + : getProjectInfo(cwd), + ]); if (existingConfig) { - return [{ ...existingConfig, url: REGISTRY_URL }, false] + return [{ ...existingConfig, url: REGISTRY_URL }, false]; } - - if ( - !projectInfo || - !projectInfo.tailwindConfigFile || - !projectInfo.tailwindCssFile - ) { - return null + if (!projectInfo?.tailwindConfigFile || !projectInfo.tailwindCssFile) { + return null; } const config: RawConfig = { - $schema: "https://ui.shadcn.com/schema.json", - rsc: projectInfo.isRSC, - tsx: projectInfo.isTsx, - style: "new-york", - tailwind: { - config: projectInfo.tailwindConfigFile, - baseColor: "zinc", - css: projectInfo.tailwindCssFile, - cssVariables: true, - prefix: "", - }, + $schema: 'https://ui.shadcn.com/schema.json', aliases: { components: `${projectInfo.aliasPrefix}/components`, - ui: `${projectInfo.aliasPrefix}/components/ui`, hooks: `${projectInfo.aliasPrefix}/hooks`, lib: `${projectInfo.aliasPrefix}/lib`, + ui: `${projectInfo.aliasPrefix}/components/ui`, utils: `${projectInfo.aliasPrefix}/lib/utils`, }, + rsc: projectInfo.isRSC, + style: 'new-york', + tailwind: { + baseColor: 'zinc', + config: projectInfo.tailwindConfigFile, + css: projectInfo.tailwindCssFile, + cssVariables: true, + prefix: '', + }, + tsx: projectInfo.isTsx, url: REGISTRY_URL, - } + }; - return [await resolveConfigPaths(cwd, config), true] as any + return [await resolveConfigPaths(cwd, config), true] as any; } diff --git a/packages/cli/src/utils/handle-error.d.ts b/packages/cli/src/utils/handle-error.d.ts new file mode 100644 index 0000000000..ad32fa99df --- /dev/null +++ b/packages/cli/src/utils/handle-error.d.ts @@ -0,0 +1,2 @@ +export declare function handleError(error: unknown): void; +//# sourceMappingURL=handle-error.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/handle-error.d.ts.map b/packages/cli/src/utils/handle-error.d.ts.map new file mode 100644 index 0000000000..01fed79cbd --- /dev/null +++ b/packages/cli/src/utils/handle-error.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"handle-error.d.ts","sourceRoot":"","sources":["handle-error.ts"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,QA8BzC"} \ No newline at end of file diff --git a/packages/cli/src/utils/handle-error.js b/packages/cli/src/utils/handle-error.js new file mode 100644 index 0000000000..86545d8bcf --- /dev/null +++ b/packages/cli/src/utils/handle-error.js @@ -0,0 +1,32 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.handleError = handleError; +var zod_1 = require("zod"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +function handleError(error) { + logger_1.logger.error("Something went wrong. Please check the error below for more details."); + logger_1.logger.error("If the problem persists, please open an issue on GitHub."); + logger_1.logger.error(''); + if (typeof error === 'string') { + logger_1.logger.error(error); + logger_1.logger.break(); + process.exit(1); + } + if (error instanceof zod_1.z.ZodError) { + logger_1.logger.error('Validation failed:'); + for (var _i = 0, _a = Object.entries(error.flatten().fieldErrors); _i < _a.length; _i++) { + var _b = _a[_i], key = _b[0], value = _b[1]; + logger_1.logger.error("- ".concat(highlighter_1.highlighter.info(key), ": ").concat(value)); + } + logger_1.logger.break(); + process.exit(1); + } + if (error instanceof Error) { + logger_1.logger.error(error.message); + logger_1.logger.break(); + process.exit(1); + } + logger_1.logger.break(); + process.exit(1); +} diff --git a/packages/cli/src/utils/handle-error.ts b/packages/cli/src/utils/handle-error.ts index 30244ec076..192217d303 100644 --- a/packages/cli/src/utils/handle-error.ts +++ b/packages/cli/src/utils/handle-error.ts @@ -1,34 +1,36 @@ -import { highlighter } from "@/src/utils/highlighter" -import { logger } from "@/src/utils/logger" -import { z } from "zod" +import { z } from 'zod'; + +import { highlighter } from '@/src/utils/highlighter'; +import { logger } from '@/src/utils/logger'; export function handleError(error: unknown) { logger.error( `Something went wrong. Please check the error below for more details.` - ) - logger.error(`If the problem persists, please open an issue on GitHub.`) - logger.error("") - if (typeof error === "string") { - logger.error(error) - logger.break() - process.exit(1) - } + ); + logger.error(`If the problem persists, please open an issue on GitHub.`); + logger.error(''); + if (typeof error === 'string') { + logger.error(error); + logger.break(); + process.exit(1); + } if (error instanceof z.ZodError) { - logger.error("Validation failed:") + logger.error('Validation failed:'); + for (const [key, value] of Object.entries(error.flatten().fieldErrors)) { - logger.error(`- ${highlighter.info(key)}: ${value}`) + logger.error(`- ${highlighter.info(key)}: ${value}`); } - logger.break() - process.exit(1) - } + logger.break(); + process.exit(1); + } if (error instanceof Error) { - logger.error(error.message) - logger.break() - process.exit(1) + logger.error(error.message); + logger.break(); + process.exit(1); } - logger.break() - process.exit(1) + logger.break(); + process.exit(1); } diff --git a/packages/cli/src/utils/highlighter.d.ts b/packages/cli/src/utils/highlighter.d.ts new file mode 100644 index 0000000000..df2ef21e13 --- /dev/null +++ b/packages/cli/src/utils/highlighter.d.ts @@ -0,0 +1,7 @@ +export declare const highlighter: { + error: typeof import("kleur/colors").print; + warn: typeof import("kleur/colors").print; + info: typeof import("kleur/colors").print; + success: typeof import("kleur/colors").print; +}; +//# sourceMappingURL=highlighter.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/highlighter.d.ts.map b/packages/cli/src/utils/highlighter.d.ts.map new file mode 100644 index 0000000000..21c5e88ec7 --- /dev/null +++ b/packages/cli/src/utils/highlighter.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"highlighter.d.ts","sourceRoot":"","sources":["highlighter.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;CAKvB,CAAA"} \ No newline at end of file diff --git a/packages/cli/src/utils/highlighter.js b/packages/cli/src/utils/highlighter.js new file mode 100644 index 0000000000..63a62099e0 --- /dev/null +++ b/packages/cli/src/utils/highlighter.js @@ -0,0 +1,10 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.highlighter = void 0; +var colors_1 = require("kleur/colors"); +exports.highlighter = { + error: colors_1.red, + warn: colors_1.yellow, + info: colors_1.cyan, + success: colors_1.green, +}; diff --git a/packages/cli/src/utils/is-different.d.ts b/packages/cli/src/utils/is-different.d.ts new file mode 100644 index 0000000000..d4116d7ce2 --- /dev/null +++ b/packages/cli/src/utils/is-different.d.ts @@ -0,0 +1,3 @@ +export declare function isDifferent(newValue: any, defaultValue: any): boolean; +export declare function getDifferences(newConfig: any, defaultConfig: any): any; +//# sourceMappingURL=is-different.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/is-different.d.ts.map b/packages/cli/src/utils/is-different.d.ts.map new file mode 100644 index 0000000000..f228cbe4ca --- /dev/null +++ b/packages/cli/src/utils/is-different.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"is-different.d.ts","sourceRoot":"","sources":["is-different.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,QAAQ,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,GAAG,OAAO,CAkBrE;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,GAAG,GAAG,CAoBtE"} \ No newline at end of file diff --git a/packages/cli/src/utils/is-different.js b/packages/cli/src/utils/is-different.js new file mode 100644 index 0000000000..902d8e7fca --- /dev/null +++ b/packages/cli/src/utils/is-different.js @@ -0,0 +1,40 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.isDifferent = isDifferent; +exports.getDifferences = getDifferences; +function isDifferent(newValue, defaultValue) { + if (typeof newValue === "object" && newValue !== null) { + if (typeof defaultValue !== "object" || defaultValue === null) { + return true; + } + for (var key in newValue) { + if (isDifferent(newValue[key], defaultValue[key])) { + return true; + } + } + for (var key in defaultValue) { + if (!(key in newValue)) { + return true; + } + } + return false; + } + return newValue !== defaultValue; +} +function getDifferences(newConfig, defaultConfig) { + var differences = {}; + for (var key in newConfig) { + if (isDifferent(newConfig[key], defaultConfig[key])) { + if (typeof newConfig[key] === "object" && newConfig[key] !== null) { + differences[key] = getDifferences(newConfig[key], defaultConfig[key] || {}); + if (Object.keys(differences[key]).length === 0) { + delete differences[key]; + } + } + else { + differences[key] = newConfig[key]; + } + } + } + return differences; +} diff --git a/packages/cli/src/utils/logger.d.ts b/packages/cli/src/utils/logger.d.ts new file mode 100644 index 0000000000..de3eccfabb --- /dev/null +++ b/packages/cli/src/utils/logger.d.ts @@ -0,0 +1,9 @@ +export declare const logger: { + break(): void; + error(...args: unknown[]): void; + info(...args: unknown[]): void; + log(...args: unknown[]): void; + success(...args: unknown[]): void; + warn(...args: unknown[]): void; +}; +//# sourceMappingURL=logger.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/logger.d.ts.map b/packages/cli/src/utils/logger.d.ts.map new file mode 100644 index 0000000000..45cee77b38 --- /dev/null +++ b/packages/cli/src/utils/logger.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["logger.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;mBAIF,OAAO,EAAE;kBAGV,OAAO,EAAE;iBAGV,OAAO,EAAE;qBAGL,OAAO,EAAE;kBAGZ,OAAO,EAAE;CAGxB,CAAC"} \ No newline at end of file diff --git a/packages/cli/src/utils/logger.js b/packages/cli/src/utils/logger.js new file mode 100644 index 0000000000..89243d96eb --- /dev/null +++ b/packages/cli/src/utils/logger.js @@ -0,0 +1,44 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.logger = void 0; +var highlighter_1 = require("@/src/utils/highlighter"); +exports.logger = { + break: function () { + console.log(''); + }, + error: function () { + var args = []; + for (var _i = 0; _i < arguments.length; _i++) { + args[_i] = arguments[_i]; + } + console.log(highlighter_1.highlighter.error(args.join(' '))); + }, + info: function () { + var args = []; + for (var _i = 0; _i < arguments.length; _i++) { + args[_i] = arguments[_i]; + } + console.log(highlighter_1.highlighter.info(args.join(' '))); + }, + log: function () { + var args = []; + for (var _i = 0; _i < arguments.length; _i++) { + args[_i] = arguments[_i]; + } + console.log(args.join(' ')); + }, + success: function () { + var args = []; + for (var _i = 0; _i < arguments.length; _i++) { + args[_i] = arguments[_i]; + } + console.log(highlighter_1.highlighter.success(args.join(' '))); + }, + warn: function () { + var args = []; + for (var _i = 0; _i < arguments.length; _i++) { + args[_i] = arguments[_i]; + } + console.log(highlighter_1.highlighter.warn(args.join(' '))); + }, +}; diff --git a/packages/cli/src/utils/registry/index.d.ts b/packages/cli/src/utils/registry/index.d.ts new file mode 100644 index 0000000000..162d662c1f --- /dev/null +++ b/packages/cli/src/utils/registry/index.d.ts @@ -0,0 +1,239 @@ +import type { Config } from "@/src/utils/get-config"; +import { z } from "zod"; +import { type registryItemFileSchema, registryIndexSchema, registryItemSchema } from "@/src/utils/registry/schema"; +export declare const REGISTRY_URL: string; +export declare const REGISTRY_MAP: { + magic: string; + plate: string; + shadcn: string; +}; +export declare function getRegistryIndex(registryUrl?: string): Promise<{ + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: (string | { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + })[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +}[] | undefined>; +export declare function getRegistryStyles(registryUrl?: string): Promise<{ + name: string; + label: string; +}[]>; +export declare function getRegistryItem(name: string, style: string, registryUrl?: string): Promise<{ + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +} | null>; +export declare function getRegistryBaseColors(): Promise<{ + label: string; + name: string; +}[]>; +export declare function getRegistryBaseColor(baseColor: string): Promise<{ + cssVars: { + light: Record; + dark: Record; + }; + inlineColors: { + light: Record; + dark: Record; + }; + inlineColorsTemplate: string; + cssVarsTemplate: string; +} | undefined>; +export declare function resolveTree(index: z.infer, names: string[]): Promise<{ + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: (string | { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + })[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +}[]>; +export declare function fetchTree(style: string, tree: z.infer): Promise<{ + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: (string | { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + })[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +}[] | undefined>; +export declare function getItemTargetPath(config: Config, item: Pick, "type">, override?: string): Promise; +export declare function fetchRegistry(paths: string[], registryUrl?: string, ignoreErrors?: boolean): Promise; +export declare function getRegistryItemFileTargetPath(file: z.infer, config: Config, override?: string): string; +export declare function registryResolveItemsTree(names: z.infer["name"][], config: Config): Promise<{ + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + files?: { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + docs?: string | undefined; +} | null>; +export declare function registryGetTheme(name: string, config: Config): Promise<{ + cssVars: { + dark: {}; + light: { + radius: string; + }; + }; + name: string; + tailwind: { + config: { + theme: { + extend: { + borderRadius: { + lg: string; + md: string; + sm: string; + }; + colors: {}; + }; + }; + }; + }; + type: "registry:theme"; +} | null>; +export declare function getDefaultConfig(defaultConfig: Config, registryUrl?: string): Promise<{ + aliases: { + components: string; + utils: string; + hooks?: string | undefined; + lib?: string | undefined; + ui?: string | undefined; + }; + rsc: boolean; + style: string; + tailwind: { + baseColor: string; + config: string; + css: string; + cssVariables: boolean; + prefix?: string | undefined; + }; + tsx: boolean; + resolvedPaths: { + components: string; + hooks: string; + lib: string; + ui: string; + utils: string; + cwd: string; + tailwindConfig: string; + tailwindCss: string; + }; + url?: string | undefined; + $schema?: string | undefined; + name?: string | undefined; + registries?: Record | undefined; +}>; +//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/registry/index.d.ts.map b/packages/cli/src/utils/registry/index.d.ts.map new file mode 100644 index 0000000000..ca81133224 --- /dev/null +++ b/packages/cli/src/utils/registry/index.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAMpD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAKvB,OAAO,EACL,KAAK,sBAAsB,EAE3B,mBAAmB,EACnB,kBAAkB,EAGnB,MAAM,6BAA6B,CAAA;AAIpC,eAAO,MAAM,YAAY,QAC8B,CAAA;AAErD,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAMJ,wBAAsB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;iBAS1D;AAED,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM;;;KAU3D;AAED,wBAAsB,eAAe,CACnC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;UAerB;AAED,wBAAsB,qBAAqB;;;KAuB1C;AAED,wBAAsB,oBAAoB,CAAC,SAAS,EAAE,MAAM;;;;;;;;;;;eAQ3D;AAED,wBAAsB,WAAW,CAC/B,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,EAC1C,KAAK,EAAE,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;KAuBhB;AAED,wBAAsB,SAAS,CAC7B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;iBAS1C;AAED,wBAAsB,iBAAiB,CACrC,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,CAAC,EACtD,QAAQ,CAAC,EAAE,MAAM,0BAmBlB;AAED,wBAAsB,aAAa,CACjC,KAAK,EAAE,MAAM,EAAE,EACf,WAAW,CAAC,EAAE,MAAM,EACpB,YAAY,CAAC,EAAE,OAAO,sBA+DvB;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,EAC5C,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,UA6BlB;AAED,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,EAAE,EACnD,MAAM,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;UA4Ef;AA2CD,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;UAkDlE;AA0BD,wBAAsB,gBAAgB,CACpC,aAAa,EAAE,MAAM,EACrB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwBrB"} \ No newline at end of file diff --git a/packages/cli/src/utils/registry/index.js b/packages/cli/src/utils/registry/index.js new file mode 100644 index 0000000000..8991f7dec8 --- /dev/null +++ b/packages/cli/src/utils/registry/index.js @@ -0,0 +1,594 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +var _a; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.REGISTRY_MAP = exports.REGISTRY_URL = void 0; +exports.getRegistryIndex = getRegistryIndex; +exports.getRegistryStyles = getRegistryStyles; +exports.getRegistryItem = getRegistryItem; +exports.getRegistryBaseColors = getRegistryBaseColors; +exports.getRegistryBaseColor = getRegistryBaseColor; +exports.resolveTree = resolveTree; +exports.fetchTree = fetchTree; +exports.getItemTargetPath = getItemTargetPath; +exports.fetchRegistry = fetchRegistry; +exports.getRegistryItemFileTargetPath = getRegistryItemFileTargetPath; +exports.registryResolveItemsTree = registryResolveItemsTree; +exports.registryGetTheme = registryGetTheme; +exports.getDefaultConfig = getDefaultConfig; +var deepmerge_1 = __importDefault(require("deepmerge")); +var https_proxy_agent_1 = require("https-proxy-agent"); +var node_fetch_1 = __importDefault(require("node-fetch")); +var path_1 = __importDefault(require("path")); +var zod_1 = require("zod"); +var handle_error_1 = require("@/src/utils/handle-error"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var schema_1 = require("@/src/utils/registry/schema"); +var update_tailwind_config_1 = require("@/src/utils/updaters/update-tailwind-config"); +exports.REGISTRY_URL = (_a = process.env.REGISTRY_URL) !== null && _a !== void 0 ? _a : "https://ui.shadcn.com/r"; +exports.REGISTRY_MAP = { + magic: 'https://magicui.design/r', + plate: 'https://platejs.org/r', + shadcn: exports.REGISTRY_URL, +}; +var agent = process.env.https_proxy + ? new https_proxy_agent_1.HttpsProxyAgent(process.env.https_proxy) + : undefined; +function getRegistryIndex(registryUrl) { + return __awaiter(this, void 0, void 0, function () { + var result, error_1; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + return [4 /*yield*/, fetchRegistry(['index.json'], registryUrl)]; + case 1: + result = (_a.sent())[0]; + return [2 /*return*/, schema_1.registryIndexSchema.parse(result)]; + case 2: + error_1 = _a.sent(); + logger_1.logger.error("\n"); + (0, handle_error_1.handleError)(error_1); + return [3 /*break*/, 3]; + case 3: return [2 /*return*/]; + } + }); + }); +} +function getRegistryStyles(registryUrl) { + return __awaiter(this, void 0, void 0, function () { + var result, error_2; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + return [4 /*yield*/, fetchRegistry(["styles/index.json"], registryUrl)]; + case 1: + result = (_a.sent())[0]; + return [2 /*return*/, schema_1.stylesSchema.parse(result)]; + case 2: + error_2 = _a.sent(); + logger_1.logger.error("\n"); + (0, handle_error_1.handleError)(error_2); + return [2 /*return*/, []]; + case 3: return [2 /*return*/]; + } + }); + }); +} +function getRegistryItem(name, style, registryUrl) { + return __awaiter(this, void 0, void 0, function () { + var result, error_3; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + return [4 /*yield*/, fetchRegistry([isUrl(name) ? name : "styles/".concat(style, "/").concat(name, ".json")], registryUrl, true)]; + case 1: + result = (_a.sent())[0]; + return [2 /*return*/, schema_1.registryItemSchema.parse(result)]; + case 2: + error_3 = _a.sent(); + logger_1.logger.break(); + (0, handle_error_1.handleError)(error_3); + return [2 /*return*/, null]; + case 3: return [2 /*return*/]; + } + }); + }); +} +function getRegistryBaseColors() { + return __awaiter(this, void 0, void 0, function () { + return __generator(this, function (_a) { + return [2 /*return*/, [ + { + label: "Neutral", + name: "neutral", + }, + { + label: "Gray", + name: "gray", + }, + { + label: "Zinc", + name: "zinc", + }, + { + label: "Stone", + name: "stone", + }, + { + label: "Slate", + name: "slate", + }, + ]]; + }); + }); +} +function getRegistryBaseColor(baseColor) { + return __awaiter(this, void 0, void 0, function () { + var result, error_4; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + return [4 /*yield*/, fetchRegistry(["colors/".concat(baseColor, ".json")])]; + case 1: + result = (_a.sent())[0]; + return [2 /*return*/, schema_1.registryBaseColorSchema.parse(result)]; + case 2: + error_4 = _a.sent(); + (0, handle_error_1.handleError)(error_4); + return [3 /*break*/, 3]; + case 3: return [2 /*return*/]; + } + }); + }); +} +function resolveTree(index, names) { + return __awaiter(this, void 0, void 0, function () { + var tree, _loop_1, _i, names_1, name_1; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + tree = []; + _loop_1 = function (name_1) { + var entry, dependencies; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: + entry = index.find(function (entry) { return entry.name === name_1; }); + if (!entry) { + return [2 /*return*/, "continue"]; + } + tree.push(entry); + if (!entry.registryDependencies) return [3 /*break*/, 2]; + return [4 /*yield*/, resolveTree(index, entry.registryDependencies)]; + case 1: + dependencies = _b.sent(); + tree.push.apply(tree, dependencies); + _b.label = 2; + case 2: return [2 /*return*/]; + } + }); + }; + _i = 0, names_1 = names; + _a.label = 1; + case 1: + if (!(_i < names_1.length)) return [3 /*break*/, 4]; + name_1 = names_1[_i]; + return [5 /*yield**/, _loop_1(name_1)]; + case 2: + _a.sent(); + _a.label = 3; + case 3: + _i++; + return [3 /*break*/, 1]; + case 4: return [2 /*return*/, tree.filter(function (component, index, self) { + return self.findIndex(function (c) { return c.name === component.name; }) === index; + })]; + } + }); + }); +} +function fetchTree(style, tree) { + return __awaiter(this, void 0, void 0, function () { + var paths, result, error_5; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + paths = tree.map(function (item) { return "styles/".concat(style, "/").concat(item.name, ".json"); }); + return [4 /*yield*/, fetchRegistry(paths)]; + case 1: + result = _a.sent(); + return [2 /*return*/, schema_1.registryIndexSchema.parse(result)]; + case 2: + error_5 = _a.sent(); + (0, handle_error_1.handleError)(error_5); + return [3 /*break*/, 3]; + case 3: return [2 /*return*/]; + } + }); + }); +} +function getItemTargetPath(config, item, override) { + return __awaiter(this, void 0, void 0, function () { + var _a, parent, type; + var _b, _c, _d; + return __generator(this, function (_e) { + if (override) { + return [2 /*return*/, override]; + } + if (item.type === "registry:ui") { + return [2 /*return*/, (_b = config.resolvedPaths.ui) !== null && _b !== void 0 ? _b : config.resolvedPaths.components]; + } + _a = (_d = (_c = item.type) === null || _c === void 0 ? void 0 : _c.split(":")) !== null && _d !== void 0 ? _d : [], parent = _a[0], type = _a[1]; + if (!(parent in config.resolvedPaths)) { + return [2 /*return*/, null]; + } + return [2 /*return*/, path_1.default.join(config.resolvedPaths[parent], type)]; + }); + }); +} +function fetchRegistry(paths, registryUrl, ignoreErrors) { + return __awaiter(this, void 0, void 0, function () { + var results, error_6; + var _this = this; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 2, , 3]); + return [4 /*yield*/, Promise.all(paths.map(function (path) { return __awaiter(_this, void 0, void 0, function () { + var url, response, errorMessages, result, message; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + url = getRegistryUrl(path, registryUrl); + return [4 /*yield*/, (0, node_fetch_1.default)(url, { agent: agent })]; + case 1: + response = _a.sent(); + if (!!response.ok) return [3 /*break*/, 3]; + errorMessages = { + 400: "Bad request", + 401: "Unauthorized", + 403: "Forbidden", + 404: "Not found", + 500: "Internal server error", + }; + if (response.status === 401) { + throw new Error("You are not authorized to access the component at ".concat(highlighter_1.highlighter.info(url), ".\nIf this is a remote registry, you may need to authenticate.")); + } + if (response.status === 404) { + throw new Error("The component at ".concat(highlighter_1.highlighter.info(url), " was not found.\nIt may not exist at the registry. Please make sure it is a valid component.")); + } + if (response.status === 403) { + throw new Error("You do not have access to the component at ".concat(highlighter_1.highlighter.info(url), ".\nIf this is a remote registry, you may need to authenticate or a token.")); + } + return [4 /*yield*/, response.json()]; + case 2: + result = _a.sent(); + message = result && typeof result === "object" && "error" in result + ? result.error + : response.statusText || errorMessages[response.status]; + throw new Error("Failed to fetch from ".concat(highlighter_1.highlighter.info(url), ".\n").concat(message)); + case 3: return [2 /*return*/, response.json()]; + } + }); + }); }))]; + case 1: + results = _a.sent(); + return [2 /*return*/, results]; + case 2: + error_6 = _a.sent(); + if (!ignoreErrors) { + logger_1.logger.error("\n"); + (0, handle_error_1.handleError)(error_6); + } + return [2 /*return*/, []]; + case 3: return [2 /*return*/]; + } + }); + }); +} +function getRegistryItemFileTargetPath(file, config, override) { + if (override) { + return override; + } + if (file.type === "registry:ui") { + return config.resolvedPaths.ui; + } + if (file.type === "registry:lib") { + return config.resolvedPaths.lib; + } + if (file.type === "registry:block" || file.type === "registry:component") { + return config.resolvedPaths.components; + } + if (file.type === "registry:hook") { + return config.resolvedPaths.hooks; + } + // TODO: we put this in components for now. + // We should move this to pages as per framework. + if (file.type === "registry:page") { + return config.resolvedPaths.components; + } + return config.resolvedPaths.components; +} +function registryResolveItemsTree(names, config) { + return __awaiter(this, void 0, void 0, function () { + var index, registryDependencies, _i, names_2, name_2, itemRegistryDependencies, uniqueRegistryDependencies, result, payload, theme, tailwind_1, cssVars_1, docs_1, error_7; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + _a.trys.push([0, 9, , 10]); + return [4 /*yield*/, getRegistryIndex(config.url)]; + case 1: + index = _a.sent(); + if (!index) { + return [2 /*return*/, null]; + } + // If we're resolving the index, we want it to go first. + if (names.includes("index")) { + names.unshift("index"); + } + registryDependencies = []; + _i = 0, names_2 = names; + _a.label = 2; + case 2: + if (!(_i < names_2.length)) return [3 /*break*/, 5]; + name_2 = names_2[_i]; + return [4 /*yield*/, resolveRegistryDependencies(name_2, config)]; + case 3: + itemRegistryDependencies = _a.sent(); + registryDependencies.push.apply(registryDependencies, itemRegistryDependencies); + _a.label = 4; + case 4: + _i++; + return [3 /*break*/, 2]; + case 5: + uniqueRegistryDependencies = Array.from(new Set(registryDependencies)); + return [4 /*yield*/, fetchRegistry(uniqueRegistryDependencies, config.url)]; + case 6: + result = _a.sent(); + payload = zod_1.z.array(schema_1.registryItemSchema).parse(result); + if (!payload) { + return [2 /*return*/, null]; + } + if (!(names.includes("index") && config.tailwind.baseColor)) return [3 /*break*/, 8]; + return [4 /*yield*/, registryGetTheme(config.tailwind.baseColor, config)]; + case 7: + theme = _a.sent(); + if (theme) { + payload.unshift(theme); + } + _a.label = 8; + case 8: + tailwind_1 = {}; + payload.forEach(function (item) { + var _a; + tailwind_1 = (0, deepmerge_1.default)(tailwind_1, (_a = item.tailwind) !== null && _a !== void 0 ? _a : {}); + }); + cssVars_1 = {}; + payload.forEach(function (item) { + var _a; + cssVars_1 = (0, deepmerge_1.default)(cssVars_1, (_a = item.cssVars) !== null && _a !== void 0 ? _a : {}); + }); + docs_1 = ""; + payload.forEach(function (item) { + if (item.docs) { + docs_1 += "".concat(item.docs, "\n"); + } + }); + return [2 /*return*/, schema_1.registryResolvedItemsTreeSchema.parse({ + cssVars: cssVars_1, + dependencies: deepmerge_1.default.all(payload.map(function (item) { var _a; return (_a = item.dependencies) !== null && _a !== void 0 ? _a : []; })), + devDependencies: deepmerge_1.default.all(payload.map(function (item) { var _a; return (_a = item.devDependencies) !== null && _a !== void 0 ? _a : []; })), + docs: docs_1, + files: deepmerge_1.default.all(payload.map(function (item) { var _a; return (_a = item.files) !== null && _a !== void 0 ? _a : []; })), + tailwind: tailwind_1, + })]; + case 9: + error_7 = _a.sent(); + (0, handle_error_1.handleError)(error_7); + return [2 /*return*/, null]; + case 10: return [2 /*return*/]; + } + }); + }); +} +function resolveRegistryDependencies(url, config) { + return __awaiter(this, void 0, void 0, function () { + function resolveDependencies(itemUrl) { + return __awaiter(this, void 0, void 0, function () { + var url, result, item, _i, _a, dependency, error_8; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: + url = getRegistryUrl(isUrl(itemUrl) ? itemUrl : "styles/".concat(config.style, "/").concat(itemUrl, ".json"), config.url); + if (visited.has(url)) { + return [2 /*return*/]; + } + visited.add(url); + _b.label = 1; + case 1: + _b.trys.push([1, 7, , 8]); + return [4 /*yield*/, fetchRegistry([url], config.url)]; + case 2: + result = (_b.sent())[0]; + item = schema_1.registryItemSchema.parse(result); + payload.push(url); + if (!item.registryDependencies) return [3 /*break*/, 6]; + _i = 0, _a = item.registryDependencies; + _b.label = 3; + case 3: + if (!(_i < _a.length)) return [3 /*break*/, 6]; + dependency = _a[_i]; + return [4 /*yield*/, resolveDependencies(dependency)]; + case 4: + _b.sent(); + _b.label = 5; + case 5: + _i++; + return [3 /*break*/, 3]; + case 6: return [3 /*break*/, 8]; + case 7: + error_8 = _b.sent(); + console.error("Error fetching or parsing registry item at ".concat(itemUrl, ":"), error_8); + return [3 /*break*/, 8]; + case 8: return [2 /*return*/]; + } + }); + }); + } + var visited, payload; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + visited = new Set(); + payload = []; + return [4 /*yield*/, resolveDependencies(url)]; + case 1: + _a.sent(); + return [2 /*return*/, Array.from(new Set(payload))]; + } + }); + }); +} +function registryGetTheme(name, config) { + return __awaiter(this, void 0, void 0, function () { + var baseColor, theme; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, getRegistryBaseColor(name)]; + case 1: + baseColor = _a.sent(); + if (!baseColor) { + return [2 /*return*/, null]; + } + theme = { + cssVars: { + dark: {}, + light: { + radius: "0.5rem", + }, + }, + name: name, + tailwind: { + config: { + theme: { + extend: { + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: {}, + }, + }, + }, + }, + type: "registry:theme", + }; + if (config.tailwind.cssVariables) { + theme.tailwind.config.theme.extend.colors = __assign(__assign({}, theme.tailwind.config.theme.extend.colors), (0, update_tailwind_config_1.buildTailwindThemeColorsFromCssVars)(baseColor.cssVars.dark)); + theme.cssVars = { + dark: __assign(__assign({}, baseColor.cssVars.dark), theme.cssVars.dark), + light: __assign(__assign({}, baseColor.cssVars.light), theme.cssVars.light), + }; + } + return [2 /*return*/, theme]; + } + }); + }); +} +function getRegistryUrl(path, registryUrl) { + if (isUrl(path)) { + // If the url contains /chat/b/, we assume it's the v0 registry. + // We need to add the /json suffix if it's missing. + var url = new URL(path); + if ((/\/chat\/b\//.exec(url.pathname)) && !url.pathname.endsWith("/json")) { + url.pathname = "".concat(url.pathname, "/json"); + } + return url.toString(); + } + return "".concat(registryUrl || exports.REGISTRY_URL, "/").concat(path); +} +function isUrl(path) { + try { + new URL(path); + return true; + } + catch (error) { + return false; + } +} +function getDefaultConfig(defaultConfig, registryUrl) { + return __awaiter(this, void 0, void 0, function () { + var result; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + if (registryUrl === "https://ui.shadcn.com/r") { + return [2 /*return*/, defaultConfig]; + } + return [4 /*yield*/, fetchRegistry(["config.json"], registryUrl, true)]; + case 1: + result = (_a.sent())[0]; + if (result) { + return [2 /*return*/, __assign(__assign(__assign({}, defaultConfig), result), { aliases: __assign(__assign({}, defaultConfig.aliases), result.aliases), tailwind: __assign(__assign({}, defaultConfig.tailwind), result.tailwind) })]; + } + return [2 /*return*/, defaultConfig]; + } + }); + }); +} diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts index fce341b7b4..3660356fe9 100644 --- a/packages/cli/src/utils/registry/index.ts +++ b/packages/cli/src/utils/registry/index.ts @@ -1,32 +1,42 @@ +import type { Config } from "@/src/utils/get-config" + +import deepmerge from "deepmerge" +import { HttpsProxyAgent } from "https-proxy-agent" +import fetch from "node-fetch" import path from "path" -import { Config } from "@/src/utils/get-config" +import { z } from "zod" + import { handleError } from "@/src/utils/handle-error" import { highlighter } from "@/src/utils/highlighter" import { logger } from "@/src/utils/logger" import { + type registryItemFileSchema, registryBaseColorSchema, registryIndexSchema, - registryItemFileSchema, registryItemSchema, registryResolvedItemsTreeSchema, stylesSchema, } from "@/src/utils/registry/schema" import { buildTailwindThemeColorsFromCssVars } from "@/src/utils/updaters/update-tailwind-config" -import deepmerge from "deepmerge" -import { HttpsProxyAgent } from "https-proxy-agent" -import fetch from "node-fetch" -import { z } from "zod" + export const REGISTRY_URL = process.env.REGISTRY_URL ?? "https://ui.shadcn.com/r" + export const REGISTRY_MAP = { + magic: 'https://magicui.design/r', + plate: 'https://platejs.org/r', + shadcn: REGISTRY_URL, + }; + const agent = process.env.https_proxy ? new HttpsProxyAgent(process.env.https_proxy) : undefined export async function getRegistryIndex(registryUrl?: string) { try { - const [result] = await fetchRegistry(["index.json"], registryUrl) + // DIFF + const [result] = await fetchRegistry(['index.json'], registryUrl) return registryIndexSchema.parse(result) } catch (error) { logger.error("\n") @@ -52,7 +62,7 @@ export async function getRegistryItem( registryUrl?: string ) { try { - let [result] = await fetchRegistry( + const [result] = await fetchRegistry( [isUrl(name) ? name : `styles/${style}/${name}.json`], registryUrl, true @@ -69,24 +79,24 @@ export async function getRegistryItem( export async function getRegistryBaseColors() { return [ { - name: "neutral", label: "Neutral", + name: "neutral", }, { - name: "gray", label: "Gray", + name: "gray", }, { - name: "zinc", label: "Zinc", + name: "zinc", }, { - name: "stone", label: "Stone", + name: "stone", }, { - name: "slate", label: "Slate", + name: "slate", }, ] } @@ -177,7 +187,7 @@ export async function fetchRegistry( const response = await fetch(url, { agent }) if (!response.ok) { - const errorMessages: { [key: number]: string } = { + const errorMessages: Record = { 400: "Bad request", 401: "Unauthorized", 403: "Forbidden", @@ -283,7 +293,7 @@ export async function registryResolveItemsTree( names.unshift("index") } - let registryDependencies: string[] = [] + const registryDependencies: string[] = [] for (const name of names) { const itemRegistryDependencies = await resolveRegistryDependencies( name, @@ -293,7 +303,8 @@ export async function registryResolveItemsTree( } const uniqueRegistryDependencies = Array.from(new Set(registryDependencies)) - let result = await fetchRegistry(uniqueRegistryDependencies, config.url) + const result = await fetchRegistry(uniqueRegistryDependencies, config.url) + const payload = z.array(registryItemSchema).parse(result) if (!payload) { @@ -304,14 +315,12 @@ export async function registryResolveItemsTree( // the theme item if a base color is provided. // We do this for index only. // Other components will ship with their theme tokens. - if (names.includes("index")) { - if (config.tailwind.baseColor) { + if (names.includes("index") && config.tailwind.baseColor) { const theme = await registryGetTheme(config.tailwind.baseColor, config) if (theme) { payload.unshift(theme) } } - } let tailwind = {} payload.forEach((item) => { @@ -322,7 +331,7 @@ export async function registryResolveItemsTree( payload.forEach((item) => { cssVars = deepmerge(cssVars, item.cssVars ?? {}) }) - + let docs = "" payload.forEach((item) => { if (item.docs) { @@ -331,16 +340,16 @@ export async function registryResolveItemsTree( }) return registryResolvedItemsTreeSchema.parse({ + cssVars, dependencies: deepmerge.all( payload.map((item) => item.dependencies ?? []) ), devDependencies: deepmerge.all( payload.map((item) => item.devDependencies ?? []) ), + docs, files: deepmerge.all(payload.map((item) => item.files ?? [])), tailwind, - cssVars, - docs, }) } catch (error) { handleError(error) @@ -397,8 +406,13 @@ export async function registryGetTheme(name: string, config: Config) { // TODO: Move this to the registry i.e registry:theme. const theme = { + cssVars: { + dark: {}, + light: { + radius: "0.5rem", + }, + }, name, - type: "registry:theme", tailwind: { config: { theme: { @@ -413,12 +427,7 @@ export async function registryGetTheme(name: string, config: Config) { }, }, }, - cssVars: { - light: { - radius: "0.5rem", - }, - dark: {}, - }, + type: "registry:theme", } satisfies z.infer if (config.tailwind.cssVariables) { @@ -427,14 +436,14 @@ export async function registryGetTheme(name: string, config: Config) { ...buildTailwindThemeColorsFromCssVars(baseColor.cssVars.dark), } theme.cssVars = { - light: { - ...baseColor.cssVars.light, - ...theme.cssVars.light, - }, dark: { ...baseColor.cssVars.dark, ...theme.cssVars.dark, }, + light: { + ...baseColor.cssVars.light, + ...theme.cssVars.light, + }, } } @@ -446,7 +455,7 @@ function getRegistryUrl(path: string, registryUrl?: string) { // If the url contains /chat/b/, we assume it's the v0 registry. // We need to add the /json suffix if it's missing. const url = new URL(path) - if (url.pathname.match(/\/chat\/b\//) && !url.pathname.endsWith("/json")) { + if ((/\/chat\/b\//.exec(url.pathname)) && !url.pathname.endsWith("/json")) { url.pathname = `${url.pathname}/json` } @@ -479,14 +488,14 @@ export async function getDefaultConfig( return { ...defaultConfig, ...result, - tailwind: { - ...defaultConfig.tailwind, - ...(result as any).tailwind, - }, aliases: { ...defaultConfig.aliases, ...(result as any).aliases, }, + tailwind: { + ...defaultConfig.tailwind, + ...(result as any).tailwind, + }, } as Config } diff --git a/packages/cli/src/utils/registry/schema.d.ts b/packages/cli/src/utils/registry/schema.d.ts new file mode 100644 index 0000000000..e4172586b6 --- /dev/null +++ b/packages/cli/src/utils/registry/schema.d.ts @@ -0,0 +1,465 @@ +import { z } from "zod"; +export declare const registryItemTypeSchema: z.ZodEnum<["registry:style", "registry:lib", "registry:example", "registry:block", "registry:component", "registry:ui", "registry:hook", "registry:theme", "registry:page"]>; +export declare const registryItemFileSchema: z.ZodObject<{ + path: z.ZodString; + content: z.ZodOptional; + type: z.ZodEnum<["registry:style", "registry:lib", "registry:example", "registry:block", "registry:component", "registry:ui", "registry:hook", "registry:theme", "registry:page"]>; + target: z.ZodOptional; +}, "strip", z.ZodTypeAny, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; +}, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; +}>; +export declare const registryItemTailwindSchema: z.ZodObject<{ + config: z.ZodOptional>; + theme: z.ZodOptional>; + plugins: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }>>; +}, "strip", z.ZodTypeAny, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; +}, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; +}>; +export declare const registryItemCssVarsSchema: z.ZodObject<{ + light: z.ZodOptional>; + dark: z.ZodOptional>; +}, "strip", z.ZodTypeAny, { + light?: Record | undefined; + dark?: Record | undefined; +}, { + light?: Record | undefined; + dark?: Record | undefined; +}>; +export declare const registryItemSchema: z.ZodObject<{ + name: z.ZodString; + type: z.ZodEnum<["registry:style", "registry:lib", "registry:example", "registry:block", "registry:component", "registry:ui", "registry:hook", "registry:theme", "registry:page"]>; + description: z.ZodOptional; + dependencies: z.ZodOptional>; + devDependencies: z.ZodOptional>; + registryDependencies: z.ZodOptional>; + files: z.ZodOptional; + type: z.ZodEnum<["registry:style", "registry:lib", "registry:example", "registry:block", "registry:component", "registry:ui", "registry:hook", "registry:theme", "registry:page"]>; + target: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }>, "many">>; + tailwind: z.ZodOptional>; + theme: z.ZodOptional>; + plugins: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }>>; + }, "strip", z.ZodTypeAny, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + }, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + }>>; + cssVars: z.ZodOptional>; + dark: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + light?: Record | undefined; + dark?: Record | undefined; + }, { + light?: Record | undefined; + dark?: Record | undefined; + }>>; + meta: z.ZodOptional>; + docs: z.ZodOptional; +}, "strip", z.ZodTypeAny, { + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +}, { + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +}>; +export type RegistryItem = z.infer; +export declare const registryIndexSchema: z.ZodArray; + description: z.ZodOptional; + dependencies: z.ZodOptional>; + devDependencies: z.ZodOptional>; + registryDependencies: z.ZodOptional>; + files: z.ZodOptional; + type: z.ZodEnum<["registry:style", "registry:lib", "registry:example", "registry:block", "registry:component", "registry:ui", "registry:hook", "registry:theme", "registry:page"]>; + target: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }>, "many">>; + tailwind: z.ZodOptional>; + theme: z.ZodOptional>; + plugins: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }>>; + }, "strip", z.ZodTypeAny, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + }, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + }>>; + cssVars: z.ZodOptional>; + dark: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + light?: Record | undefined; + dark?: Record | undefined; + }, { + light?: Record | undefined; + dark?: Record | undefined; + }>>; + meta: z.ZodOptional>; + docs: z.ZodOptional; +}, { + files: z.ZodOptional; + type: z.ZodEnum<["registry:style", "registry:lib", "registry:example", "registry:block", "registry:component", "registry:ui", "registry:hook", "registry:theme", "registry:page"]>; + target: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }>]>, "many">>; +}>, "strip", z.ZodTypeAny, { + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: (string | { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + })[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +}, { + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + name: string; + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + description?: string | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + registryDependencies?: string[] | undefined; + files?: (string | { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + })[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + meta?: Record | undefined; + docs?: string | undefined; +}>, "many">; +export declare const stylesSchema: z.ZodArray, "many">; +export declare const registryBaseColorSchema: z.ZodObject<{ + inlineColors: z.ZodObject<{ + light: z.ZodRecord; + dark: z.ZodRecord; + }, "strip", z.ZodTypeAny, { + light: Record; + dark: Record; + }, { + light: Record; + dark: Record; + }>; + cssVars: z.ZodObject<{ + light: z.ZodRecord; + dark: z.ZodRecord; + }, "strip", z.ZodTypeAny, { + light: Record; + dark: Record; + }, { + light: Record; + dark: Record; + }>; + inlineColorsTemplate: z.ZodString; + cssVarsTemplate: z.ZodString; +}, "strip", z.ZodTypeAny, { + cssVars: { + light: Record; + dark: Record; + }; + inlineColors: { + light: Record; + dark: Record; + }; + inlineColorsTemplate: string; + cssVarsTemplate: string; +}, { + cssVars: { + light: Record; + dark: Record; + }; + inlineColors: { + light: Record; + dark: Record; + }; + inlineColorsTemplate: string; + cssVarsTemplate: string; +}>; +export declare const registryResolvedItemsTreeSchema: z.ZodObject; + description: z.ZodOptional; + dependencies: z.ZodOptional>; + devDependencies: z.ZodOptional>; + registryDependencies: z.ZodOptional>; + files: z.ZodOptional; + type: z.ZodEnum<["registry:style", "registry:lib", "registry:example", "registry:block", "registry:component", "registry:ui", "registry:hook", "registry:theme", "registry:page"]>; + target: z.ZodOptional; + }, "strip", z.ZodTypeAny, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }, { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }>, "many">>; + tailwind: z.ZodOptional>; + theme: z.ZodOptional>; + plugins: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }, { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + }>>; + }, "strip", z.ZodTypeAny, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + }, { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + }>>; + cssVars: z.ZodOptional>; + dark: z.ZodOptional>; + }, "strip", z.ZodTypeAny, { + light?: Record | undefined; + dark?: Record | undefined; + }, { + light?: Record | undefined; + dark?: Record | undefined; + }>>; + meta: z.ZodOptional>; + docs: z.ZodOptional; +}, "tailwind" | "dependencies" | "devDependencies" | "files" | "cssVars" | "docs">, "strip", z.ZodTypeAny, { + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + files?: { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + docs?: string | undefined; +}, { + tailwind?: { + config?: { + content?: string[] | undefined; + theme?: Record | undefined; + plugins?: string[] | undefined; + } | undefined; + } | undefined; + dependencies?: string[] | undefined; + devDependencies?: string[] | undefined; + files?: { + path: string; + type: "registry:style" | "registry:lib" | "registry:example" | "registry:block" | "registry:component" | "registry:ui" | "registry:hook" | "registry:theme" | "registry:page"; + content?: string | undefined; + target?: string | undefined; + }[] | undefined; + cssVars?: { + light?: Record | undefined; + dark?: Record | undefined; + } | undefined; + docs?: string | undefined; +}>; +//# sourceMappingURL=schema.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/registry/schema.d.ts.map b/packages/cli/src/utils/registry/schema.d.ts.map new file mode 100644 index 0000000000..68f4da1954 --- /dev/null +++ b/packages/cli/src/utils/registry/schema.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAGvB,eAAO,MAAM,sBAAsB,8KAUjC,CAAA;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;EAKjC,CAAA;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;EAQrC,CAAA;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;EAGpC,CAAA;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY7B,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAE7D,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAI/B,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;WAKxB,CAAA;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWlC,CAAA;AAEF,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO1C,CAAA"} \ No newline at end of file diff --git a/packages/cli/src/utils/registry/schema.js b/packages/cli/src/utils/registry/schema.js new file mode 100644 index 0000000000..e6f223d199 --- /dev/null +++ b/packages/cli/src/utils/registry/schema.js @@ -0,0 +1,75 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.registryResolvedItemsTreeSchema = exports.registryBaseColorSchema = exports.stylesSchema = exports.registryIndexSchema = exports.registryItemSchema = exports.registryItemCssVarsSchema = exports.registryItemTailwindSchema = exports.registryItemFileSchema = exports.registryItemTypeSchema = void 0; +var zod_1 = require("zod"); +// TODO: Extract this to a shared package. +exports.registryItemTypeSchema = zod_1.z.enum([ + "registry:style", + "registry:lib", + "registry:example", + "registry:block", + "registry:component", + "registry:ui", + "registry:hook", + "registry:theme", + "registry:page", +]); +exports.registryItemFileSchema = zod_1.z.object({ + path: zod_1.z.string(), + content: zod_1.z.string().optional(), + type: exports.registryItemTypeSchema, + target: zod_1.z.string().optional(), +}); +exports.registryItemTailwindSchema = zod_1.z.object({ + config: zod_1.z + .object({ + content: zod_1.z.array(zod_1.z.string()).optional(), + theme: zod_1.z.record(zod_1.z.string(), zod_1.z.any()).optional(), + plugins: zod_1.z.array(zod_1.z.string()).optional(), + }) + .optional(), +}); +exports.registryItemCssVarsSchema = zod_1.z.object({ + light: zod_1.z.record(zod_1.z.string(), zod_1.z.string()).optional(), + dark: zod_1.z.record(zod_1.z.string(), zod_1.z.string()).optional(), +}); +exports.registryItemSchema = zod_1.z.object({ + name: zod_1.z.string(), + type: exports.registryItemTypeSchema, + description: zod_1.z.string().optional(), + dependencies: zod_1.z.array(zod_1.z.string()).optional(), + devDependencies: zod_1.z.array(zod_1.z.string()).optional(), + registryDependencies: zod_1.z.array(zod_1.z.string()).optional(), + files: zod_1.z.array(exports.registryItemFileSchema).optional(), + tailwind: exports.registryItemTailwindSchema.optional(), + cssVars: exports.registryItemCssVarsSchema.optional(), + meta: zod_1.z.record(zod_1.z.string(), zod_1.z.any()).optional(), + docs: zod_1.z.string().optional(), +}); +exports.registryIndexSchema = zod_1.z.array(exports.registryItemSchema.extend({ + files: zod_1.z.array(zod_1.z.union([zod_1.z.string(), exports.registryItemFileSchema])).optional(), +})); +exports.stylesSchema = zod_1.z.array(zod_1.z.object({ + name: zod_1.z.string(), + label: zod_1.z.string(), +})); +exports.registryBaseColorSchema = zod_1.z.object({ + inlineColors: zod_1.z.object({ + light: zod_1.z.record(zod_1.z.string(), zod_1.z.string()), + dark: zod_1.z.record(zod_1.z.string(), zod_1.z.string()), + }), + cssVars: zod_1.z.object({ + light: zod_1.z.record(zod_1.z.string(), zod_1.z.string()), + dark: zod_1.z.record(zod_1.z.string(), zod_1.z.string()), + }), + inlineColorsTemplate: zod_1.z.string(), + cssVarsTemplate: zod_1.z.string(), +}); +exports.registryResolvedItemsTreeSchema = exports.registryItemSchema.pick({ + dependencies: true, + devDependencies: true, + files: true, + tailwind: true, + cssVars: true, + docs: true, +}); diff --git a/packages/cli/src/utils/resolve-import.d.ts b/packages/cli/src/utils/resolve-import.d.ts new file mode 100644 index 0000000000..bb18b60f9d --- /dev/null +++ b/packages/cli/src/utils/resolve-import.d.ts @@ -0,0 +1,3 @@ +import { type ConfigLoaderSuccessResult } from "tsconfig-paths"; +export declare function resolveImport(importPath: string, config: Pick): Promise; +//# sourceMappingURL=resolve-import.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/resolve-import.d.ts.map b/packages/cli/src/utils/resolve-import.d.ts.map new file mode 100644 index 0000000000..c250a9b3d2 --- /dev/null +++ b/packages/cli/src/utils/resolve-import.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"resolve-import.d.ts","sourceRoot":"","sources":["resolve-import.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,yBAAyB,EAAE,MAAM,gBAAgB,CAAA;AAEhF,wBAAsB,aAAa,CACjC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,IAAI,CAAC,yBAAyB,EAAE,iBAAiB,GAAG,OAAO,CAAC,+BAQrE"} \ No newline at end of file diff --git a/packages/cli/src/utils/resolve-import.js b/packages/cli/src/utils/resolve-import.js new file mode 100644 index 0000000000..72f0154b14 --- /dev/null +++ b/packages/cli/src/utils/resolve-import.js @@ -0,0 +1,47 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.resolveImport = resolveImport; +var tsconfig_paths_1 = require("tsconfig-paths"); +function resolveImport(importPath, config) { + return __awaiter(this, void 0, void 0, function () { + return __generator(this, function (_a) { + return [2 /*return*/, (0, tsconfig_paths_1.createMatchPath)(config.absoluteBaseUrl, config.paths)(importPath, undefined, function () { return true; }, [".ts", ".tsx"])]; + }); + }); +} diff --git a/packages/cli/src/utils/spinner.d.ts b/packages/cli/src/utils/spinner.d.ts new file mode 100644 index 0000000000..4c2ed6731b --- /dev/null +++ b/packages/cli/src/utils/spinner.d.ts @@ -0,0 +1,5 @@ +import { type Options } from "ora"; +export declare function spinner(text: Options["text"], options?: { + silent?: boolean; +}): import("ora").Ora; +//# sourceMappingURL=spinner.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/spinner.d.ts.map b/packages/cli/src/utils/spinner.d.ts.map new file mode 100644 index 0000000000..36d920e059 --- /dev/null +++ b/packages/cli/src/utils/spinner.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["spinner.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,KAAK,OAAO,EAAE,MAAM,KAAK,CAAA;AAEvC,wBAAgB,OAAO,CACrB,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EACrB,OAAO,CAAC,EAAE;IACR,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,qBAMF"} \ No newline at end of file diff --git a/packages/cli/src/utils/spinner.js b/packages/cli/src/utils/spinner.js new file mode 100644 index 0000000000..0387e84bf4 --- /dev/null +++ b/packages/cli/src/utils/spinner.js @@ -0,0 +1,13 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.spinner = spinner; +var ora_1 = __importDefault(require("ora")); +function spinner(text, options) { + return (0, ora_1.default)({ + text: text, + isSilent: options === null || options === void 0 ? void 0 : options.silent, + }); +} diff --git a/packages/cli/src/utils/transformers/index.d.ts b/packages/cli/src/utils/transformers/index.d.ts new file mode 100644 index 0000000000..7ddbd96153 --- /dev/null +++ b/packages/cli/src/utils/transformers/index.d.ts @@ -0,0 +1,16 @@ +import { Config } from "@/src/utils/get-config"; +import { registryBaseColorSchema } from "@/src/utils/registry/schema"; +import { type SourceFile } from "ts-morph"; +import { z } from "zod"; +export type TransformOpts = { + filename: string; + raw: string; + config: Config; + baseColor?: z.infer; + transformJsx?: boolean; +}; +export type Transformer = (opts: TransformOpts & { + sourceFile: SourceFile; +}) => Promise; +export declare function transform(opts: TransformOpts, transformers?: Transformer[]): Promise; +//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/index.d.ts.map b/packages/cli/src/utils/transformers/index.d.ts.map new file mode 100644 index 0000000000..999d6ec058 --- /dev/null +++ b/packages/cli/src/utils/transformers/index.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAKrE,OAAO,EAAuB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAIvB,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,uBAAuB,CAAC,CAAA;IACnD,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,WAAW,CAAC,MAAM,GAAG,UAAU,IAAI,CAC7C,IAAI,EAAE,aAAa,GAAG;IACpB,UAAU,EAAE,UAAU,CAAA;CACvB,KACE,OAAO,CAAC,MAAM,CAAC,CAAA;AAWpB,wBAAsB,SAAS,CAC7B,IAAI,EAAE,aAAa,EACnB,YAAY,GAAE,WAAW,EAKxB,mBAmBF"} \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/index.js b/packages/cli/src/utils/transformers/index.js new file mode 100644 index 0000000000..ba5b395ff7 --- /dev/null +++ b/packages/cli/src/utils/transformers/index.js @@ -0,0 +1,107 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.transform = transform; +var fs_1 = require("fs"); +var os_1 = require("os"); +var path_1 = __importDefault(require("path")); +var transform_css_vars_1 = require("@/src/utils/transformers/transform-css-vars"); +var transform_import_1 = require("@/src/utils/transformers/transform-import"); +var transform_jsx_1 = require("@/src/utils/transformers/transform-jsx"); +var transform_rsc_1 = require("@/src/utils/transformers/transform-rsc"); +var ts_morph_1 = require("ts-morph"); +var transform_tw_prefix_1 = require("./transform-tw-prefix"); +var project = new ts_morph_1.Project({ + compilerOptions: {}, +}); +function createTempSourceFile(filename) { + return __awaiter(this, void 0, void 0, function () { + var dir; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, fs_1.promises.mkdtemp(path_1.default.join((0, os_1.tmpdir)(), "shadcn-"))]; + case 1: + dir = _a.sent(); + return [2 /*return*/, path_1.default.join(dir, filename)]; + } + }); + }); +} +function transform(opts_1) { + return __awaiter(this, arguments, void 0, function (opts, transformers) { + var tempFile, sourceFile, _i, transformers_1, transformer; + if (transformers === void 0) { transformers = [ + transform_import_1.transformImport, + transform_rsc_1.transformRsc, + transform_css_vars_1.transformCssVars, + transform_tw_prefix_1.transformTwPrefixes, + ]; } + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, createTempSourceFile(opts.filename)]; + case 1: + tempFile = _a.sent(); + sourceFile = project.createSourceFile(tempFile, opts.raw, { + scriptKind: ts_morph_1.ScriptKind.TSX, + }); + for (_i = 0, transformers_1 = transformers; _i < transformers_1.length; _i++) { + transformer = transformers_1[_i]; + transformer(__assign({ sourceFile: sourceFile }, opts)); + } + if (!opts.transformJsx) return [3 /*break*/, 3]; + return [4 /*yield*/, (0, transform_jsx_1.transformJsx)(__assign({ sourceFile: sourceFile }, opts))]; + case 2: return [2 /*return*/, _a.sent()]; + case 3: return [2 /*return*/, sourceFile.getText()]; + } + }); + }); +} diff --git a/packages/cli/src/utils/transformers/transform-css-vars.d.ts b/packages/cli/src/utils/transformers/transform-css-vars.d.ts new file mode 100644 index 0000000000..5272561afe --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-css-vars.d.ts @@ -0,0 +1,7 @@ +import type { registryBaseColorSchema } from '@/src/utils/registry/schema'; +import type { Transformer } from '@/src/utils/transformers'; +import type { z } from 'zod'; +export declare const transformCssVars: Transformer; +export declare function splitClassName(className: string): (string | null)[]; +export declare function applyColorMapping(input: string, mapping: z.infer['inlineColors']): string; +//# sourceMappingURL=transform-css-vars.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-css-vars.d.ts.map b/packages/cli/src/utils/transformers/transform-css-vars.d.ts.map new file mode 100644 index 0000000000..7c606fa2e0 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-css-vars.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"transform-css-vars.d.ts","sourceRoot":"","sources":["transform-css-vars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAI7B,eAAO,MAAM,gBAAgB,EAAE,WAwC9B,CAAC;AA6DF,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CA2BnE;AAID,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,uBAAuB,CAAC,CAAC,cAAc,CAAC,UA+CjE"} \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-css-vars.js b/packages/cli/src/utils/transformers/transform-css-vars.js new file mode 100644 index 0000000000..307645d238 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-css-vars.js @@ -0,0 +1,199 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.transformCssVars = void 0; +exports.splitClassName = splitClassName; +exports.applyColorMapping = applyColorMapping; +var ts_morph_1 = require("ts-morph"); +var transformCssVars = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) { + var _c; + var baseColor = _b.baseColor, config = _b.config, sourceFile = _b.sourceFile; + return __generator(this, function (_d) { + // No transform if using css variables. + if (((_c = config.tailwind) === null || _c === void 0 ? void 0 : _c.cssVariables) || !(baseColor === null || baseColor === void 0 ? void 0 : baseColor.inlineColors)) { + return [2 /*return*/, sourceFile]; + } + // Find jsx attributes with the name className. + // const openingElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement) + // const jsxAttributes = sourceFile + // .getDescendantsOfKind(SyntaxKind.JsxAttribute) + // .filter((node) => node.getName() === "className") + // for (const jsxAttribute of jsxAttributes) { + // const value = jsxAttribute.getInitializer()?.getText() + // if (value) { + // const valueWithColorMapping = applyColorMapping( + // value.replace(/"/g, ""), + // baseColor.inlineColors + // ) + // jsxAttribute.setInitializer(`"${valueWithColorMapping}"`) + // } + // } + sourceFile.getDescendantsOfKind(ts_morph_1.SyntaxKind.StringLiteral).forEach(function (node) { + var value = node.getText(); + if (value) { + var valueWithColorMapping = applyColorMapping(value.replace(/'/g, '').replace(/"/g, ''), baseColor.inlineColors); + // node.replaceWithText(`"${valueWithColorMapping.trim()}"`); + node.replaceWithText("'".concat(valueWithColorMapping.trim(), "'")); + } + }); + return [2 /*return*/, sourceFile]; + }); +}); }; +exports.transformCssVars = transformCssVars; +// export default function transformer(file: FileInfo, api: API) { +// const j = api.jscodeshift.withParser("tsx") +// // Replace bg-background with "bg-white dark:bg-slate-950" +// const $j = j(file.source) +// return $j +// .find(j.JSXAttribute, { +// name: { +// name: "className", +// }, +// }) +// .forEach((path) => { +// const { node } = path +// if (node?.value?.type) { +// if (node.value.type === "StringLiteral") { +// node.value.value = applyColorMapping(node.value.value) +// } +// if ( +// node.value.type === "JSXExpressionContainer" && +// node.value.expression.type === "CallExpression" +// ) { +// const callee = node.value.expression.callee +// if (callee.type === "Identifier" && callee.name === "cn") { +// node.value.expression.arguments.forEach((arg) => { +// if (arg.type === "StringLiteral") { +// arg.value = applyColorMapping(arg.value) +// } +// if ( +// arg.type === "LogicalExpression" && +// arg.right.type === "StringLiteral" +// ) { +// arg.right.value = applyColorMapping(arg.right.value) +// } +// }) +// } +// } +// } +// }) +// .toSource() +// } +// // export function splitClassName(input: string): (string | null)[] { +// // const parts = input.split(":") +// // const classNames = parts.map((part) => { +// // const match = part.match(/^\[?(.+)\]$/) +// // if (match) { +// // return match[1] +// // } else { +// // return null +// // } +// // }) +// // return classNames +// // } +// Splits a className into variant-name-alpha. +// eg. hover:bg-primary-100 -> [hover, bg-primary, 100] +function splitClassName(className) { + if (!className.includes('/') && !className.includes(':')) { + return [null, className, null]; + } + var parts = []; + // First we split to find the alpha. + var _a = className.split('/'), rest = _a[0], alpha = _a[1]; + // Check if rest has a colon. + if (!rest.includes(':')) { + return [null, rest, alpha]; + } + // Next we split the rest by the colon. + var split = rest.split(':'); + // We take the last item from the split as the name. + var name = split.pop(); + // We glue back the rest of the split. + var variant = split.join(':'); + // Finally we push the variant, name and alpha. + parts.push(variant !== null && variant !== void 0 ? variant : null, name !== null && name !== void 0 ? name : null, alpha !== null && alpha !== void 0 ? alpha : null); + return parts; +} +var PREFIXES = ['bg-', 'text-', 'border-', 'ring-offset-', 'ring-']; +function applyColorMapping(input, mapping) { + // Handle border classes. + if (input.includes(' border ')) { + input = input.replace(' border ', ' border border-border '); + } + // Build color mappings. + var classNames = input.split(' '); + var lightMode = new Set(); + var darkMode = new Set(); + var _loop_1 = function (className) { + var _a = splitClassName(className), variant = _a[0], value = _a[1], modifier = _a[2]; + var prefix = PREFIXES.find(function (prefix) { return value === null || value === void 0 ? void 0 : value.startsWith(prefix); }); + if (!prefix) { + if (!lightMode.has(className)) { + lightMode.add(className); + } + return "continue"; + } + var needle = value === null || value === void 0 ? void 0 : value.replace(prefix, ''); + if (needle && needle in mapping.light) { + lightMode.add([variant, "".concat(prefix).concat(mapping.light[needle])] + .filter(Boolean) + .join(':') + (modifier ? "/".concat(modifier) : '')); + darkMode.add(['dark', variant, "".concat(prefix).concat(mapping.dark[needle])] + .filter(Boolean) + .join(':') + (modifier ? "/".concat(modifier) : '')); + return "continue"; + } + if (!lightMode.has(className)) { + lightMode.add(className); + } + }; + for (var _i = 0, classNames_1 = classNames; _i < classNames_1.length; _i++) { + var className = classNames_1[_i]; + _loop_1(className); + } + return __spreadArray(__spreadArray([], Array.from(lightMode), true), Array.from(darkMode), true).join(' ').trim(); +} diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts index 26b93baa90..e7bbb96562 100644 --- a/packages/cli/src/utils/transformers/transform-css-vars.ts +++ b/packages/cli/src/utils/transformers/transform-css-vars.ts @@ -16,7 +16,6 @@ export const transformCssVars: Transformer = async ({ // Find jsx attributes with the name className. // const openingElements = sourceFile.getDescendantsOfKind(SyntaxKind.JsxElement) - // console.log(openingElements) // const jsxAttributes = sourceFile // .getDescendantsOfKind(SyntaxKind.JsxAttribute) // .filter((node) => node.getName() === "className") @@ -63,7 +62,6 @@ export const transformCssVars: Transformer = async ({ // if (node?.value?.type) { // if (node.value.type === "StringLiteral") { // node.value.value = applyColorMapping(node.value.value) -// console.log(node.value.value) // } // if ( diff --git a/packages/cli/src/utils/transformers/transform-import.d.ts b/packages/cli/src/utils/transformers/transform-import.d.ts new file mode 100644 index 0000000000..ee83daf80a --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-import.d.ts @@ -0,0 +1,3 @@ +import type { Transformer } from '@/src/utils/transformers'; +export declare const transformImport: Transformer; +//# sourceMappingURL=transform-import.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-import.d.ts.map b/packages/cli/src/utils/transformers/transform-import.d.ts.map new file mode 100644 index 0000000000..bd6477f091 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-import.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"transform-import.d.ts","sourceRoot":"","sources":["transform-import.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,eAAO,MAAM,eAAe,EAAE,WAyB7B,CAAC"} \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-import.js b/packages/cli/src/utils/transformers/transform-import.js new file mode 100644 index 0000000000..cd5dd92ba0 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-import.js @@ -0,0 +1,89 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.transformImport = void 0; +var transformImport = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) { + var importDeclarations, _i, importDeclarations_1, importDeclaration, moduleSpecifier, namedImports, cnImport; + var config = _b.config, sourceFile = _b.sourceFile; + return __generator(this, function (_c) { + importDeclarations = sourceFile.getImportDeclarations(); + for (_i = 0, importDeclarations_1 = importDeclarations; _i < importDeclarations_1.length; _i++) { + importDeclaration = importDeclarations_1[_i]; + moduleSpecifier = updateImportAliases(importDeclaration.getModuleSpecifierValue(), config); + importDeclaration.setModuleSpecifier(moduleSpecifier); + // Replace `import { cn } from "@/lib/utils"` + if (moduleSpecifier == '@/lib/utils') { + namedImports = importDeclaration.getNamedImports(); + cnImport = namedImports.find(function (i) { return i.getName() === 'cn'; }); + if (cnImport) { + importDeclaration.setModuleSpecifier(moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils)); + } + } + } + return [2 /*return*/, sourceFile]; + }); +}); }; +exports.transformImport = transformImport; +function updateImportAliases(moduleSpecifier, config) { + var _a; + // Not a local import. + if (!moduleSpecifier.startsWith('@/')) { + return moduleSpecifier; + } + // Not a registry import. + if (!moduleSpecifier.startsWith('@/registry/')) { + // We fix the alias an return. + var alias = config.aliases.components.charAt(0); + return moduleSpecifier.replace(/^@\//, "".concat(alias, "/")); + } + if (/^@\/registry\/(.+)\/ui/.exec(moduleSpecifier)) { + return moduleSpecifier.replace(/^@\/registry\/(.+)\/ui/, (_a = config.aliases.ui) !== null && _a !== void 0 ? _a : "".concat(config.aliases.components, "/ui")); + } + if (config.aliases.components && + /^@\/registry\/(.+)\/components/.exec(moduleSpecifier)) { + return moduleSpecifier.replace(/^@\/registry\/(.+)\/components/, config.aliases.components); + } + if (config.aliases.lib && /^@\/registry\/(.+)\/lib/.exec(moduleSpecifier)) { + return moduleSpecifier.replace(/^@\/registry\/(.+)\/lib/, config.aliases.lib); + } + if (config.aliases.hooks && + /^@\/registry\/(.+)\/hooks/.exec(moduleSpecifier)) { + return moduleSpecifier.replace(/^@\/registry\/(.+)\/hooks/, config.aliases.hooks); + } + return moduleSpecifier.replace(/^@\/registry\/[^/]+/, config.aliases.components); +} diff --git a/packages/cli/src/utils/transformers/transform-jsx.d.ts b/packages/cli/src/utils/transformers/transform-jsx.d.ts new file mode 100644 index 0000000000..3f037ca933 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-jsx.d.ts @@ -0,0 +1,3 @@ +import type { Transformer } from '@/src/utils/transformers'; +export declare const transformJsx: Transformer; +//# sourceMappingURL=transform-jsx.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-jsx.d.ts.map b/packages/cli/src/utils/transformers/transform-jsx.d.ts.map new file mode 100644 index 0000000000..5c716a6147 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-jsx.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"transform-jsx.d.ts","sourceRoot":"","sources":["transform-jsx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAgE5D,eAAO,MAAM,YAAY,EAAE,WAAW,CAAC,MAAM,CA+B5C,CAAC"} \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-jsx.js b/packages/cli/src/utils/transformers/transform-jsx.js new file mode 100644 index 0000000000..178e7ead77 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-jsx.js @@ -0,0 +1,153 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.transformJsx = void 0; +var core_1 = require("@babel/core"); +var parser_1 = require("@babel/parser"); +// @ts-ignore +var plugin_transform_typescript_1 = __importDefault(require("@babel/plugin-transform-typescript")); +var recast = __importStar(require("recast")); +// TODO. +// I'm using recast for the AST here. +// Figure out if ts-morph AST is compatible with Babel. +// This is a copy of the babel options from recast/parser. +// The goal here is to tolerate as much syntax as possible. +// We want to be able to parse any valid tsx code. +// See https://github.com/benjamn/recast/blob/master/parsers/_babel_options.ts. +var PARSE_OPTIONS = { + allowImportExportEverywhere: true, + allowReturnOutsideFunction: true, + plugins: [ + 'asyncGenerators', + 'bigInt', + 'classPrivateMethods', + 'classPrivateProperties', + 'classProperties', + 'classStaticBlock', + 'decimal', + 'decorators-legacy', + 'doExpressions', + 'dynamicImport', + 'exportDefaultFrom', + 'exportNamespaceFrom', + 'functionBind', + 'functionSent', + 'importAssertions', + 'importMeta', + 'nullishCoalescingOperator', + 'numericSeparator', + 'objectRestSpread', + 'optionalCatchBinding', + 'optionalChaining', + [ + 'pipelineOperator', + { + proposal: 'minimal', + }, + ], + [ + 'recordAndTuple', + { + syntaxType: 'hash', + }, + ], + 'throwExpressions', + 'topLevelAwait', + 'v8intrinsic', + 'typescript', + 'jsx', + ], + sourceType: 'module', + startLine: 1, + tokens: true, +}; +var transformJsx = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) { + var output, ast, result; + var config = _b.config, sourceFile = _b.sourceFile; + return __generator(this, function (_c) { + output = sourceFile.getFullText(); + if (config.tsx) { + return [2 /*return*/, output]; + } + ast = recast.parse(output, { + parser: { + parse: function (code) { + return (0, parser_1.parse)(code, PARSE_OPTIONS); + }, + }, + }); + result = (0, core_1.transformFromAstSync)(ast, output, { + ast: true, + cloneInputAst: false, + code: false, + configFile: false, + plugins: [plugin_transform_typescript_1.default], + }); + if (!(result === null || result === void 0 ? void 0 : result.ast)) { + throw new Error('Failed to transform JSX'); + } + return [2 /*return*/, recast.print(result.ast).code]; + }); +}); }; +exports.transformJsx = transformJsx; diff --git a/packages/cli/src/utils/transformers/transform-rsc.d.ts b/packages/cli/src/utils/transformers/transform-rsc.d.ts new file mode 100644 index 0000000000..e770b0f61f --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-rsc.d.ts @@ -0,0 +1,3 @@ +import type { Transformer } from '@/src/utils/transformers'; +export declare const transformRsc: Transformer; +//# sourceMappingURL=transform-rsc.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-rsc.d.ts.map b/packages/cli/src/utils/transformers/transform-rsc.d.ts.map new file mode 100644 index 0000000000..238415f46b --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-rsc.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"transform-rsc.d.ts","sourceRoot":"","sources":["transform-rsc.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAM5D,eAAO,MAAM,YAAY,EAAE,WAa1B,CAAC"} \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-rsc.js b/packages/cli/src/utils/transformers/transform-rsc.js new file mode 100644 index 0000000000..f197792f70 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-rsc.js @@ -0,0 +1,56 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.transformRsc = void 0; +var ts_morph_1 = require("ts-morph"); +var directiveRegex = /^["']use client["']$/g; +var transformRsc = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) { + var first; + var config = _b.config, sourceFile = _b.sourceFile; + return __generator(this, function (_c) { + if (config.rsc) { + return [2 /*return*/, sourceFile]; + } + first = sourceFile.getFirstChildByKind(ts_morph_1.SyntaxKind.ExpressionStatement); + if (first && directiveRegex.test(first.getText())) { + first.remove(); + } + return [2 /*return*/, sourceFile]; + }); +}); }; +exports.transformRsc = transformRsc; diff --git a/packages/cli/src/utils/transformers/transform-tw-prefix.d.ts b/packages/cli/src/utils/transformers/transform-tw-prefix.d.ts new file mode 100644 index 0000000000..2dc101a9f4 --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-tw-prefix.d.ts @@ -0,0 +1,5 @@ +import type { Transformer } from '@/src/utils/transformers'; +export declare const transformTwPrefixes: Transformer; +export declare function applyPrefix(input: string, prefix?: string): string; +export declare function applyPrefixesCss(css: string, prefix: string): string; +//# sourceMappingURL=transform-tw-prefix.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-tw-prefix.d.ts.map b/packages/cli/src/utils/transformers/transform-tw-prefix.d.ts.map new file mode 100644 index 0000000000..4f5d22055f --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-tw-prefix.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"transform-tw-prefix.d.ts","sourceRoot":"","sources":["transform-tw-prefix.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAM5D,eAAO,MAAM,mBAAmB,EAAE,WAuKjC,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,SAAK,UAmBrD;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAY3D"} \ No newline at end of file diff --git a/packages/cli/src/utils/transformers/transform-tw-prefix.js b/packages/cli/src/utils/transformers/transform-tw-prefix.js new file mode 100644 index 0000000000..2a40a658dc --- /dev/null +++ b/packages/cli/src/utils/transformers/transform-tw-prefix.js @@ -0,0 +1,188 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.transformTwPrefixes = void 0; +exports.applyPrefix = applyPrefix; +exports.applyPrefixesCss = applyPrefixesCss; +var ts_morph_1 = require("ts-morph"); +var transform_css_vars_1 = require("./transform-css-vars"); +var transformTwPrefixes = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) { + var _c; + var config = _b.config, sourceFile = _b.sourceFile; + return __generator(this, function (_d) { + if (!((_c = config.tailwind) === null || _c === void 0 ? void 0 : _c.prefix)) { + return [2 /*return*/, sourceFile]; + } + // Find the cva function calls. + sourceFile + .getDescendantsOfKind(ts_morph_1.SyntaxKind.CallExpression) + .filter(function (node) { return node.getExpression().getText() === 'cva'; }) + .forEach(function (node) { + var _a, _b, _c, _d, _e; + // cva(base, ...) + if ((_a = node.getArguments()[0]) === null || _a === void 0 ? void 0 : _a.isKind(ts_morph_1.SyntaxKind.StringLiteral)) { + var defaultClassNames = node.getArguments()[0]; + if (defaultClassNames) { + defaultClassNames.replaceWithText("'".concat(applyPrefix((_b = defaultClassNames.getText()) === null || _b === void 0 ? void 0 : _b.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + } + } + // cva(..., { variants: { ... } }) + if ((_c = node.getArguments()[1]) === null || _c === void 0 ? void 0 : _c.isKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression)) { + (_e = (_d = node + .getArguments()[1]) === null || _d === void 0 ? void 0 : _d.getDescendantsOfKind(ts_morph_1.SyntaxKind.PropertyAssignment).find(function (node) { return node.getName() === 'variants'; })) === null || _e === void 0 ? void 0 : _e.getDescendantsOfKind(ts_morph_1.SyntaxKind.PropertyAssignment).forEach(function (node) { + node + .getDescendantsOfKind(ts_morph_1.SyntaxKind.PropertyAssignment) + .forEach(function (node) { + var _a; + var classNames = node.getInitializerIfKind(ts_morph_1.SyntaxKind.StringLiteral); + if (classNames) { + classNames === null || classNames === void 0 ? void 0 : classNames.replaceWithText("'".concat(applyPrefix((_a = classNames.getText()) === null || _a === void 0 ? void 0 : _a.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + } + }); + }); + } + }); + // Find all jsx attributes with the name className. + sourceFile.getDescendantsOfKind(ts_morph_1.SyntaxKind.JsxAttribute).forEach(function (node) { + var _a, _b, _c, _d, _e; + if (node.getName() === 'className') { + // className="..." + if ((_a = node.getInitializer()) === null || _a === void 0 ? void 0 : _a.isKind(ts_morph_1.SyntaxKind.StringLiteral)) { + var value = node.getInitializer(); + if (value) { + value.replaceWithText("'".concat(applyPrefix((_b = value.getText()) === null || _b === void 0 ? void 0 : _b.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + } + } + // className={...} + if ((_c = node.getInitializer()) === null || _c === void 0 ? void 0 : _c.isKind(ts_morph_1.SyntaxKind.JsxExpression)) { + // Check if it's a call to cn(). + var callExpression = (_d = node + .getInitializer()) === null || _d === void 0 ? void 0 : _d.getDescendantsOfKind(ts_morph_1.SyntaxKind.CallExpression).find(function (node) { return node.getExpression().getText() === 'cn'; }); + if (callExpression) { + // Loop through the arguments. + callExpression.getArguments().forEach(function (node) { + var _a; + if (node.isKind(ts_morph_1.SyntaxKind.ConditionalExpression) || + node.isKind(ts_morph_1.SyntaxKind.BinaryExpression)) { + node + .getChildrenOfKind(ts_morph_1.SyntaxKind.StringLiteral) + .forEach(function (node) { + var _a; + node.replaceWithText("'".concat(applyPrefix((_a = node.getText()) === null || _a === void 0 ? void 0 : _a.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + }); + } + if (node.isKind(ts_morph_1.SyntaxKind.StringLiteral)) { + node.replaceWithText("'".concat(applyPrefix((_a = node.getText()) === null || _a === void 0 ? void 0 : _a.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + } + }); + } + } + } + // classNames={...} + if (node.getName() === 'classNames' && + ((_e = node.getInitializer()) === null || _e === void 0 ? void 0 : _e.isKind(ts_morph_1.SyntaxKind.JsxExpression))) { + node + .getDescendantsOfKind(ts_morph_1.SyntaxKind.PropertyAssignment) + .forEach(function (node) { + var _a, _b, _c; + if ((_a = node.getInitializer()) === null || _a === void 0 ? void 0 : _a.isKind(ts_morph_1.SyntaxKind.CallExpression)) { + var callExpression = node.getInitializerIfKind(ts_morph_1.SyntaxKind.CallExpression); + if (callExpression) { + // Loop through the arguments. + callExpression.getArguments().forEach(function (arg) { + var _a; + if (arg.isKind(ts_morph_1.SyntaxKind.ConditionalExpression)) { + arg + .getChildrenOfKind(ts_morph_1.SyntaxKind.StringLiteral) + .forEach(function (node) { + var _a; + node.replaceWithText("'".concat(applyPrefix((_a = node.getText()) === null || _a === void 0 ? void 0 : _a.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + }); + } + if (arg.isKind(ts_morph_1.SyntaxKind.StringLiteral)) { + arg.replaceWithText("'".concat(applyPrefix((_a = arg.getText()) === null || _a === void 0 ? void 0 : _a.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + } + }); + } + } + if (((_b = node.getInitializer()) === null || _b === void 0 ? void 0 : _b.isKind(ts_morph_1.SyntaxKind.StringLiteral)) && + node.getName() !== 'variant') { + var classNames = node.getInitializer(); + if (classNames) { + classNames.replaceWithText("'".concat(applyPrefix((_c = classNames.getText()) === null || _c === void 0 ? void 0 : _c.replace(/"|'/g, ''), config.tailwind.prefix), "'")); + } + } + }); + } + }); + return [2 /*return*/, sourceFile]; + }); +}); }; +exports.transformTwPrefixes = transformTwPrefixes; +function applyPrefix(input, prefix) { + if (prefix === void 0) { prefix = ''; } + var classNames = input.split(' '); + var prefixed = []; + for (var _i = 0, classNames_1 = classNames; _i < classNames_1.length; _i++) { + var className = classNames_1[_i]; + var _a = (0, transform_css_vars_1.splitClassName)(className), variant = _a[0], value = _a[1], modifier = _a[2]; + if (variant) { + modifier + ? prefixed.push("".concat(variant, ":").concat(prefix).concat(value, "/").concat(modifier)) + : prefixed.push("".concat(variant, ":").concat(prefix).concat(value)); + } + else { + modifier + ? prefixed.push("".concat(prefix).concat(value, "/").concat(modifier)) + : prefixed.push("".concat(prefix).concat(value)); + } + } + return prefixed.join(' '); +} +function applyPrefixesCss(css, prefix) { + var lines = css.split('\n'); + for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) { + var line = lines_1[_i]; + if (line.includes('@apply')) { + var originalTWCls = line.replace('@apply', '').trim(); + var prefixedTwCls = applyPrefix(originalTWCls, prefix); + css = css.replace(originalTWCls, prefixedTwCls); + } + } + return css; +} diff --git a/packages/cli/src/utils/update-app-index.d.ts b/packages/cli/src/utils/update-app-index.d.ts new file mode 100644 index 0000000000..c475f1fc6e --- /dev/null +++ b/packages/cli/src/utils/update-app-index.d.ts @@ -0,0 +1,3 @@ +import { Config } from "@/src/utils/get-config"; +export declare function updateAppIndex(component: string, config: Config): Promise; +//# sourceMappingURL=update-app-index.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/update-app-index.d.ts.map b/packages/cli/src/utils/update-app-index.d.ts.map new file mode 100644 index 0000000000..65dbc47a98 --- /dev/null +++ b/packages/cli/src/utils/update-app-index.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"update-app-index.d.ts","sourceRoot":"","sources":["update-app-index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAG/C,wBAAsB,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAkBrE"} \ No newline at end of file diff --git a/packages/cli/src/utils/update-app-index.js b/packages/cli/src/utils/update-app-index.js new file mode 100644 index 0000000000..11cbb0177c --- /dev/null +++ b/packages/cli/src/utils/update-app-index.js @@ -0,0 +1,74 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.updateAppIndex = updateAppIndex; +var promises_1 = __importDefault(require("fs/promises")); +var path_1 = __importDefault(require("path")); +var registry_1 = require("@/src/utils/registry"); +function updateAppIndex(component, config) { + return __awaiter(this, void 0, void 0, function () { + var indexPath, registryItem, content; + var _a, _b, _c, _d; + return __generator(this, function (_e) { + switch (_e.label) { + case 0: + indexPath = path_1.default.join(config.resolvedPaths.cwd, "app/page.tsx"); + return [4 /*yield*/, promises_1.default.stat(indexPath)]; + case 1: + if (!(_e.sent()).isFile()) { + return [2 /*return*/]; + } + return [4 /*yield*/, (0, registry_1.getRegistryItem)(component, config.style)]; + case 2: + registryItem = _e.sent(); + if (!((_a = registryItem === null || registryItem === void 0 ? void 0 : registryItem.meta) === null || _a === void 0 ? void 0 : _a.importSpecifier) || + !((_b = registryItem === null || registryItem === void 0 ? void 0 : registryItem.meta) === null || _b === void 0 ? void 0 : _b.moduleSpecifier)) { + return [2 /*return*/]; + } + content = "import { ".concat((_c = registryItem === null || registryItem === void 0 ? void 0 : registryItem.meta) === null || _c === void 0 ? void 0 : _c.importSpecifier, " } from \"").concat(registryItem.meta.moduleSpecifier, "\"\n\nexport default function Page() {\n return <").concat((_d = registryItem === null || registryItem === void 0 ? void 0 : registryItem.meta) === null || _d === void 0 ? void 0 : _d.importSpecifier, " />\n}"); + return [4 /*yield*/, promises_1.default.writeFile(indexPath, content, "utf8")]; + case 3: + _e.sent(); + return [2 /*return*/]; + } + }); + }); +} diff --git a/packages/cli/src/utils/updaters/update-css-vars.d.ts b/packages/cli/src/utils/updaters/update-css-vars.d.ts new file mode 100644 index 0000000000..97af43e15f --- /dev/null +++ b/packages/cli/src/utils/updaters/update-css-vars.d.ts @@ -0,0 +1,13 @@ +import type { Config } from '@/src/utils/get-config'; +import type { registryItemCssVarsSchema } from '@/src/utils/registry/schema'; +import type { z } from 'zod'; +export declare function updateCssVars(cssVars: z.infer | undefined, config: Config, options: { + cleanupDefaultNextStyles?: boolean; + registryName?: string; + silent?: boolean; +}): Promise; +export declare function transformCssVars(input: string, cssVars: z.infer, config: Config, options: { + cleanupDefaultNextStyles?: boolean; + registryName?: string; +}): Promise; +//# sourceMappingURL=update-css-vars.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-css-vars.d.ts.map b/packages/cli/src/utils/updaters/update-css-vars.d.ts.map new file mode 100644 index 0000000000..f492efa51f --- /dev/null +++ b/packages/cli/src/utils/updaters/update-css-vars.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"update-css-vars.d.ts","sourceRoot":"","sources":["update-css-vars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAG7E,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAU7B,wBAAsB,aAAa,CACjC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,yBAAyB,CAAC,GAAG,SAAS,EAC9D,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,iBAiCF;AAED,wBAAsB,gBAAgB,CACpC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,yBAAyB,CAAC,EAClD,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,mBAsBF"} \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-css-vars.js b/packages/cli/src/utils/updaters/update-css-vars.js new file mode 100644 index 0000000000..3bcc00c3d2 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-css-vars.js @@ -0,0 +1,300 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.updateCssVars = updateCssVars; +exports.transformCssVars = transformCssVars; +var fs_1 = require("fs"); +var path_1 = __importDefault(require("path")); +var postcss_1 = __importDefault(require("postcss")); +var at_rule_1 = __importDefault(require("postcss/lib/at-rule")); +var highlighter_1 = require("@/src/utils/highlighter"); +var spinner_1 = require("@/src/utils/spinner"); +function updateCssVars(cssVars, config, options) { + return __awaiter(this, void 0, void 0, function () { + var cssFilepath, cssFilepathRelative, cssVarsSpinner, raw, output; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + if (!cssVars || + Object.keys(cssVars).length === 0 || + !config.resolvedPaths.tailwindCss) { + return [2 /*return*/]; + } + options = __assign({ cleanupDefaultNextStyles: false, silent: false }, options); + cssFilepath = config.resolvedPaths.tailwindCss; + cssFilepathRelative = path_1.default.relative(config.resolvedPaths.cwd, cssFilepath); + cssVarsSpinner = (0, spinner_1.spinner)("Updating ".concat(highlighter_1.highlighter.info(cssFilepathRelative)), { + silent: options.silent, + }).start(); + return [4 /*yield*/, fs_1.promises.readFile(cssFilepath, 'utf8')]; + case 1: + raw = _a.sent(); + return [4 /*yield*/, transformCssVars(raw, cssVars, config, { + cleanupDefaultNextStyles: options.cleanupDefaultNextStyles, + registryName: options.registryName, + })]; + case 2: + output = _a.sent(); + return [4 /*yield*/, fs_1.promises.writeFile(cssFilepath, output, 'utf8')]; + case 3: + _a.sent(); + cssVarsSpinner.succeed(); + return [2 /*return*/]; + } + }); + }); +} +function transformCssVars(input, cssVars, config, options) { + return __awaiter(this, void 0, void 0, function () { + var plugins, result; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + options = __assign({ cleanupDefaultNextStyles: false }, options); + plugins = [updateCssVarsPlugin(cssVars, options.registryName)]; + if (options.cleanupDefaultNextStyles) { + plugins.push(cleanupDefaultNextStylesPlugin()); + } + // Only add the base layer plugin if we're using css variables. + if (config.tailwind.cssVariables) { + plugins.push(updateBaseLayerPlugin(options.registryName)); + } + return [4 /*yield*/, (0, postcss_1.default)(plugins).process(input, { + from: undefined, + })]; + case 1: + result = _a.sent(); + return [2 /*return*/, result.css]; + } + }); + }); +} +function updateBaseLayerPlugin(registryName) { + return { + Once: function (root) { + var requiredRules = [ + { apply: 'border-border', selector: '*' }, + { apply: 'bg-background text-foreground', selector: 'body' }, + ]; + var baseLayer = root.nodes.find(function (node) { + return node.type === 'atrule' && + node.name === 'layer' && + node.params === 'base' && + requiredRules.every(function (_a) { + var _b; + var apply = _a.apply, selector = _a.selector; + return (_b = node.nodes) === null || _b === void 0 ? void 0 : _b.some(function (rule) { + return rule.type === 'rule' && + rule.selector === selector && + rule.nodes.some(function (applyRule) { + return applyRule.type === 'atrule' && + applyRule.name === 'apply' && + applyRule.params === apply; + }); + }); + }); + }); + if (!baseLayer) { + baseLayer = postcss_1.default.atRule({ + name: 'layer', + params: 'base', + raws: { before: '\n', between: ' ', semicolon: true }, + }); + root.append(baseLayer); + } + requiredRules.forEach(function (_a) { + var _b; + var apply = _a.apply, selector = _a.selector; + var existingRule = (_b = baseLayer === null || baseLayer === void 0 ? void 0 : baseLayer.nodes) === null || _b === void 0 ? void 0 : _b.find(function (node) { + return node.type === 'rule' && node.selector === selector; + }); + if (!existingRule) { + baseLayer === null || baseLayer === void 0 ? void 0 : baseLayer.append(postcss_1.default.rule({ + nodes: [ + postcss_1.default.atRule({ + name: 'apply', + params: apply, + raws: { before: '\n ', semicolon: true }, + }), + ], + raws: { before: '\n ', between: ' ', semicolon: true }, + selector: registryName + ? "[data-registry=\"".concat(registryName, "\"] ").concat(selector) + : selector, + })); + } + }); + }, + postcssPlugin: 'update-base-layer', + }; +} +function updateCssVarsPlugin(cssVars, registryName) { + return { + Once: function (root) { + var baseLayer = root.nodes.find(function (node) { + return node.type === 'atrule' && + node.name === 'layer' && + node.params === 'base'; + }); + if (!(baseLayer instanceof at_rule_1.default)) { + baseLayer = postcss_1.default.atRule({ + name: 'layer', + nodes: [], + params: 'base', + raws: { + before: '\n', + between: ' ', + semicolon: true, + }, + }); + root.append(baseLayer); + } + if (baseLayer !== undefined) { + // Add variables for each key in cssVars + Object.entries(cssVars).forEach(function (_a) { + var key = _a[0], vars = _a[1]; + var selector = key === 'light' + ? registryName + ? "[data-registry=\"".concat(registryName, "\"]") + : ':root' + : registryName + ? "[data-registry=\"".concat(registryName, "\"].dark") + : '.dark'; + addOrUpdateVars(baseLayer, selector, vars); + }); + } + }, + postcssPlugin: 'update-css-vars', + }; +} +function removeConflictVars(root) { + var rootRule = root.nodes.find(function (node) { return node.type === 'rule' && node.selector === ':root'; }); + if (rootRule) { + var propsToRemove_1 = new Set(['--background', '--foreground']); + rootRule.nodes + .filter(function (node) { + return node.type === 'decl' && propsToRemove_1.has(node.prop); + }) + .forEach(function (node) { return node.remove(); }); + if (rootRule.nodes.length === 0) { + rootRule.remove(); + } + } +} +function cleanupDefaultNextStylesPlugin() { + return { + Once: function (root) { + var _a, _b; + var bodyRule = root.nodes.find(function (node) { return node.type === 'rule' && node.selector === 'body'; }); + if (bodyRule) { + // Remove color from the body node. + (_a = bodyRule.nodes + .find(function (node) { + return node.type === 'decl' && + node.prop === 'color' && + ['rgb(var(--foreground-rgb))', 'var(--foreground)'].includes(node.value); + })) === null || _a === void 0 ? void 0 : _a.remove(); + // Remove background: linear-gradient. + (_b = bodyRule.nodes + .find(function (node) { + return (node.type === 'decl' && + node.prop === 'background' && + // This is only going to run on create project, so all good. + (node.value.startsWith('linear-gradient') || + node.value === 'var(--background)')); + })) === null || _b === void 0 ? void 0 : _b.remove(); + // If the body rule is empty, remove it. + if (bodyRule.nodes.length === 0) { + bodyRule.remove(); + } + } + removeConflictVars(root); + var darkRootRule = root.nodes.find(function (node) { + return node.type === 'atrule' && + node.params === '(prefers-color-scheme: dark)'; + }); + if (darkRootRule) { + removeConflictVars(darkRootRule); + if (darkRootRule.nodes.length === 0) { + darkRootRule.remove(); + } + } + }, + postcssPlugin: 'cleanup-default-next-styles', + }; +} +function addOrUpdateVars(baseLayer, selector, vars) { + var _a; + var ruleNode = (_a = baseLayer.nodes) === null || _a === void 0 ? void 0 : _a.find(function (node) { return node.type === 'rule' && node.selector === selector; }); + if (!ruleNode && Object.keys(vars).length > 0) { + ruleNode = postcss_1.default.rule({ + raws: { before: '\n ', between: ' ' }, + selector: selector, + }); + baseLayer.append(ruleNode); + } + Object.entries(vars).forEach(function (_a) { + var key = _a[0], value = _a[1]; + var prop = "--".concat(key.replace(/^--/, '')); + var newDecl = postcss_1.default.decl({ + prop: prop, + raws: { semicolon: true }, + value: value, + }); + var existingDecl = ruleNode === null || ruleNode === void 0 ? void 0 : ruleNode.nodes.find(function (node) { + return node.type === 'decl' && node.prop === prop; + }); + existingDecl + ? existingDecl.replaceWith(newDecl) + : ruleNode === null || ruleNode === void 0 ? void 0 : ruleNode.append(newDecl); + }); +} diff --git a/packages/cli/src/utils/updaters/update-css-vars.ts b/packages/cli/src/utils/updaters/update-css-vars.ts index 5719d1f6e8..520930c9fa 100644 --- a/packages/cli/src/utils/updaters/update-css-vars.ts +++ b/packages/cli/src/utils/updaters/update-css-vars.ts @@ -1,55 +1,57 @@ -import { promises as fs } from "fs" -import path from "path" -import { Config } from "@/src/utils/get-config" -import { highlighter } from "@/src/utils/highlighter" -import { registryItemCssVarsSchema } from "@/src/utils/registry/schema" -import { spinner } from "@/src/utils/spinner" -import postcss from "postcss" -import AtRule from "postcss/lib/at-rule" -import Root from "postcss/lib/root" -import Rule from "postcss/lib/rule" -import { z } from "zod" +import type { Config } from '@/src/utils/get-config'; +import type { registryItemCssVarsSchema } from '@/src/utils/registry/schema'; +import type Root from 'postcss/lib/root'; +import type Rule from 'postcss/lib/rule'; +import type { z } from 'zod'; + +import { promises as fs } from 'fs'; +import path from 'path'; +import postcss from 'postcss'; +import AtRule from 'postcss/lib/at-rule'; + +import { highlighter } from '@/src/utils/highlighter'; +import { spinner } from '@/src/utils/spinner'; export async function updateCssVars( cssVars: z.infer | undefined, config: Config, options: { - cleanupDefaultNextStyles?: boolean - silent?: boolean - registryName?: string + cleanupDefaultNextStyles?: boolean; + registryName?: string; + silent?: boolean; } ) { if ( !cssVars || - !Object.keys(cssVars).length || + Object.keys(cssVars).length === 0 || !config.resolvedPaths.tailwindCss ) { - return + return; } options = { cleanupDefaultNextStyles: false, silent: false, ...options, - } - const cssFilepath = config.resolvedPaths.tailwindCss + }; + const cssFilepath = config.resolvedPaths.tailwindCss; const cssFilepathRelative = path.relative( config.resolvedPaths.cwd, cssFilepath - ) + ); const cssVarsSpinner = spinner( `Updating ${highlighter.info(cssFilepathRelative)}`, { silent: options.silent, } - ).start() - const raw = await fs.readFile(cssFilepath, "utf8") - let output = await transformCssVars(raw, cssVars, config, { + ).start(); + const raw = await fs.readFile(cssFilepath, 'utf8'); + const output = await transformCssVars(raw, cssVars, config, { cleanupDefaultNextStyles: options.cleanupDefaultNextStyles, registryName: options.registryName, - }) - await fs.writeFile(cssFilepath, output, "utf8") - cssVarsSpinner.succeed() + }); + await fs.writeFile(cssFilepath, output, 'utf8'); + cssVarsSpinner.succeed(); } export async function transformCssVars( @@ -57,96 +59,96 @@ export async function transformCssVars( cssVars: z.infer, config: Config, options: { - cleanupDefaultNextStyles?: boolean - registryName?: string + cleanupDefaultNextStyles?: boolean; + registryName?: string; } ) { options = { cleanupDefaultNextStyles: false, ...options, - } + }; + + const plugins = [updateCssVarsPlugin(cssVars, options.registryName)]; - const plugins = [updateCssVarsPlugin(cssVars, options.registryName)] if (options.cleanupDefaultNextStyles) { - plugins.push(cleanupDefaultNextStylesPlugin()) + plugins.push(cleanupDefaultNextStylesPlugin()); } - // Only add the base layer plugin if we're using css variables. if (config.tailwind.cssVariables) { - plugins.push(updateBaseLayerPlugin(options.registryName)) + plugins.push(updateBaseLayerPlugin(options.registryName)); } const result = await postcss(plugins).process(input, { from: undefined, - }) + }); - return result.css + return result.css; } function updateBaseLayerPlugin(registryName?: string) { return { - postcssPlugin: "update-base-layer", Once(root: Root) { const requiredRules = [ - { selector: "*", apply: "border-border" }, - { selector: "body", apply: "bg-background text-foreground" }, - ] + { apply: 'border-border', selector: '*' }, + { apply: 'bg-background text-foreground', selector: 'body' }, + ]; let baseLayer = root.nodes.find( (node): node is AtRule => - node.type === "atrule" && - node.name === "layer" && - node.params === "base" && - requiredRules.every(({ selector, apply }) => + node.type === 'atrule' && + node.name === 'layer' && + node.params === 'base' && + requiredRules.every(({ apply, selector }) => node.nodes?.some( (rule): rule is Rule => - rule.type === "rule" && + rule.type === 'rule' && rule.selector === selector && rule.nodes.some( (applyRule): applyRule is AtRule => - applyRule.type === "atrule" && - applyRule.name === "apply" && + applyRule.type === 'atrule' && + applyRule.name === 'apply' && applyRule.params === apply ) ) ) - ) as AtRule | undefined + ) as AtRule | undefined; if (!baseLayer) { baseLayer = postcss.atRule({ - name: "layer", - params: "base", - raws: { semicolon: true, between: " ", before: "\n" }, - }) - root.append(baseLayer) + name: 'layer', + params: 'base', + raws: { before: '\n', between: ' ', semicolon: true }, + }); + root.append(baseLayer); } - requiredRules.forEach(({ selector, apply }) => { + requiredRules.forEach(({ apply, selector }) => { const existingRule = baseLayer?.nodes?.find( (node): node is Rule => - node.type === "rule" && node.selector === selector - ) + node.type === 'rule' && node.selector === selector + ); if (!existingRule) { baseLayer?.append( postcss.rule({ - selector: registryName - ? `[data-registry="${registryName}"] ${selector}` - : selector, nodes: [ postcss.atRule({ - name: "apply", + name: 'apply', params: apply, - raws: { semicolon: true, before: "\n " }, + raws: { before: '\n ', semicolon: true }, }), ], - raws: { semicolon: true, between: " ", before: "\n " }, + raws: { before: '\n ', between: ' ', semicolon: true }, + selector: registryName + ? `[data-registry="${registryName}"] ${selector}` + : selector, }) - ) + ); } - }) + }); }, - } + postcssPlugin: 'update-base-layer', + }; } function updateCssVarsPlugin( @@ -154,123 +156,124 @@ function updateCssVarsPlugin( registryName?: string ) { return { - postcssPlugin: "update-css-vars", Once(root: Root) { let baseLayer = root.nodes.find( (node) => - node.type === "atrule" && - node.name === "layer" && - node.params === "base" - ) as AtRule | undefined + node.type === 'atrule' && + node.name === 'layer' && + node.params === 'base' + ) as AtRule | undefined; if (!(baseLayer instanceof AtRule)) { baseLayer = postcss.atRule({ - name: "layer", - params: "base", + name: 'layer', nodes: [], + params: 'base', raws: { + before: '\n', + between: ' ', semicolon: true, - before: "\n", - between: " ", }, - }) - root.append(baseLayer) + }); + root.append(baseLayer); } - if (baseLayer !== undefined) { // Add variables for each key in cssVars Object.entries(cssVars).forEach(([key, vars]) => { const selector = - key === "light" + key === 'light' ? registryName ? `[data-registry="${registryName}"]` - : ":root" + : ':root' : registryName - ? `[data-registry="${registryName}"].dark` - : ".dark" - addOrUpdateVars(baseLayer as AtRule, selector, vars) - }) + ? `[data-registry="${registryName}"].dark` + : '.dark'; + addOrUpdateVars(baseLayer as AtRule, selector, vars); + }); } }, - } + postcssPlugin: 'update-css-vars', + }; } -function removeConflictVars(root: Rule | Root) { +function removeConflictVars(root: Root | Rule) { const rootRule = root.nodes.find( - (node): node is Rule => node.type === "rule" && node.selector === ":root" - ) + (node): node is Rule => node.type === 'rule' && node.selector === ':root' + ); if (rootRule) { - const propsToRemove = ["--background", "--foreground"] + const propsToRemove = new Set(['--background', '--foreground']); rootRule.nodes .filter( (node): node is postcss.Declaration => - node.type === "decl" && propsToRemove.includes(node.prop) + node.type === 'decl' && propsToRemove.has(node.prop) ) - .forEach((node) => node.remove()) + .forEach((node) => node.remove()); if (rootRule.nodes.length === 0) { - rootRule.remove() + rootRule.remove(); } } } function cleanupDefaultNextStylesPlugin() { return { - postcssPlugin: "cleanup-default-next-styles", Once(root: Root) { const bodyRule = root.nodes.find( - (node): node is Rule => node.type === "rule" && node.selector === "body" - ) + (node): node is Rule => node.type === 'rule' && node.selector === 'body' + ); + if (bodyRule) { // Remove color from the body node. bodyRule.nodes .find( (node): node is postcss.Declaration => - node.type === "decl" && - node.prop === "color" && - ["rgb(var(--foreground-rgb))", "var(--foreground)"].includes( + node.type === 'decl' && + node.prop === 'color' && + ['rgb(var(--foreground-rgb))', 'var(--foreground)'].includes( node.value ) ) - ?.remove() + ?.remove(); // Remove background: linear-gradient. bodyRule.nodes .find((node): node is postcss.Declaration => { return ( - node.type === "decl" && - node.prop === "background" && + node.type === 'decl' && + node.prop === 'background' && // This is only going to run on create project, so all good. - (node.value.startsWith("linear-gradient") || - node.value === "var(--background)") - ) + (node.value.startsWith('linear-gradient') || + node.value === 'var(--background)') + ); }) - ?.remove() + ?.remove(); // If the body rule is empty, remove it. if (bodyRule.nodes.length === 0) { - bodyRule.remove() + bodyRule.remove(); } } - removeConflictVars(root) + removeConflictVars(root); const darkRootRule = root.nodes.find( (node): node is Rule => - node.type === "atrule" && - node.params === "(prefers-color-scheme: dark)" - ) + node.type === 'atrule' && + node.params === '(prefers-color-scheme: dark)' + ); if (darkRootRule) { - removeConflictVars(darkRootRule) + removeConflictVars(darkRootRule); + if (darkRootRule.nodes.length === 0) { - darkRootRule.remove() + darkRootRule.remove(); } } }, - } + postcssPlugin: 'cleanup-default-next-styles', + }; } function addOrUpdateVars( @@ -279,32 +282,32 @@ function addOrUpdateVars( vars: Record ) { let ruleNode = baseLayer.nodes?.find( - (node): node is Rule => node.type === "rule" && node.selector === selector - ) - - if (!ruleNode) { - if (Object.keys(vars).length > 0) { - ruleNode = postcss.rule({ - selector, - raws: { between: " ", before: "\n " }, - }) - baseLayer.append(ruleNode) - } + (node): node is Rule => node.type === 'rule' && node.selector === selector + ); + + if (!ruleNode && Object.keys(vars).length > 0) { + ruleNode = postcss.rule({ + raws: { before: '\n ', between: ' ' }, + selector, + }); + baseLayer.append(ruleNode); } Object.entries(vars).forEach(([key, value]) => { - const prop = `--${key.replace(/^--/, "")}` + const prop = `--${key.replace(/^--/, '')}`; const newDecl = postcss.decl({ prop, - value, raws: { semicolon: true }, - }) + value, + }); const existingDecl = ruleNode?.nodes.find( (node): node is postcss.Declaration => - node.type === "decl" && node.prop === prop - ) + node.type === 'decl' && node.prop === prop + ); - existingDecl ? existingDecl.replaceWith(newDecl) : ruleNode?.append(newDecl) - }) + existingDecl + ? existingDecl.replaceWith(newDecl) + : ruleNode?.append(newDecl); + }); } diff --git a/packages/cli/src/utils/updaters/update-dependencies.d.ts b/packages/cli/src/utils/updaters/update-dependencies.d.ts new file mode 100644 index 0000000000..a53a81dfa5 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-dependencies.d.ts @@ -0,0 +1,6 @@ +import type { Config } from '@/src/utils/get-config'; +import type { RegistryItem } from '@/src/utils/registry/schema'; +export declare function updateDependencies(dependencies: RegistryItem['dependencies'], config: Config, options: { + silent?: boolean; +}): Promise; +//# sourceMappingURL=update-dependencies.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-dependencies.d.ts.map b/packages/cli/src/utils/updaters/update-dependencies.d.ts.map new file mode 100644 index 0000000000..d2d176f939 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-dependencies.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"update-dependencies.d.ts","sourceRoot":"","sources":["update-dependencies.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAUhE,wBAAsB,kBAAkB,CACtC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,EAC1C,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,iBAyDF"} \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-dependencies.js b/packages/cli/src/utils/updaters/update-dependencies.js new file mode 100644 index 0000000000..4f0b45ed35 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-dependencies.js @@ -0,0 +1,130 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.updateDependencies = updateDependencies; +var execa_1 = require("execa"); +var prompts_1 = __importDefault(require("prompts")); +var get_package_info_1 = require("@/src/utils/get-package-info"); +var get_package_manager_1 = require("@/src/utils/get-package-manager"); +var logger_1 = require("@/src/utils/logger"); +var spinner_1 = require("@/src/utils/spinner"); +function updateDependencies(dependencies, config, options) { + return __awaiter(this, void 0, void 0, function () { + var dependenciesSpinner, packageManager, flag, confirmation; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: + dependencies = Array.from(new Set(dependencies)); + if (!(dependencies === null || dependencies === void 0 ? void 0 : dependencies.length)) { + return [2 /*return*/]; + } + options = __assign({ silent: false }, options); + dependenciesSpinner = (_a = (0, spinner_1.spinner)("Installing dependencies.", { + silent: options.silent, + })) === null || _a === void 0 ? void 0 : _a.start(); + return [4 /*yield*/, (0, get_package_manager_1.getPackageManager)(config.resolvedPaths.cwd)]; + case 1: + packageManager = _b.sent(); + flag = ''; + if (!(isUsingReact19(config) && packageManager === 'npm')) return [3 /*break*/, 3]; + dependenciesSpinner.stopAndPersist(); + logger_1.logger.warn('\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).\n'); + return [4 /*yield*/, (0, prompts_1.default)([ + { + choices: [ + { title: 'Use --force', value: 'force' }, + { title: 'Use --legacy-peer-deps', value: 'legacy-peer-deps' }, + ], + message: 'How would you like to proceed?', + name: 'flag', + type: 'select', + }, + ])]; + case 2: + confirmation = _b.sent(); + if (confirmation) { + flag = confirmation.flag; + } + _b.label = 3; + case 3: + dependenciesSpinner === null || dependenciesSpinner === void 0 ? void 0 : dependenciesSpinner.start(); + return [4 /*yield*/, (0, execa_1.execa)(packageManager, __spreadArray(__spreadArray([ + packageManager === 'npm' ? 'install' : 'add' + ], (packageManager === 'npm' && flag ? ["--".concat(flag)] : []), true), dependencies, true), { + cwd: config.resolvedPaths.cwd, + })]; + case 4: + _b.sent(); + dependenciesSpinner === null || dependenciesSpinner === void 0 ? void 0 : dependenciesSpinner.succeed(); + return [2 /*return*/]; + } + }); + }); +} +function isUsingReact19(config) { + var _a; + var packageInfo = (0, get_package_info_1.getPackageInfo)(config.resolvedPaths.cwd); + if (!((_a = packageInfo === null || packageInfo === void 0 ? void 0 : packageInfo.dependencies) === null || _a === void 0 ? void 0 : _a.react)) { + return false; + } + return /^[\^~]?19(?:\.\d+)*(?:-.*)?$/.test(packageInfo.dependencies.react); +} diff --git a/packages/cli/src/utils/updaters/update-files.d.ts b/packages/cli/src/utils/updaters/update-files.d.ts new file mode 100644 index 0000000000..e684c20f85 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-files.d.ts @@ -0,0 +1,10 @@ +import { Config } from "@/src/utils/get-config"; +import { getProjectInfo } from "@/src/utils/get-project-info"; +import { RegistryItem } from "@/src/utils/registry/schema"; +export declare function resolveTargetDir(projectInfo: Awaited>, config: Config, target: string): string; +export declare function updateFiles(files: RegistryItem["files"], config: Config, options: { + overwrite?: boolean; + force?: boolean; + silent?: boolean; +}): Promise; +//# sourceMappingURL=update-files.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-files.d.ts.map b/packages/cli/src/utils/updaters/update-files.d.ts.map new file mode 100644 index 0000000000..9cbdd18407 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-files.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"update-files.d.ts","sourceRoot":"","sources":["update-files.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAO7D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAS1D,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,EACvD,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,UAQf;AAED,wBAAsB,WAAW,CAC/B,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAC5B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,iBA6IF"} \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-files.js b/packages/cli/src/utils/updaters/update-files.js new file mode 100644 index 0000000000..61808ba581 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-files.js @@ -0,0 +1,230 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.resolveTargetDir = resolveTargetDir; +exports.updateFiles = updateFiles; +var fs_1 = require("fs"); +var path_1 = __importStar(require("path")); +var get_project_info_1 = require("@/src/utils/get-project-info"); +var highlighter_1 = require("@/src/utils/highlighter"); +var logger_1 = require("@/src/utils/logger"); +var registry_1 = require("@/src/utils/registry"); +var spinner_1 = require("@/src/utils/spinner"); +var transformers_1 = require("@/src/utils/transformers"); +var transform_css_vars_1 = require("@/src/utils/transformers/transform-css-vars"); +var transform_import_1 = require("@/src/utils/transformers/transform-import"); +var transform_rsc_1 = require("@/src/utils/transformers/transform-rsc"); +var transform_tw_prefix_1 = require("@/src/utils/transformers/transform-tw-prefix"); +var prompts_1 = __importDefault(require("prompts")); +function resolveTargetDir(projectInfo, config, target) { + if (target.startsWith("~/")) { + return path_1.default.join(config.resolvedPaths.cwd, target.replace("~/", "")); + } + return (projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.isSrcDir) + ? path_1.default.join(config.resolvedPaths.cwd, "src", target) + : path_1.default.join(config.resolvedPaths.cwd, target); +} +function updateFiles(files, config, options) { + return __awaiter(this, void 0, void 0, function () { + var filesCreatedSpinner, _a, projectInfo, baseColor, filesCreated, filesUpdated, filesSkipped, _i, files_1, file, targetDir, fileName, filePath, existingFile, overwrite, content, hasUpdatedFiles, _b, filesCreated_1, file, _c, filesUpdated_1, file, _d, filesSkipped_1, file; + var _e, _f, _g; + return __generator(this, function (_h) { + switch (_h.label) { + case 0: + if (!(files === null || files === void 0 ? void 0 : files.length)) { + return [2 /*return*/]; + } + options = __assign({ overwrite: false, force: false, silent: false }, options); + filesCreatedSpinner = (_e = (0, spinner_1.spinner)("Updating files.", { + silent: options.silent, + })) === null || _e === void 0 ? void 0 : _e.start(); + return [4 /*yield*/, Promise.all([ + (0, get_project_info_1.getProjectInfo)(config.resolvedPaths.cwd), + (0, registry_1.getRegistryBaseColor)(config.tailwind.baseColor), + ])]; + case 1: + _a = _h.sent(), projectInfo = _a[0], baseColor = _a[1]; + filesCreated = []; + filesUpdated = []; + filesSkipped = []; + _i = 0, files_1 = files; + _h.label = 2; + case 2: + if (!(_i < files_1.length)) return [3 /*break*/, 10]; + file = files_1[_i]; + if (!file.content) { + return [3 /*break*/, 9]; + } + targetDir = (0, registry_1.getRegistryItemFileTargetPath)(file, config); + fileName = (0, path_1.basename)(file.path); + filePath = path_1.default.join(targetDir, fileName); + if (file.target) { + filePath = resolveTargetDir(projectInfo, config, file.target); + targetDir = path_1.default.dirname(filePath); + } + if (!config.tsx) { + filePath = filePath.replace(/\.tsx?$/, function (match) { + return match === ".tsx" ? ".jsx" : ".js"; + }); + } + existingFile = (0, fs_1.existsSync)(filePath); + if (!(existingFile && !options.overwrite)) return [3 /*break*/, 4]; + filesCreatedSpinner.stop(); + return [4 /*yield*/, (0, prompts_1.default)({ + type: "confirm", + name: "overwrite", + message: "The file ".concat(highlighter_1.highlighter.info(fileName), " already exists. Would you like to overwrite?"), + initial: false, + })]; + case 3: + overwrite = (_h.sent()).overwrite; + if (!overwrite) { + filesSkipped.push(path_1.default.relative(config.resolvedPaths.cwd, filePath)); + return [3 /*break*/, 9]; + } + filesCreatedSpinner === null || filesCreatedSpinner === void 0 ? void 0 : filesCreatedSpinner.start(); + _h.label = 4; + case 4: + if (!!(0, fs_1.existsSync)(targetDir)) return [3 /*break*/, 6]; + return [4 /*yield*/, fs_1.promises.mkdir(targetDir, { recursive: true })]; + case 5: + _h.sent(); + _h.label = 6; + case 6: return [4 /*yield*/, (0, transformers_1.transform)({ + filename: file.path, + raw: file.content, + config: config, + baseColor: baseColor, + transformJsx: !config.tsx, + }, [transform_import_1.transformImport, transform_rsc_1.transformRsc, transform_css_vars_1.transformCssVars, transform_tw_prefix_1.transformTwPrefixes])]; + case 7: + content = _h.sent(); + return [4 /*yield*/, fs_1.promises.writeFile(filePath, content, "utf-8")]; + case 8: + _h.sent(); + existingFile + ? filesUpdated.push(path_1.default.relative(config.resolvedPaths.cwd, filePath)) + : filesCreated.push(path_1.default.relative(config.resolvedPaths.cwd, filePath)); + _h.label = 9; + case 9: + _i++; + return [3 /*break*/, 2]; + case 10: + hasUpdatedFiles = filesCreated.length || filesUpdated.length; + if (!hasUpdatedFiles && !filesSkipped.length) { + filesCreatedSpinner === null || filesCreatedSpinner === void 0 ? void 0 : filesCreatedSpinner.info("No files updated."); + } + if (filesCreated.length) { + filesCreatedSpinner === null || filesCreatedSpinner === void 0 ? void 0 : filesCreatedSpinner.succeed("Created ".concat(filesCreated.length, " ").concat(filesCreated.length === 1 ? "file" : "files", ":")); + if (!options.silent) { + for (_b = 0, filesCreated_1 = filesCreated; _b < filesCreated_1.length; _b++) { + file = filesCreated_1[_b]; + logger_1.logger.log(" - ".concat(file)); + } + } + } + else { + filesCreatedSpinner === null || filesCreatedSpinner === void 0 ? void 0 : filesCreatedSpinner.stop(); + } + if (filesUpdated.length) { + (_f = (0, spinner_1.spinner)("Updated ".concat(filesUpdated.length, " ").concat(filesUpdated.length === 1 ? "file" : "files", ":"), { + silent: options.silent, + })) === null || _f === void 0 ? void 0 : _f.info(); + if (!options.silent) { + for (_c = 0, filesUpdated_1 = filesUpdated; _c < filesUpdated_1.length; _c++) { + file = filesUpdated_1[_c]; + logger_1.logger.log(" - ".concat(file)); + } + } + } + if (filesSkipped.length) { + (_g = (0, spinner_1.spinner)("Skipped ".concat(filesSkipped.length, " ").concat(filesUpdated.length === 1 ? "file" : "files", ":"), { + silent: options.silent, + })) === null || _g === void 0 ? void 0 : _g.info(); + if (!options.silent) { + for (_d = 0, filesSkipped_1 = filesSkipped; _d < filesSkipped_1.length; _d++) { + file = filesSkipped_1[_d]; + logger_1.logger.log(" - ".concat(file)); + } + } + } + if (!options.silent) { + logger_1.logger.break(); + } + return [2 /*return*/]; + } + }); + }); +} diff --git a/packages/cli/src/utils/updaters/update-tailwind-config.d.ts b/packages/cli/src/utils/updaters/update-tailwind-config.d.ts new file mode 100644 index 0000000000..0dfd04306e --- /dev/null +++ b/packages/cli/src/utils/updaters/update-tailwind-config.d.ts @@ -0,0 +1,18 @@ +import type { Config } from '@/src/utils/get-config'; +import type { registryItemTailwindSchema } from '@/src/utils/registry/schema'; +import type { Config as TailwindConfig } from 'tailwindcss'; +import type { z } from 'zod'; +import { type ObjectLiteralExpression } from 'ts-morph'; +export type UpdaterTailwindConfig = Omit & { + plugins?: string[]; +}; +export declare function updateTailwindConfig(tailwindConfig: z.infer['config'] | undefined, config: Config, options: { + silent?: boolean; +}): Promise; +export declare function transformTailwindConfig(input: string, tailwindConfig: UpdaterTailwindConfig, config: Config): Promise; +export declare function _createSourceFile(input: string, config: Config | null): Promise; +export declare function _getQuoteChar(configObject: ObjectLiteralExpression): "'" | "\""; +export declare function nestSpreadProperties(obj: ObjectLiteralExpression): void; +export declare function unnestSpreadProperties(obj: ObjectLiteralExpression): void; +export declare function buildTailwindThemeColorsFromCssVars(cssVars: Record): Record; +//# sourceMappingURL=update-tailwind-config.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-tailwind-config.d.ts.map b/packages/cli/src/utils/updaters/update-tailwind-config.d.ts.map new file mode 100644 index 0000000000..263e8e58cc --- /dev/null +++ b/packages/cli/src/utils/updaters/update-tailwind-config.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"update-tailwind-config.d.ts","sourceRoot":"","sources":["update-tailwind-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAO7B,OAAO,EACL,KAAK,uBAAuB,EAO7B,MAAM,UAAU,CAAC;AAKlB,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG;IAEpE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAEF,wBAAsB,oBAAoB,CACxC,cAAc,EACV,CAAC,CAAC,KAAK,CAAC,OAAO,0BAA0B,CAAC,CAAC,QAAQ,CAAC,GACpD,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,iBAyBF;AAED,wBAAsB,uBAAuB,CAC3C,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,qBAAqB,EACrC,MAAM,EAAE,MAAM,mBA8Cf;AAgJD,wBAAsB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,0CAiB3E;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,uBAAuB,cAMlE;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,uBAAuB,QA8BhE;AAED,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,uBAAuB,QAsBlE;AAqED,wBAAgB,mCAAmC,CACjD,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,uBAoChC"} \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-tailwind-config.js b/packages/cli/src/utils/updaters/update-tailwind-config.js new file mode 100644 index 0000000000..5f1dd71718 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-tailwind-config.js @@ -0,0 +1,420 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.updateTailwindConfig = updateTailwindConfig; +exports.transformTailwindConfig = transformTailwindConfig; +exports._createSourceFile = _createSourceFile; +exports._getQuoteChar = _getQuoteChar; +exports.nestSpreadProperties = nestSpreadProperties; +exports.unnestSpreadProperties = unnestSpreadProperties; +exports.buildTailwindThemeColorsFromCssVars = buildTailwindThemeColorsFromCssVars; +var deepmerge_1 = __importDefault(require("deepmerge")); +var fs_1 = require("fs"); +var os_1 = require("os"); +var path_1 = __importDefault(require("path")); +var stringify_object_1 = __importDefault(require("stringify-object")); +var ts_morph_1 = require("ts-morph"); +var highlighter_1 = require("@/src/utils/highlighter"); +var spinner_1 = require("@/src/utils/spinner"); +function updateTailwindConfig(tailwindConfig, config, options) { + return __awaiter(this, void 0, void 0, function () { + var tailwindFileRelativePath, tailwindSpinner, raw, output; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + if (!tailwindConfig) { + return [2 /*return*/]; + } + options = __assign({ silent: false }, options); + tailwindFileRelativePath = path_1.default.relative(config.resolvedPaths.cwd, config.resolvedPaths.tailwindConfig); + tailwindSpinner = (0, spinner_1.spinner)("Updating ".concat(highlighter_1.highlighter.info(tailwindFileRelativePath)), { + silent: options.silent, + }).start(); + return [4 /*yield*/, fs_1.promises.readFile(config.resolvedPaths.tailwindConfig, 'utf8')]; + case 1: + raw = _a.sent(); + return [4 /*yield*/, transformTailwindConfig(raw, tailwindConfig, config)]; + case 2: + output = _a.sent(); + return [4 /*yield*/, fs_1.promises.writeFile(config.resolvedPaths.tailwindConfig, output, 'utf8')]; + case 3: + _a.sent(); + tailwindSpinner === null || tailwindSpinner === void 0 ? void 0 : tailwindSpinner.succeed(); + return [2 /*return*/]; + } + }); + }); +} +function transformTailwindConfig(input, tailwindConfig, config) { + return __awaiter(this, void 0, void 0, function () { + var sourceFile, configObject, quoteChar; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: return [4 /*yield*/, _createSourceFile(input, config)]; + case 1: + sourceFile = _b.sent(); + configObject = sourceFile + .getDescendantsOfKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression) + .find(function (node) { + return node + .getProperties() + .some(function (property) { + return property.isKind(ts_morph_1.SyntaxKind.PropertyAssignment) && + property.getName() === 'content'; + }); + }); + // We couldn't find the config object, so we return the input as is. + if (!configObject) { + return [2 /*return*/, input]; + } + quoteChar = _getQuoteChar(configObject); + // Add darkMode. + addTailwindConfigProperty(configObject, { + name: 'darkMode', + value: 'class', + }, { quoteChar: quoteChar }); + // Add Tailwind config plugins. + (_a = tailwindConfig.plugins) === null || _a === void 0 ? void 0 : _a.forEach(function (plugin) { + addTailwindConfigPlugin(configObject, plugin); + }); + if (!tailwindConfig.theme) return [3 /*break*/, 3]; + return [4 /*yield*/, addTailwindConfigTheme(configObject, tailwindConfig.theme)]; + case 2: + _b.sent(); + _b.label = 3; + case 3: return [2 /*return*/, sourceFile.getFullText()]; + } + }); + }); +} +function addTailwindConfigProperty(configObject, property, _a) { + var quoteChar = _a.quoteChar; + var existingProperty = configObject.getProperty('darkMode'); + if (!existingProperty) { + var newProperty = { + initializer: "[".concat(quoteChar).concat(property.value).concat(quoteChar, "]"), + name: property.name, + }; + // We need to add darkMode as the first property. + if (property.name === 'darkMode') { + configObject.insertPropertyAssignment(0, newProperty); + return configObject; + } + configObject.addPropertyAssignment(newProperty); + return configObject; + } + if (existingProperty.isKind(ts_morph_1.SyntaxKind.PropertyAssignment)) { + var initializer = existingProperty.getInitializer(); + var newValue = "".concat(quoteChar).concat(property.value).concat(quoteChar); + // If property is a string, change it to an array and append. + if (initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.StringLiteral)) { + var initializerText = initializer.getText(); + initializer.replaceWithText("[".concat(initializerText, ", ").concat(newValue, "]")); + return configObject; + } + // If property is an array, append. + if (initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.ArrayLiteralExpression)) { + // Check if the array already contains the value. + if (initializer + .getElements() + .map(function (element) { return element.getText(); }) + .includes(newValue)) { + return configObject; + } + initializer.addElement(newValue); + } + return configObject; + } + return configObject; +} +function addTailwindConfigTheme(configObject, theme) { + return __awaiter(this, void 0, void 0, function () { + var themeProperty, themeInitializer, themeObjectString, themeObject, result, resultString; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: + // Ensure there is a theme property. + if (!configObject.getProperty('theme')) { + configObject.addPropertyAssignment({ + initializer: '{}', + name: 'theme', + }); + } + // Nest all spread properties. + nestSpreadProperties(configObject); + themeProperty = (_a = configObject + .getPropertyOrThrow('theme')) === null || _a === void 0 ? void 0 : _a.asKindOrThrow(ts_morph_1.SyntaxKind.PropertyAssignment); + themeInitializer = themeProperty.getInitializer(); + if (!(themeInitializer === null || themeInitializer === void 0 ? void 0 : themeInitializer.isKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression))) return [3 /*break*/, 2]; + themeObjectString = themeInitializer.getText(); + return [4 /*yield*/, parseObjectLiteral(themeObjectString)]; + case 1: + themeObject = _b.sent(); + result = (0, deepmerge_1.default)(themeObject, theme); + resultString = (0, stringify_object_1.default)(result) + .replace(/'"/g, "'") // Replace `\" with " + .replace(/"'/g, "'") // Replace `\" with " + .replace(/'\[/g, '[') // Replace `[ with [ + .replace(/]'/g, ']') // Replace `] with ] + .replace(/'\\'/g, "'") // Replace `\' with ' + .replace(/\\'/g, "'") // Replace \' with ' + .replace(/\\''/g, "'") + .replace(/''/g, "'"); + themeInitializer.replaceWithText(resultString); + _b.label = 2; + case 2: + // Unnest all spread properties. + unnestSpreadProperties(configObject); + return [2 /*return*/]; + } + }); + }); +} +function addTailwindConfigPlugin(configObject, plugin) { + var existingPlugins = configObject.getProperty('plugins'); + if (!existingPlugins) { + configObject.addPropertyAssignment({ + initializer: "[".concat(plugin, "]"), + name: 'plugins', + }); + return configObject; + } + if (existingPlugins.isKind(ts_morph_1.SyntaxKind.PropertyAssignment)) { + var initializer = existingPlugins.getInitializer(); + if (initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.ArrayLiteralExpression)) { + if (initializer + .getElements() + .map(function (element) { + return element.getText().replace(/["']/g, ''); + }) + .includes(plugin.replace(/["']/g, ''))) { + return configObject; + } + initializer.addElement(plugin); + } + return configObject; + } + return configObject; +} +function _createSourceFile(input, config) { + return __awaiter(this, void 0, void 0, function () { + var dir, resolvedPath, tempFile, project, sourceFile; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: return [4 /*yield*/, fs_1.promises.mkdtemp(path_1.default.join((0, os_1.tmpdir)(), 'shadcn-'))]; + case 1: + dir = _b.sent(); + resolvedPath = ((_a = config === null || config === void 0 ? void 0 : config.resolvedPaths) === null || _a === void 0 ? void 0 : _a.tailwindConfig) || 'tailwind.config.ts'; + tempFile = path_1.default.join(dir, "shadcn-".concat(path_1.default.basename(resolvedPath))); + project = new ts_morph_1.Project({ + compilerOptions: {}, + }); + sourceFile = project.createSourceFile(tempFile, input, { + // Note: .js and .mjs can still be valid for TS projects. + // We can't infer TypeScript from config.tsx. + scriptKind: path_1.default.extname(resolvedPath) === '.ts' ? ts_morph_1.ScriptKind.TS : ts_morph_1.ScriptKind.JS, + }); + return [2 /*return*/, sourceFile]; + } + }); + }); +} +function _getQuoteChar(configObject) { + var _a; + return ((_a = configObject + .getFirstDescendantByKind(ts_morph_1.SyntaxKind.StringLiteral)) === null || _a === void 0 ? void 0 : _a.getQuoteKind()) === ts_morph_1.QuoteKind.Single + ? "'" + : '"'; +} +function nestSpreadProperties(obj) { + var properties = obj.getProperties(); + for (var i = 0; i < properties.length; i++) { + var prop = properties[i]; + if (prop.isKind(ts_morph_1.SyntaxKind.SpreadAssignment)) { + var spreadAssignment = prop.asKindOrThrow(ts_morph_1.SyntaxKind.SpreadAssignment); + var spreadText = spreadAssignment.getExpression().getText(); + // Replace spread with a property assignment + obj.insertPropertyAssignment(i, { + initializer: "\"...".concat(spreadText.replace(/^\.{3}/, ''), "\""), + name: "___".concat(spreadText.replace(/^\.{3}/, '')), + }); + // Remove the original spread assignment + spreadAssignment.remove(); + } + else if (prop.isKind(ts_morph_1.SyntaxKind.PropertyAssignment)) { + var propAssignment = prop.asKindOrThrow(ts_morph_1.SyntaxKind.PropertyAssignment); + var initializer = propAssignment.getInitializer(); + if (initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression)) { + // Recursively process nested object literals + nestSpreadProperties(initializer.asKindOrThrow(ts_morph_1.SyntaxKind.ObjectLiteralExpression)); + } + } + } +} +function unnestSpreadProperties(obj) { + var properties = obj.getProperties(); + for (var i = 0; i < properties.length; i++) { + var prop = properties[i]; + if (prop.isKind(ts_morph_1.SyntaxKind.PropertyAssignment)) { + var propAssignment = prop; + var initializer = propAssignment.getInitializer(); + if (initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.StringLiteral)) { + var value = initializer.getLiteralValue(); + if (value.startsWith('...')) { + obj.insertSpreadAssignment(i, { expression: value.slice(3) }); + propAssignment.remove(); + } + } + else if (initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression)) { + unnestSpreadProperties(initializer); + } + } + } +} +function parseObjectLiteral(objectLiteralString) { + return __awaiter(this, void 0, void 0, function () { + var sourceFile, statement, declaration, initializer; + var _a; + return __generator(this, function (_b) { + switch (_b.label) { + case 0: return [4 /*yield*/, _createSourceFile("const theme = ".concat(objectLiteralString), null)]; + case 1: + sourceFile = _b.sent(); + statement = sourceFile.getStatements()[0]; + if (!((statement === null || statement === void 0 ? void 0 : statement.getKind()) === ts_morph_1.SyntaxKind.VariableStatement)) return [3 /*break*/, 3]; + declaration = (_a = statement + .getDeclarationList()) === null || _a === void 0 ? void 0 : _a.getDeclarations()[0]; + initializer = declaration.getInitializer(); + if (!(initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression))) return [3 /*break*/, 3]; + return [4 /*yield*/, parseObjectLiteralExpression(initializer)]; + case 2: return [2 /*return*/, _b.sent()]; + case 3: throw new Error('Invalid input: not an object literal'); + } + }); + }); +} +function parseObjectLiteralExpression(node) { + var _a; + var result = {}; + for (var _i = 0, _b = node.getProperties(); _i < _b.length; _i++) { + var property = _b[_i]; + if (property.isKind(ts_morph_1.SyntaxKind.PropertyAssignment)) { + var name_1 = property.getName().replace(/'/g, ''); + result[name_1] = ((_a = property + .getInitializer()) === null || _a === void 0 ? void 0 : _a.isKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression)) + ? parseObjectLiteralExpression(property.getInitializer()) + : parseValue(property.getInitializer()); + } + } + return result; +} +function parseValue(node) { + switch (node.kind) { + case ts_morph_1.SyntaxKind.ArrayLiteralExpression: { + return node.elements.map(parseValue); + } + case ts_morph_1.SyntaxKind.FalseKeyword: { + return false; + } + case ts_morph_1.SyntaxKind.NullKeyword: { + return null; + } + case ts_morph_1.SyntaxKind.NumericLiteral: { + return Number(node.text); + } + case ts_morph_1.SyntaxKind.StringLiteral: { + return node.text; + } + case ts_morph_1.SyntaxKind.TrueKeyword: { + return true; + } + default: { + return node.getText(); + } + } +} +function buildTailwindThemeColorsFromCssVars(cssVars) { + var result = {}; + for (var _i = 0, _a = Object.keys(cssVars); _i < _a.length; _i++) { + var key = _a[_i]; + var parts = key.split('-'); + var colorName = parts[0]; + var subType = parts.slice(1).join('-'); + if (subType === '') { + if (typeof result[colorName] === 'object') { + result[colorName].DEFAULT = "hsl(var(--".concat(key, "))"); + } + else { + result[colorName] = "hsl(var(--".concat(key, "))"); + } + } + else { + if (typeof result[colorName] !== 'object') { + result[colorName] = { DEFAULT: "hsl(var(--".concat(colorName, "))") }; + } + result[colorName][subType] = "hsl(var(--".concat(key, "))"); + } + } + // Remove DEFAULT if it's not in the original cssVars + for (var _b = 0, _c = Object.entries(result); _b < _c.length; _b++) { + var _d = _c[_b], colorName = _d[0], value = _d[1]; + if (typeof value === 'object' && + value.DEFAULT === "hsl(var(--".concat(colorName, "))") && + !(colorName in cssVars)) { + delete value.DEFAULT; + } + } + return result; +} diff --git a/packages/cli/src/utils/updaters/update-tailwind-config.ts b/packages/cli/src/utils/updaters/update-tailwind-config.ts index f344d03643..24b289745b 100644 --- a/packages/cli/src/utils/updaters/update-tailwind-config.ts +++ b/packages/cli/src/utils/updaters/update-tailwind-config.ts @@ -1,61 +1,63 @@ -import { promises as fs } from "fs" -import { tmpdir } from "os" -import path from "path" -import { Config } from "@/src/utils/get-config" -import { highlighter } from "@/src/utils/highlighter" -import { registryItemTailwindSchema } from "@/src/utils/registry/schema" -import { spinner } from "@/src/utils/spinner" -import deepmerge from "deepmerge" -import objectToString from "stringify-object" -import { type Config as TailwindConfig } from "tailwindcss" +import type { Config } from '@/src/utils/get-config'; +import type { registryItemTailwindSchema } from '@/src/utils/registry/schema'; +import type { Config as TailwindConfig } from 'tailwindcss'; +import type { z } from 'zod'; + +import deepmerge from 'deepmerge'; +import { promises as fs } from 'fs'; +import { tmpdir } from 'os'; +import path from 'path'; +import objectToString from 'stringify-object'; import { - ObjectLiteralExpression, + type ObjectLiteralExpression, + type PropertyAssignment, + type VariableStatement, Project, - PropertyAssignment, QuoteKind, ScriptKind, SyntaxKind, - VariableStatement, -} from "ts-morph" -import { z } from "zod" +} from 'ts-morph'; -export type UpdaterTailwindConfig = Omit & { +import { highlighter } from '@/src/utils/highlighter'; +import { spinner } from '@/src/utils/spinner'; + +export type UpdaterTailwindConfig = Omit & { // We only want string plugins for now. - plugins?: string[] -} + plugins?: string[]; +}; export async function updateTailwindConfig( tailwindConfig: - | z.infer["config"] + | z.infer['config'] | undefined, config: Config, options: { - silent?: boolean + silent?: boolean; } ) { if (!tailwindConfig) { - return + return; } options = { silent: false, ...options, - } + }; const tailwindFileRelativePath = path.relative( config.resolvedPaths.cwd, config.resolvedPaths.tailwindConfig - ) + ); const tailwindSpinner = spinner( `Updating ${highlighter.info(tailwindFileRelativePath)}`, { silent: options.silent, } - ).start() - const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, "utf8") - const output = await transformTailwindConfig(raw, tailwindConfig, config) - await fs.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8") - tailwindSpinner?.succeed() + ).start(); + const raw = await fs.readFile(config.resolvedPaths.tailwindConfig, 'utf8'); + const output = await transformTailwindConfig(raw, tailwindConfig, config); + await fs.writeFile(config.resolvedPaths.tailwindConfig, output, 'utf8'); + tailwindSpinner?.succeed(); } export async function transformTailwindConfig( @@ -63,7 +65,7 @@ export async function transformTailwindConfig( tailwindConfig: UpdaterTailwindConfig, config: Config ) { - const sourceFile = await _createSourceFile(input, config) + const sourceFile = await _createSourceFile(input, config); // Find the object with content property. // This is faster than traversing the default export. // TODO: maybe we do need to traverse the default export? @@ -75,82 +77,82 @@ export async function transformTailwindConfig( .some( (property) => property.isKind(SyntaxKind.PropertyAssignment) && - property.getName() === "content" + property.getName() === 'content' ) - ) + ); // We couldn't find the config object, so we return the input as is. if (!configObject) { - return input + return input; } - const quoteChar = _getQuoteChar(configObject) + const quoteChar = _getQuoteChar(configObject); // Add darkMode. addTailwindConfigProperty( configObject, { - name: "darkMode", - value: "class", + name: 'darkMode', + value: 'class', }, { quoteChar } - ) + ); // Add Tailwind config plugins. tailwindConfig.plugins?.forEach((plugin) => { - addTailwindConfigPlugin(configObject, plugin) - }) + addTailwindConfigPlugin(configObject, plugin); + }); // Add Tailwind config theme. if (tailwindConfig.theme) { - await addTailwindConfigTheme(configObject, tailwindConfig.theme) + await addTailwindConfigTheme(configObject, tailwindConfig.theme); } - return sourceFile.getFullText() + return sourceFile.getFullText(); } function addTailwindConfigProperty( configObject: ObjectLiteralExpression, property: { - name: string - value: string + name: string; + value: string; }, { quoteChar, }: { - quoteChar: string + quoteChar: string; } ) { - const existingProperty = configObject.getProperty("darkMode") + const existingProperty = configObject.getProperty('darkMode'); if (!existingProperty) { const newProperty = { - name: property.name, initializer: `[${quoteChar}${property.value}${quoteChar}]`, - } + name: property.name, + }; // We need to add darkMode as the first property. - if (property.name === "darkMode") { - configObject.insertPropertyAssignment(0, newProperty) - return configObject + if (property.name === 'darkMode') { + configObject.insertPropertyAssignment(0, newProperty); + + return configObject; } - configObject.addPropertyAssignment(newProperty) + configObject.addPropertyAssignment(newProperty); - return configObject + return configObject; } - if (existingProperty.isKind(SyntaxKind.PropertyAssignment)) { - const initializer = existingProperty.getInitializer() - const newValue = `${quoteChar}${property.value}${quoteChar}` + const initializer = existingProperty.getInitializer(); + const newValue = `${quoteChar}${property.value}${quoteChar}`; // If property is a string, change it to an array and append. if (initializer?.isKind(SyntaxKind.StringLiteral)) { - const initializerText = initializer.getText() - initializer.replaceWithText(`[${initializerText}, ${newValue}]`) - return configObject - } + const initializerText = initializer.getText(); + initializer.replaceWithText(`[${initializerText}, ${newValue}]`); + return configObject; + } // If property is an array, append. if (initializer?.isKind(SyntaxKind.ArrayLiteralExpression)) { // Check if the array already contains the value. @@ -160,112 +162,114 @@ function addTailwindConfigProperty( .map((element) => element.getText()) .includes(newValue) ) { - return configObject + return configObject; } - initializer.addElement(newValue) + + initializer.addElement(newValue); } - return configObject + return configObject; } - return configObject + return configObject; } async function addTailwindConfigTheme( configObject: ObjectLiteralExpression, - theme: UpdaterTailwindConfig["theme"] + theme: UpdaterTailwindConfig['theme'] ) { // Ensure there is a theme property. - if (!configObject.getProperty("theme")) { + if (!configObject.getProperty('theme')) { configObject.addPropertyAssignment({ - name: "theme", - initializer: "{}", - }) + initializer: '{}', + name: 'theme', + }); } // Nest all spread properties. - nestSpreadProperties(configObject) + nestSpreadProperties(configObject); const themeProperty = configObject - .getPropertyOrThrow("theme") - ?.asKindOrThrow(SyntaxKind.PropertyAssignment) + .getPropertyOrThrow('theme') + ?.asKindOrThrow(SyntaxKind.PropertyAssignment); + + const themeInitializer = themeProperty.getInitializer(); - const themeInitializer = themeProperty.getInitializer() if (themeInitializer?.isKind(SyntaxKind.ObjectLiteralExpression)) { - const themeObjectString = themeInitializer.getText() - const themeObject = await parseObjectLiteral(themeObjectString) - const result = deepmerge(themeObject, theme) + const themeObjectString = themeInitializer.getText(); + const themeObject = await parseObjectLiteral(themeObjectString); + const result = deepmerge(themeObject, theme); const resultString = objectToString(result) - .replace(/\'\"/g, "'") // Replace `\" with " - .replace(/\"\'/g, "'") // Replace `\" with " - .replace(/\'\[/g, "[") // Replace `[ with [ - .replace(/\]\'/g, "]") // Replace `] with ] - .replace(/\'\\\'/g, "'") // Replace `\' with ' - .replace(/\\\'/g, "'") // Replace \' with ' - .replace(/\\\'\'/g, "'") - .replace(/\'\'/g, "'") - themeInitializer.replaceWithText(resultString) + .replace(/'"/g, "'") // Replace `\" with " + .replace(/"'/g, "'") // Replace `\" with " + .replace(/'\[/g, '[') // Replace `[ with [ + .replace(/]'/g, ']') // Replace `] with ] + .replace(/'\\'/g, "'") // Replace `\' with ' + .replace(/\\'/g, "'") // Replace \' with ' + .replace(/\\''/g, "'") + .replace(/''/g, "'"); + themeInitializer.replaceWithText(resultString); } // Unnest all spread properties. - unnestSpreadProperties(configObject) + unnestSpreadProperties(configObject); } function addTailwindConfigPlugin( configObject: ObjectLiteralExpression, plugin: string ) { - const existingPlugins = configObject.getProperty("plugins") + const existingPlugins = configObject.getProperty('plugins'); if (!existingPlugins) { configObject.addPropertyAssignment({ - name: "plugins", initializer: `[${plugin}]`, - }) + name: 'plugins', + }); - return configObject + return configObject; } - if (existingPlugins.isKind(SyntaxKind.PropertyAssignment)) { - const initializer = existingPlugins.getInitializer() + const initializer = existingPlugins.getInitializer(); if (initializer?.isKind(SyntaxKind.ArrayLiteralExpression)) { if ( initializer .getElements() .map((element) => { - return element.getText().replace(/["']/g, "") + return element.getText().replace(/["']/g, ''); }) - .includes(plugin.replace(/["']/g, "")) + .includes(plugin.replace(/["']/g, '')) ) { - return configObject + return configObject; } - initializer.addElement(plugin) + + initializer.addElement(plugin); } - return configObject + return configObject; } - return configObject + return configObject; } export async function _createSourceFile(input: string, config: Config | null) { - const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-")) + const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-')); const resolvedPath = - config?.resolvedPaths?.tailwindConfig || "tailwind.config.ts" - const tempFile = path.join(dir, `shadcn-${path.basename(resolvedPath)}`) + config?.resolvedPaths?.tailwindConfig || 'tailwind.config.ts'; + const tempFile = path.join(dir, `shadcn-${path.basename(resolvedPath)}`); const project = new Project({ compilerOptions: {}, - }) + }); const sourceFile = project.createSourceFile(tempFile, input, { // Note: .js and .mjs can still be valid for TS projects. // We can't infer TypeScript from config.tsx. scriptKind: - path.extname(resolvedPath) === ".ts" ? ScriptKind.TS : ScriptKind.JS, - }) + path.extname(resolvedPath) === '.ts' ? ScriptKind.TS : ScriptKind.JS, + }); - return sourceFile + return sourceFile; } export function _getQuoteChar(configObject: ObjectLiteralExpression) { @@ -273,60 +277,60 @@ export function _getQuoteChar(configObject: ObjectLiteralExpression) { .getFirstDescendantByKind(SyntaxKind.StringLiteral) ?.getQuoteKind() === QuoteKind.Single ? "'" - : '"' + : '"'; } export function nestSpreadProperties(obj: ObjectLiteralExpression) { - const properties = obj.getProperties() + const properties = obj.getProperties(); for (let i = 0; i < properties.length; i++) { - const prop = properties[i] + const prop = properties[i]; + if (prop.isKind(SyntaxKind.SpreadAssignment)) { - const spreadAssignment = prop.asKindOrThrow(SyntaxKind.SpreadAssignment) - const spreadText = spreadAssignment.getExpression().getText() + const spreadAssignment = prop.asKindOrThrow(SyntaxKind.SpreadAssignment); + const spreadText = spreadAssignment.getExpression().getText(); // Replace spread with a property assignment obj.insertPropertyAssignment(i, { - name: `___${spreadText.replace(/^\.\.\./, "")}`, - initializer: `"...${spreadText.replace(/^\.\.\./, "")}"`, - }) + initializer: `"...${spreadText.replace(/^\.{3}/, '')}"`, + name: `___${spreadText.replace(/^\.{3}/, '')}`, + }); // Remove the original spread assignment - spreadAssignment.remove() + spreadAssignment.remove(); } else if (prop.isKind(SyntaxKind.PropertyAssignment)) { - const propAssignment = prop.asKindOrThrow(SyntaxKind.PropertyAssignment) - const initializer = propAssignment.getInitializer() + const propAssignment = prop.asKindOrThrow(SyntaxKind.PropertyAssignment); + const initializer = propAssignment.getInitializer(); - if ( - initializer && - initializer.isKind(SyntaxKind.ObjectLiteralExpression) - ) { + if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) { // Recursively process nested object literals nestSpreadProperties( initializer.asKindOrThrow(SyntaxKind.ObjectLiteralExpression) - ) + ); } } } } export function unnestSpreadProperties(obj: ObjectLiteralExpression) { - const properties = obj.getProperties() + const properties = obj.getProperties(); for (let i = 0; i < properties.length; i++) { - const prop = properties[i] + const prop = properties[i]; + if (prop.isKind(SyntaxKind.PropertyAssignment)) { - const propAssignment = prop as PropertyAssignment - const initializer = propAssignment.getInitializer() + const propAssignment = prop as PropertyAssignment; + const initializer = propAssignment.getInitializer(); if (initializer?.isKind(SyntaxKind.StringLiteral)) { - const value = initializer.getLiteralValue() - if (value.startsWith("...")) { - obj.insertSpreadAssignment(i, { expression: value.slice(3) }) - propAssignment.remove() + const value = initializer.getLiteralValue(); + + if (value.startsWith('...')) { + obj.insertSpreadAssignment(i, { expression: value.slice(3) }); + propAssignment.remove(); } } else if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) { - unnestSpreadProperties(initializer as ObjectLiteralExpression) + unnestSpreadProperties(initializer as ObjectLiteralExpression); } } } @@ -336,94 +340,104 @@ async function parseObjectLiteral(objectLiteralString: string): Promise { const sourceFile = await _createSourceFile( `const theme = ${objectLiteralString}`, null - ) + ); + + const statement = sourceFile.getStatements()[0]; - const statement = sourceFile.getStatements()[0] if (statement?.getKind() === SyntaxKind.VariableStatement) { const declaration = (statement as VariableStatement) .getDeclarationList() - ?.getDeclarations()[0] - const initializer = declaration.getInitializer() + ?.getDeclarations()[0]; + const initializer = declaration.getInitializer(); + if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) { - return await parseObjectLiteralExpression(initializer) + return await parseObjectLiteralExpression(initializer); } } - throw new Error("Invalid input: not an object literal") + throw new Error('Invalid input: not an object literal'); } function parseObjectLiteralExpression(node: ObjectLiteralExpression): any { - const result: any = {} + const result: any = {}; + for (const property of node.getProperties()) { if (property.isKind(SyntaxKind.PropertyAssignment)) { - const name = property.getName().replace(/\'/g, "") - if ( - property.getInitializer()?.isKind(SyntaxKind.ObjectLiteralExpression) - ) { - result[name] = parseObjectLiteralExpression( - property.getInitializer() as ObjectLiteralExpression - ) - } else { - result[name] = parseValue(property.getInitializer()) - } + const name = property.getName().replace(/'/g, ''); + result[name] = property + .getInitializer() + ?.isKind(SyntaxKind.ObjectLiteralExpression) + ? parseObjectLiteralExpression( + property.getInitializer() as ObjectLiteralExpression + ) + : parseValue(property.getInitializer()); } } - return result + + return result; } function parseValue(node: any): any { switch (node.kind) { - case SyntaxKind.StringLiteral: - return node.text - case SyntaxKind.NumericLiteral: - return Number(node.text) - case SyntaxKind.TrueKeyword: - return true - case SyntaxKind.FalseKeyword: - return false - case SyntaxKind.NullKeyword: - return null - case SyntaxKind.ArrayLiteralExpression: - return node.elements.map(parseValue) - default: - return node.getText() + case SyntaxKind.ArrayLiteralExpression: { + return node.elements.map(parseValue); + } + case SyntaxKind.FalseKeyword: { + return false; + } + case SyntaxKind.NullKeyword: { + return null; + } + case SyntaxKind.NumericLiteral: { + return Number(node.text); + } + case SyntaxKind.StringLiteral: { + return node.text; + } + case SyntaxKind.TrueKeyword: { + return true; + } + default: { + return node.getText(); + } } } export function buildTailwindThemeColorsFromCssVars( cssVars: Record ) { - const result: Record = {} + const result: Record = {}; for (const key of Object.keys(cssVars)) { - const parts = key.split("-") - const colorName = parts[0] - const subType = parts.slice(1).join("-") + const parts = key.split('-'); + const colorName = parts[0]; + const subType = parts.slice(1).join('-'); - if (subType === "") { - if (typeof result[colorName] === "object") { - result[colorName].DEFAULT = `hsl(var(--${key}))` + if (subType === '') { + if (typeof result[colorName] === 'object') { + result[colorName].DEFAULT = `hsl(var(--${key}))`; } else { - result[colorName] = `hsl(var(--${key}))` + result[colorName] = `hsl(var(--${key}))`; } } else { - if (typeof result[colorName] !== "object") { - result[colorName] = { DEFAULT: `hsl(var(--${colorName}))` } + if (typeof result[colorName] !== 'object') { + result[colorName] = { DEFAULT: `hsl(var(--${colorName}))` }; } - result[colorName][subType] = `hsl(var(--${key}))` + + result[colorName][subType] = `hsl(var(--${key}))`; } } // Remove DEFAULT if it's not in the original cssVars for (const [colorName, value] of Object.entries(result)) { if ( - typeof value === "object" && + typeof value === 'object' && value.DEFAULT === `hsl(var(--${colorName}))` && !(colorName in cssVars) ) { - delete value.DEFAULT + delete value.DEFAULT; } } - return result + return result; } diff --git a/packages/cli/src/utils/updaters/update-tailwind-content.d.ts b/packages/cli/src/utils/updaters/update-tailwind-content.d.ts new file mode 100644 index 0000000000..778142e898 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-tailwind-content.d.ts @@ -0,0 +1,6 @@ +import { Config } from "@/src/utils/get-config"; +export declare function updateTailwindContent(content: string[], config: Config, options: { + silent?: boolean; +}): Promise; +export declare function transformTailwindContent(input: string, content: string[], config: Config): Promise; +//# sourceMappingURL=update-tailwind-content.d.ts.map \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-tailwind-content.d.ts.map b/packages/cli/src/utils/updaters/update-tailwind-content.d.ts.map new file mode 100644 index 0000000000..edeb6ccef7 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-tailwind-content.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"update-tailwind-content.d.ts","sourceRoot":"","sources":["update-tailwind-content.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAS/C,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EAAE,EACjB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;IACP,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,iBAyBF;AAED,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EAAE,EACjB,MAAM,EAAE,MAAM,mBA0Bf"} \ No newline at end of file diff --git a/packages/cli/src/utils/updaters/update-tailwind-content.js b/packages/cli/src/utils/updaters/update-tailwind-content.js new file mode 100644 index 0000000000..97599e3689 --- /dev/null +++ b/packages/cli/src/utils/updaters/update-tailwind-content.js @@ -0,0 +1,158 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.updateTailwindContent = updateTailwindContent; +exports.transformTailwindContent = transformTailwindContent; +var fs_1 = require("fs"); +var path_1 = __importDefault(require("path")); +var highlighter_1 = require("@/src/utils/highlighter"); +var spinner_1 = require("@/src/utils/spinner"); +var update_tailwind_config_1 = require("@/src/utils/updaters/update-tailwind-config"); +var ts_morph_1 = require("ts-morph"); +function updateTailwindContent(content, config, options) { + return __awaiter(this, void 0, void 0, function () { + var tailwindFileRelativePath, tailwindSpinner, raw, output; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + if (!content) { + return [2 /*return*/]; + } + options = __assign({ silent: false }, options); + tailwindFileRelativePath = path_1.default.relative(config.resolvedPaths.cwd, config.resolvedPaths.tailwindConfig); + tailwindSpinner = (0, spinner_1.spinner)("Updating ".concat(highlighter_1.highlighter.info(tailwindFileRelativePath)), { + silent: options.silent, + }).start(); + return [4 /*yield*/, fs_1.promises.readFile(config.resolvedPaths.tailwindConfig, "utf8")]; + case 1: + raw = _a.sent(); + return [4 /*yield*/, transformTailwindContent(raw, content, config)]; + case 2: + output = _a.sent(); + return [4 /*yield*/, fs_1.promises.writeFile(config.resolvedPaths.tailwindConfig, output, "utf8")]; + case 3: + _a.sent(); + tailwindSpinner === null || tailwindSpinner === void 0 ? void 0 : tailwindSpinner.succeed(); + return [2 /*return*/]; + } + }); + }); +} +function transformTailwindContent(input, content, config) { + return __awaiter(this, void 0, void 0, function () { + var sourceFile, configObject; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, (0, update_tailwind_config_1._createSourceFile)(input, config) + // Find the object with content property. + // This is faster than traversing the default export. + // TODO: maybe we do need to traverse the default export? + ]; + case 1: + sourceFile = _a.sent(); + configObject = sourceFile + .getDescendantsOfKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression) + .find(function (node) { + return node + .getProperties() + .some(function (property) { + return property.isKind(ts_morph_1.SyntaxKind.PropertyAssignment) && + property.getName() === "content"; + }); + }); + // We couldn't find the config object, so we return the input as is. + if (!configObject) { + return [2 /*return*/, input]; + } + addTailwindConfigContent(configObject, content); + return [2 /*return*/, sourceFile.getFullText()]; + } + }); + }); +} +function addTailwindConfigContent(configObject, content) { + return __awaiter(this, void 0, void 0, function () { + var quoteChar, existingProperty, newProperty, initializer, _i, content_1, contentItem, newValue; + return __generator(this, function (_a) { + quoteChar = (0, update_tailwind_config_1._getQuoteChar)(configObject); + existingProperty = configObject.getProperty("content"); + if (!existingProperty) { + newProperty = { + name: "content", + initializer: "[".concat(quoteChar).concat(content.join("".concat(quoteChar, ", ").concat(quoteChar))).concat(quoteChar, "]"), + }; + configObject.addPropertyAssignment(newProperty); + return [2 /*return*/, configObject]; + } + if (existingProperty.isKind(ts_morph_1.SyntaxKind.PropertyAssignment)) { + initializer = existingProperty.getInitializer(); + // If property is an array, append. + if (initializer === null || initializer === void 0 ? void 0 : initializer.isKind(ts_morph_1.SyntaxKind.ArrayLiteralExpression)) { + for (_i = 0, content_1 = content; _i < content_1.length; _i++) { + contentItem = content_1[_i]; + newValue = "".concat(quoteChar).concat(contentItem).concat(quoteChar); + // Check if the array already contains the value. + if (initializer + .getElements() + .map(function (element) { return element.getText(); }) + .includes(newValue)) { + continue; + } + initializer.addElement(newValue); + } + } + return [2 /*return*/, configObject]; + } + return [2 /*return*/, configObject]; + }); + }); +} diff --git a/scripts/add-ai.sh b/scripts/add-ai.sh new file mode 100644 index 0000000000..2a160ca0dd --- /dev/null +++ b/scripts/add-ai.sh @@ -0,0 +1,4 @@ +#!/bin/sh + +# add editor-ai +node ./packages/cli/dist/index.js add plate/editor-ai -c ./templates/plate-template diff --git a/scripts/add-basic.sh b/scripts/add-basic.sh new file mode 100644 index 0000000000..a167d9417e --- /dev/null +++ b/scripts/add-basic.sh @@ -0,0 +1,4 @@ +#!/bin/sh + +# add editor-ai +node ./packages/cli/dist/index.js add plate/editor-basic -c ./templates/plate-template -o diff --git a/scripts/init-plate-template.sh b/scripts/init-plate-template.sh new file mode 100644 index 0000000000..85a89feb90 --- /dev/null +++ b/scripts/init-plate-template.sh @@ -0,0 +1,4 @@ +#!/bin/sh + +# init plate in shadcn project +node ./packages/cli/dist/index.js init http://localhost:3000/r -c ./templates/plate-template \ No newline at end of file diff --git a/scripts/init-plate.sh b/scripts/init-plate.sh new file mode 100644 index 0000000000..1fb3796f45 --- /dev/null +++ b/scripts/init-plate.sh @@ -0,0 +1,7 @@ +#!/bin/sh + +# init plate in new project +rimraf tmp +mkdir -p tmp/my-app +chmod -R 777 ./tmp +node ./packages/cli/dist/index.js init http://localhost:3000/r -c ./tmp --pm pnpm -d \ No newline at end of file diff --git a/scripts/init.sh b/scripts/init.sh new file mode 100644 index 0000000000..dc141689b8 --- /dev/null +++ b/scripts/init.sh @@ -0,0 +1,7 @@ +#!/bin/sh + +# init shadcn in new project +rimraf tmp +mkdir -p tmp/my-app +chmod -R 777 ./tmp +node ./packages/cli/dist/index.js init -y -c ./tmp -d --pm pnpm diff --git a/scripts/init2.sh b/scripts/init2.sh new file mode 100644 index 0000000000..6adaa39540 --- /dev/null +++ b/scripts/init2.sh @@ -0,0 +1,4 @@ +#!/bin/sh + +# init plate in shadcn project +node ./packages/cli/dist/index.js init http://localhost:3000/r -c ./templates/plate-template diff --git a/templates/plate-playground-template/.editorconfig b/templates/plate-playground-template/.editorconfig deleted file mode 100644 index ae10a5cce3..0000000000 --- a/templates/plate-playground-template/.editorconfig +++ /dev/null @@ -1,10 +0,0 @@ -# editorconfig.org -root = true - -[*] -charset = utf-8 -end_of_line = lf -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/templates/plate-playground-template/.env.example b/templates/plate-playground-template/.env.example deleted file mode 100644 index e570b8b559..0000000000 --- a/templates/plate-playground-template/.env.example +++ /dev/null @@ -1 +0,0 @@ -OPENAI_API_KEY= diff --git a/templates/plate-playground-template/.eslintrc.js b/templates/plate-playground-template/.eslintrc.js index 384b1435a7..cbe1099bf5 100644 --- a/templates/plate-playground-template/.eslintrc.js +++ b/templates/plate-playground-template/.eslintrc.js @@ -17,7 +17,6 @@ module.exports = { }, ], plugins: ['tailwindcss', 'unused-imports', 'perfectionist', 'prettier'], - root: true, rules: { '@next/next/no-html-link-for-pages': 'off', diff --git a/templates/plate-playground-template/README.md b/templates/plate-playground-template/README.md index 7bd1f30f37..da3bec43a9 100644 --- a/templates/plate-playground-template/README.md +++ b/templates/plate-playground-template/README.md @@ -1,32 +1,51 @@ -## Getting Started +# Playground Template -### Requirements +A Next.js 15 template with [Plate](https://platejs.org/) AI, plugins and components. -- Node.js -- pnpm +## Features -### Environment Variables +- Next.js 15 App Directory +- [Plate](https://platejs.org/) editor +- [shadcn/ui](https://ui.shadcn.com/) -Copy the example env file: +## Installation + +Choose one of these methods: + +### 1. Using CLI (Recommended) ```bash -cp .env.example .env.local +npx shadcx@latest init -u https://platejs.org/r ``` -Set up your environment variables: - -- `OPENAI_API_KEY` – OpenAI API key ([get one here](https://platform.openai.com/account/api-keys)) +```bash +npx shadcx@latest add editor-ai -r plate +``` -### Development +### 2. Using Template -1. Install dependencies: +[Use this template](https://github.com/plate-editor/plate-template/generate), then install dependencies: ```bash pnpm install ``` -2. Start the development server: +## Development + +Copy the example env file: + +```bash +cp .env.example .env.local +``` + +Configure `.env.local`: + +- `OPENAI_API_KEY` – OpenAI API key ([get one here](https://platform.openai.com/account/api-keys)) + +Start the development server: ```bash pnpm dev ``` + +Visit http://localhost:3000/editor to see the editor in action. diff --git a/templates/plate-playground-template/components.json b/templates/plate-playground-template/components.json index a2b96e9c44..64c647d655 100644 --- a/templates/plate-playground-template/components.json +++ b/templates/plate-playground-template/components.json @@ -1,21 +1,28 @@ { "$schema": "https://ui.shadcn.com/schema.json", - "style": "default", + "aliases": { + "components": "@/components", + "hooks": "@/hooks", + "lib": "@/lib", + "ui": "@/components/ui", + "utils": "@/lib/utils" + }, + "registries": { + "plate": { + "aliases": { + "ui": "@/components/plate-ui" + }, + "url": "https://platejs.org/r" + } + }, "rsc": true, - "tsx": true, + "style": "default", "tailwind": { - "config": "tailwind.config.js", - "css": "src/styles/globals.css", "baseColor": "slate", + "config": "tailwind.config.ts", + "css": "src/app/globals.css", "cssVariables": true, "prefix": "" }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils", - "ui": "@/components/plate-ui", - "lib": "@/lib", - "hooks": "@/hooks" - }, - "url": "https://platejs.org/r" -} \ No newline at end of file + "tsx": true +} diff --git a/templates/plate-playground-template/next.config.mjs b/templates/plate-playground-template/next.config.mjs new file mode 100644 index 0000000000..a2abd446f6 --- /dev/null +++ b/templates/plate-playground-template/next.config.mjs @@ -0,0 +1,14 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + async redirects() { + return [ + { + source: '/', + destination: '/editor', + permanent: true, + }, + ]; + }, +}; + +export default nextConfig; diff --git a/templates/plate-playground-template/next.config.ts b/templates/plate-playground-template/next.config.ts deleted file mode 100644 index b22af960af..0000000000 --- a/templates/plate-playground-template/next.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { NextConfig } from 'next'; - -const nextConfig: NextConfig = {}; - -export default nextConfig; diff --git a/templates/plate-playground-template/package.json b/templates/plate-playground-template/package.json index 19faae2598..300c0c08fe 100644 --- a/templates/plate-playground-template/package.json +++ b/templates/plate-playground-template/package.json @@ -1,91 +1,85 @@ { "name": "plate-playground-template", - "version": "0.0.1", + "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev --turbo", "build": "next build", - "start": "next start", + "dev": "next dev --turbo", "lint": "next lint", "lint:fix": "next lint --fix", "preview": "next build && next start", + "start": "next start", "sync": "tsx --tsconfig ./scripts/tsconfig.scripts.json scripts/sync.mts", "typecheck": "tsc --noEmit" }, "dependencies": { - "@ai-sdk/openai": "^0.0.68", - "@ariakit/react": "0.4.11", + "@ai-sdk/openai": "^0.0.71", + "@ariakit/react": "^0.4.13", + "@faker-js/faker": "^9.2.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.2", - "@radix-ui/react-context-menu": "^2.2.1", + "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.1.2", - "@radix-ui/react-dropdown-menu": "2.1.2", - "@radix-ui/react-icons": "^1.3.1", + "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-popover": "^1.1.2", - "@radix-ui/react-scroll-area": "^1.2.0", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", - "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toolbar": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", "@udecode/cn": "^39.0.0", - "@udecode/plate-ai": "39.2.19", + "@udecode/plate-ai": "^39.2.19", "@udecode/plate-alignment": "^39.0.0", "@udecode/plate-autoformat": "^39.0.0", + "@udecode/plate-basic-elements": "^39.0.0", "@udecode/plate-basic-marks": "^39.0.0", "@udecode/plate-block-quote": "^39.0.0", "@udecode/plate-break": "^39.0.0", "@udecode/plate-callout": "^39.2.18", "@udecode/plate-caption": "^39.0.0", "@udecode/plate-code-block": "^39.0.0", - "@udecode/plate-combobox": "39.0.0", + "@udecode/plate-combobox": "^39.0.0", "@udecode/plate-comments": "^39.0.0", - "@udecode/plate-common": "39.2.20", - "@udecode/plate-csv": "^39.1.6", + "@udecode/plate-common": "^39.2.21", "@udecode/plate-cursor": "^39.2.11", "@udecode/plate-date": "^39.0.0", "@udecode/plate-dnd": "^39.0.0", - "@udecode/plate-docx": "39.2.13", + "@udecode/plate-docx": "^39.2.13", "@udecode/plate-emoji": "^39.0.0", "@udecode/plate-excalidraw": "^39.0.0", - "@udecode/plate-find-replace": "^39.0.0", "@udecode/plate-floating": "^39.1.6", "@udecode/plate-font": "^39.0.0", "@udecode/plate-heading": "^39.0.0", "@udecode/plate-highlight": "^39.0.0", "@udecode/plate-horizontal-rule": "^39.0.0", - "@udecode/plate-html": "^39.0.0", "@udecode/plate-indent": "^39.0.0", - "@udecode/plate-indent-list": "39.1.10", + "@udecode/plate-indent-list": "^39.1.10", "@udecode/plate-juice": "^39.0.0", "@udecode/plate-kbd": "^39.0.0", "@udecode/plate-layout": "^39.0.0", "@udecode/plate-line-height": "^39.0.0", "@udecode/plate-link": "^39.1.9", "@udecode/plate-list": "^39.0.0", - "@udecode/plate-markdown": "39.2.0", + "@udecode/plate-markdown": "^39.2.0", "@udecode/plate-math": "^39.2.0", - "@udecode/plate-media": "39.2.13", + "@udecode/plate-media": "^39.2.13", "@udecode/plate-mention": "^39.0.0", "@udecode/plate-node-id": "^39.0.0", - "@udecode/plate-normalizers": "^39.0.0", "@udecode/plate-reset-node": "^39.0.0", "@udecode/plate-resizable": "^39.1.6", "@udecode/plate-select": "^39.0.0", - "@udecode/plate-selection": "39.2.12", + "@udecode/plate-selection": "^39.2.12", "@udecode/plate-slash-command": "^39.0.0", "@udecode/plate-tabbable": "^39.0.0", "@udecode/plate-table": "^39.1.6", "@udecode/plate-toggle": "^39.0.0", "@udecode/plate-trailing-block": "^39.0.0", - "ai": "^3.4.30", + "ai": "^3.4.33", "class-variance-authority": "0.7.0", - "cmdk": "1.0.3", + "clsx": "^2.1.1", + "cmdk": "^1.0.4", "date-fns": "^4.1.0", - "eslint-plugin-prettier": "^5.2.1", "lucide-react": "0.454.0", "next": "^15.0.2", - "next-themes": "^0.3.0", "prismjs": "^1.29.0", "react": "^18.3.1", "react-day-picker": "8.10.1", @@ -95,11 +89,10 @@ "react-lite-youtube-embed": "^2.4.0", "react-resizable-panels": "^2.1.6", "react-tweet": "^3.2.1", - "slate": "0.110.2", - "slate-history": "0.110.3", - "slate-hyperscript": "0.100.0", - "slate-react": "0.110.3", - "sonner": "^1.5.0", + "slate": "^0.110.2", + "slate-history": "^0.110.3", + "slate-hyperscript": "^0.100.0", + "slate-react": "^0.111.0", "tailwind-merge": "2.5.4", "tailwindcss-animate": "1.0.7" }, @@ -113,7 +106,7 @@ "eslint": "^8.56.0", "eslint-config-next": "15.0.2", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-perfectionist": "^3.9.1", + "eslint-plugin-perfectionist": "3.9.1", "eslint-plugin-react": "^7.37.2", "eslint-plugin-tailwindcss": "^3.17.5", "eslint-plugin-unused-imports": "^4.1.3", diff --git a/templates/plate-playground-template/pnpm-lock.yaml b/templates/plate-playground-template/pnpm-lock.yaml index dbf2d556a9..3d27f5d508 100644 --- a/templates/plate-playground-template/pnpm-lock.yaml +++ b/templates/plate-playground-template/pnpm-lock.yaml @@ -9,11 +9,14 @@ importers: .: dependencies: '@ai-sdk/openai': - specifier: ^0.0.68 - version: 0.0.68(zod@3.23.8) + specifier: ^0.0.71 + version: 0.0.71(zod@3.23.8) '@ariakit/react': - specifier: 0.4.11 - version: 0.4.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.4.13 + version: 0.4.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@faker-js/faker': + specifier: ^9.2.0 + version: 9.2.0 '@radix-ui/react-avatar': specifier: ^1.1.1 version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -21,32 +24,23 @@ importers: specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-context-menu': - specifier: ^2.2.1 + specifier: ^2.2.2 version: 2.2.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-dialog': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-dropdown-menu': - specifier: 2.1.2 + specifier: ^2.1.2 version: 2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-icons': - specifier: ^1.3.1 - version: 1.3.1(react@18.3.1) '@radix-ui/react-popover': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-scroll-area': - specifier: ^1.2.0 - version: 1.2.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-separator': specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-toggle': - specifier: ^1.1.0 - version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-toolbar': specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -57,176 +51,164 @@ importers: specifier: ^39.0.0 version: 39.0.0(@types/react@18.3.12)(class-variance-authority@0.7.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4) '@udecode/plate-ai': - specifier: 39.2.19 - version: 39.2.19(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.2.19 + version: 39.2.19(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-alignment': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-autoformat': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-basic-elements': + specifier: ^39.0.0 + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-basic-marks': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-block-quote': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-break': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-callout': specifier: ^39.2.18 - version: 39.2.18(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.2.18(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-caption': specifier: ^39.0.0 - version: 39.0.0(@types/react@18.3.12)(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@types/react@18.3.12)(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-code-block': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-combobox': - specifier: 39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.0.0 + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-comments': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-common': - specifier: 39.2.20 - version: 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-csv': - specifier: ^39.1.6 - version: 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.2.21 + version: 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-cursor': specifier: ^39.2.11 - version: 39.2.11(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.2.11(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-date': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-dnd': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dnd-html5-backend@16.0.1)(react-dnd@16.0.1(@types/node@22.8.6)(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dnd-html5-backend@16.0.1)(react-dnd@16.0.1(@types/node@22.8.6)(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-docx': - specifier: 39.2.13 - version: 39.2.13(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.2.13 + version: 39.2.13(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-emoji': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-excalidraw': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-find-replace': - specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-floating': specifier: ^39.1.6 - version: 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-font': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-heading': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-highlight': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-horizontal-rule': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-html': - specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-indent': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-indent-list': - specifier: 39.1.10 - version: 39.1.10(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.1.10 + version: 39.1.10(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-juice': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-kbd': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-layout': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-line-height': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-link': specifier: ^39.1.9 - version: 39.1.9(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.1.9(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-list': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-markdown': - specifier: 39.2.0 - version: 39.2.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.2.0 + version: 39.2.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-math': specifier: ^39.2.0 - version: 39.2.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.2.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-media': - specifier: 39.2.13 - version: 39.2.13(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.2.13 + version: 39.2.13(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-mention': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-node-id': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-normalizers': - specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-reset-node': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-resizable': specifier: ^39.1.6 - version: 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-select': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-selection': - specifier: 39.2.12 - version: 39.2.12(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + specifier: ^39.2.12 + version: 39.2.12(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-slash-command': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-tabbable': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-table': specifier: ^39.1.6 - version: 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-toggle': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-trailing-block': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) ai: - specifier: ^3.4.30 - version: 3.4.30(react@18.3.1)(sswr@2.1.0(svelte@5.1.9))(svelte@5.1.9)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8) + specifier: ^3.4.33 + version: 3.4.33(react@18.3.1)(sswr@2.1.0(svelte@5.1.9))(svelte@5.1.9)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8) class-variance-authority: specifier: 0.7.0 version: 0.7.0 + clsx: + specifier: ^2.1.1 + version: 2.1.1 cmdk: - specifier: 1.0.3 - version: 1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) date-fns: specifier: ^4.1.0 version: 4.1.0 - eslint-plugin-prettier: - specifier: ^5.2.1 - version: 5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3) lucide-react: specifier: 0.454.0 version: 0.454.0(react@18.3.1) next: specifier: ^15.0.2 version: 15.0.2(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next-themes: - specifier: ^0.3.0 - version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) prismjs: specifier: ^1.29.0 version: 1.29.0 @@ -255,20 +237,17 @@ importers: specifier: ^3.2.1 version: 3.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) slate: - specifier: 0.110.2 + specifier: ^0.110.2 version: 0.110.2 slate-history: - specifier: 0.110.3 + specifier: ^0.110.3 version: 0.110.3(slate@0.110.2) slate-hyperscript: - specifier: 0.100.0 + specifier: ^0.100.0 version: 0.100.0(slate@0.110.2) slate-react: - specifier: 0.110.3 - version: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) - sonner: - specifier: ^1.5.0 - version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.111.0 + version: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) tailwind-merge: specifier: 2.5.4 version: 2.5.4 @@ -304,7 +283,7 @@ importers: specifier: ^9.1.0 version: 9.1.0(eslint@8.57.1) eslint-plugin-perfectionist: - specifier: ^3.9.1 + specifier: 3.9.1 version: 3.9.1(eslint@8.57.1)(svelte@5.1.9)(typescript@5.6.3) eslint-plugin-react: specifier: ^7.37.2 @@ -336,21 +315,12 @@ importers: packages: - '@ai-sdk/openai@0.0.68': - resolution: {integrity: sha512-WSzB7qpBTrnYvFbnBBmIsw1G8GM04JRMr+I7B5T7msgZfleG4cTvVrn9A1HeHHw9TmbKiaCKJrEZH4V0lb7jNQ==} + '@ai-sdk/openai@0.0.71': + resolution: {integrity: sha512-ds7u3sWEnKyHxM3lAL9xTs72228HEKcPZCAEFaxmgrexKPJe2tyLBtvS/Kg39SPKPtY9EeaKqi/nbx1AmnXK6A==} engines: {node: '>=18'} peerDependencies: zod: ^3.0.0 - '@ai-sdk/provider-utils@1.0.20': - resolution: {integrity: sha512-ngg/RGpnA00eNOWEtXHenpX1MsM2QshQh4QJFjUfwcqHpM5kTfG7je7Rc3HcEDP+OkRVv2GF+X4fC1Vfcnl8Ow==} - engines: {node: '>=18'} - peerDependencies: - zod: ^3.0.0 - peerDependenciesMeta: - zod: - optional: true - '@ai-sdk/provider-utils@1.0.22': resolution: {integrity: sha512-YHK2rpj++wnLVc9vPGzGFP3Pjeld2MwhKinetA0zKXOoHAT/Jit5O8kZsxcSlJPu9wvcGT1UGZEjZrtO7PfFOQ==} engines: {node: '>=18'} @@ -360,16 +330,12 @@ packages: zod: optional: true - '@ai-sdk/provider@0.0.24': - resolution: {integrity: sha512-XMsNGJdGO+L0cxhhegtqZ8+T6nn4EoShS819OvCgI2kLbYTIvk0GWFGD0AXJmxkxs3DrpsJxKAFukFR7bvTkgQ==} - engines: {node: '>=18'} - '@ai-sdk/provider@0.0.26': resolution: {integrity: sha512-dQkfBDs2lTYpKM8389oopPdQgIU007GQyCbuPPrV+K6MtSII3HBfE0stUIMXUb44L+LK1t6GXPP7wjSzjO6uKg==} engines: {node: '>=18'} - '@ai-sdk/react@0.0.69': - resolution: {integrity: sha512-v3FvlxyzOHEV2a0iU6CAY4W3fm11I6RJwYONptN28/DFFxUX+q+7JqFaK+s0RoDQOCdgAkz5qaNzMeGjfJo+cg==} + '@ai-sdk/react@0.0.70': + resolution: {integrity: sha512-GnwbtjW4/4z7MleLiW+TOZC2M29eCg1tOUpuEiYFMmFNZK8mkrqM0PFZMo6UsYeUYMWqEOOcPOU9OQVJMJh7IQ==} engines: {node: '>=18'} peerDependencies: react: ^18 || ^19 || ^19.0.0-rc @@ -424,17 +390,17 @@ packages: resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} - '@ariakit/core@0.4.10': - resolution: {integrity: sha512-mX3EabQbfVh5uTjsTJ3+gjj7KGdTNhIN0qZHJd5Z2iPUnKl9NBy23Lgu6PEskpVsKAZ3proirjguD7U9fKMs/A==} + '@ariakit/core@0.4.12': + resolution: {integrity: sha512-+NNpy88tdP/w9mOBPuDrMTbtapPbo/8yVIzpQB7TAmN0sPh/Cq3nU1f2KCTCIujPmwRvAcMSW9UHOlFmbKEPOA==} - '@ariakit/react-core@0.4.11': - resolution: {integrity: sha512-i6KedWhjZkNC7tMEKO0eNjjq2HRPiHyGaBS2x2VaWwzBepoYtjyvxRXyqLJ3gaiNdlwckN1TZsRDfD+viy13IQ==} + '@ariakit/react-core@0.4.13': + resolution: {integrity: sha512-iIjQeupP9d0pOubOzX4a0UPXbhXbp0ZCduDpkv7+u/pYP/utk/YRECD0M/QpZr6YSeltmDiNxKjdyK8r9Yhv4Q==} peerDependencies: react: ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 - '@ariakit/react@0.4.11': - resolution: {integrity: sha512-nLpPrmNcspqNhk4o+epsgeZfP1+Fkh4uIzNe5yrFkXolRkqHGKAxl4Hi82e0yxIBUbYbZIEwsZQQVceF1L6xrw==} + '@ariakit/react@0.4.13': + resolution: {integrity: sha512-pTGYgoqCojfyt2xNJ5VQhejxXwwtcP7VDDqcnnVChv7TA2TWWyYerJ5m4oxViI1pgeNqnHZwKlQ79ZipF7W2kQ==} peerDependencies: react: ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -452,12 +418,8 @@ packages: engines: {node: '>=6.0.0'} hasBin: true - '@babel/runtime@7.25.6': - resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==} - engines: {node: '>=6.9.0'} - - '@babel/runtime@7.25.7': - resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==} + '@babel/runtime@7.26.0': + resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==} engines: {node: '>=6.9.0'} '@babel/types@7.26.0': @@ -645,14 +607,18 @@ packages: '@excalidraw/excalidraw@0.16.4': resolution: {integrity: sha512-x56YTb5jmHAJ9SP2R81ywU28Y+QlOgjmCYHVMgHKPhh1hwKzimt+Z+iz/Rf2x1JpQOJRYbfeoxiGPQNhnYwGWQ==} peerDependencies: - react: ^17.0.2 || ^18.2.0 - react-dom: ^17.0.2 || ^18.2.0 + react: '*' + react-dom: '*' + + '@faker-js/faker@9.2.0': + resolution: {integrity: sha512-ulqQu4KMr1/sTFIYvqSdegHT8NIkt66tFAkugGnHA+1WAfEn6hMzNR+svjXGFRVLnapxvej67Z/LwchFrnLBUg==} + engines: {node: '>=18.0.0', npm: '>=9.0.0'} '@floating-ui/core@1.6.8': resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} - '@floating-ui/dom@1.6.11': - resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==} + '@floating-ui/dom@1.6.12': + resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} '@floating-ui/react-dom@2.1.2': resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==} @@ -660,8 +626,8 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - '@floating-ui/react@0.26.25': - resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==} + '@floating-ui/react@0.26.27': + resolution: {integrity: sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' @@ -894,9 +860,6 @@ packages: resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} - '@radix-ui/number@1.1.0': - resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==} - '@radix-ui/primitive@1.1.0': resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==} @@ -1009,7 +972,7 @@ packages: resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==} peerDependencies: '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react: '*' peerDependenciesMeta: '@types/react': optional: true @@ -1054,19 +1017,14 @@ packages: peerDependencies: '@types/react': '*' '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react: '*' + react-dom: '*' peerDependenciesMeta: '@types/react': optional: true '@types/react-dom': optional: true - '@radix-ui/react-icons@1.3.1': - resolution: {integrity: sha512-QvYompk0X+8Yjlo/Fv4McrzxohDdM5GgLHyQcPpcsPvlOSXCGFjdbuyGL5dzRbg0GpknAjQJJZzdiRK7iWVuFQ==} - peerDependencies: - react: ^16.x || ^17.x || ^18.x || ^19.x - '@radix-ui/react-id@1.1.0': resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} peerDependencies: @@ -1167,19 +1125,6 @@ packages: '@types/react-dom': optional: true - '@radix-ui/react-scroll-area@1.2.0': - resolution: {integrity: sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-separator@1.1.0': resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==} peerDependencies: @@ -1258,7 +1203,7 @@ packages: resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} peerDependencies: '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react: '*' peerDependenciesMeta: '@types/react': optional: true @@ -1285,7 +1230,7 @@ packages: resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==} peerDependencies: '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react: '*' peerDependenciesMeta: '@types/react': optional: true @@ -1482,6 +1427,17 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.108.0' + '@udecode/plate-basic-elements@39.0.0': + resolution: {integrity: sha512-5E0liG1LbvJ63J5ueXATVVDVe0duyHgsARG97PLx+0MfSe4byodwoqU8L5KZ4JmHp3QNsk1M5hzhY4AnAEHyhA==} + peerDependencies: + '@udecode/plate-common': '>=39.0.0' + react: '>=16.8.0' + react-dom: '>=16.8.0' + slate: '>=0.103.0' + slate-history: '>=0.93.0' + slate-hyperscript: '>=0.66.0' + slate-react: '>=0.108.0' + '@udecode/plate-basic-marks@39.0.0': resolution: {integrity: sha512-GtHFK1gwmhfnwl0Lf3xiRuNS832bNaelx5Sr/uzSVpH7Xo4p7Ssdxp+vc9LsiUrQcBQyuybvyYGbiY7i2o5DCA==} peerDependencies: @@ -1570,18 +1526,8 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.108.0' - '@udecode/plate-common@39.2.20': - resolution: {integrity: sha512-i+cHPY5/+G+CLdijyMyEKSh9qiq7RKYGk/8tuBN/qzQT+53XWirzxLkTS6siBVgIktZwXRpK9Td/+qCca6tW5g==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - slate: '>=0.103.0' - slate-history: '>=0.93.0' - slate-hyperscript: '>=0.66.0' - slate-react: '>=0.108.0' - - '@udecode/plate-core@39.2.20': - resolution: {integrity: sha512-pjOclpsqzEVibsquMmLfWEMBkJ5o7v+T66yNOG52c2coxrfvLoUWv++d4MiigvGNaZnB8uYbhJwQwg7YhKJEoA==} + '@udecode/plate-common@39.2.21': + resolution: {integrity: sha512-K+Hm5GEeO8YJJP1kRWErCbxDkOUmssnIR3xulcLEhIdUhoEEaojmNa2tfJ1H9mvmgM2JJgy5ZWcBqQES/KgwWg==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' @@ -1590,10 +1536,9 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.108.0' - '@udecode/plate-csv@39.1.6': - resolution: {integrity: sha512-taCrXT52YxiwijBGFFIhbaekzD5mO7d2J2fhJvvl6I6I5YoZneIPKDpzZYxdgJtFnr5wqSzsUKfWPDOXvu41cA==} + '@udecode/plate-core@39.2.21': + resolution: {integrity: sha512-/+KEW5M55xrTaqofcUFX3KZOAtRza9TQKQC7DNg867gHo0qFR8m8qKs5l83OAoWnzYkM4Lj+0Sirui2RCr40Wg==} peerDependencies: - '@udecode/plate-common': '>=39.1.4' react: '>=16.8.0' react-dom: '>=16.8.0' slate: '>=0.103.0' @@ -1669,17 +1614,6 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.108.0' - '@udecode/plate-find-replace@39.0.0': - resolution: {integrity: sha512-yLJt6m6lUkZmeYPaOGPoNwnaCL4wRlSUvQzyoDoyP5OuJ+EFYiq19y8MiIrw5M0zTKcMNUlHHzAz5mWonMM7HA==} - peerDependencies: - '@udecode/plate-common': '>=39.0.0' - react: '>=16.8.0' - react-dom: '>=16.8.0' - slate: '>=0.103.0' - slate-history: '>=0.93.0' - slate-hyperscript: '>=0.66.0' - slate-react: '>=0.108.0' - '@udecode/plate-floating@39.1.6': resolution: {integrity: sha512-oHy8Zfs5JMNkk1Slnv6BR+4LYQV0oFTWinfkJY7vSDs+dzdnHvbSfnW7/TFxt/yPMvK8CA5qCTckfSIt8kQKQg==} peerDependencies: @@ -1735,17 +1669,6 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.108.0' - '@udecode/plate-html@39.0.0': - resolution: {integrity: sha512-/1ndpNeJexpcuJdCfbnNsupbZ964J02pYy6HeRcilk7cEh4IiIqMGKODTwXZ0RD412Xd4S0QxcN685Ls03443g==} - peerDependencies: - '@udecode/plate-common': '>=39.0.0' - react: '>=16.8.0' - react-dom: '>=16.8.0' - slate: '>=0.103.0' - slate-history: '>=0.93.0' - slate-hyperscript: '>=0.66.0' - slate-react: '>=0.108.0' - '@udecode/plate-indent-list@39.1.10': resolution: {integrity: sha512-5yuV1EEVnC6EpWmc1abyRundVVH7xmR+d8l5sLW6/0ENytJpMJa9ga/hYSX9PStMq1Zvp17axJph0ok29RlHVg==} peerDependencies: @@ -1998,8 +1921,8 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.108.0' - '@udecode/plate-utils@39.2.20': - resolution: {integrity: sha512-iFdxDaDr0sSI1tvnoskESTL6D+IYjLowMG8Voh0H2jAqI59W7WGSMBr7wqI+JbiXVJyw3YwLaO+dPxUVTv8KFw==} + '@udecode/plate-utils@39.2.21': + resolution: {integrity: sha512-EEjUAKdzCqso92wqrqetA0cqYObjSISvI/M3dOrZ4Aij4IaMj/f1WBP6nQoDdpjXXmLnVeWT6Px0Gbuma3EcpA==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' @@ -2091,13 +2014,8 @@ packages: engines: {node: '>=0.4.0'} hasBin: true - acorn@8.14.0: - resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==} - engines: {node: '>=0.4.0'} - hasBin: true - - ai@3.4.30: - resolution: {integrity: sha512-Io3SZvvYjvCh3S/b3IuZUNVVBf9rU/fgh2JXdMs1vIMf4IdgreGW9XQtuXJi5jc+Mpe0Lotf4R9ll+krX5fsaQ==} + ai@3.4.33: + resolution: {integrity: sha512-plBlrVZKwPoRTmM8+D1sJac9Bq8eaa2jiZlHLZIWekKWI1yMWYZvCCEezY9ASPwRhULYDJB2VhKOBUUeg3S5JQ==} engines: {node: '>=18'} peerDependencies: openai: ^4.42.0 @@ -2262,9 +2180,6 @@ packages: caniuse-lite@1.0.30001660: resolution: {integrity: sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==} - caniuse-lite@1.0.30001676: - resolution: {integrity: sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==} - chalk@4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} @@ -2307,8 +2222,8 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} - cmdk@1.0.3: - resolution: {integrity: sha512-2c3uTjwT4YeHj60q2k8S1B0WHSoGR6t5CPnec6PMFD2QF4gwid0t1VSPNeEmL02EwBwNky/A3gwPCOViKTtoPA==} + cmdk@1.0.4: + resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==} peerDependencies: react: ^18 || ^19 || ^19.0.0-rc react-dom: ^18 || ^19 || ^19.0.0-rc @@ -2641,20 +2556,6 @@ packages: vue-eslint-parser: optional: true - eslint-plugin-prettier@5.2.1: - resolution: {integrity: sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==} - engines: {node: ^14.18.0 || >=16.0.0} - peerDependencies: - '@types/eslint': '>=8.0.0' - eslint: '>=8.0.0' - eslint-config-prettier: '*' - prettier: '>=3.0.0' - peerDependenciesMeta: - '@types/eslint': - optional: true - eslint-config-prettier: - optional: true - eslint-plugin-react-hooks@5.0.0: resolution: {integrity: sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==} engines: {node: '>=10'} @@ -2734,9 +2635,6 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} - fast-diff@1.3.0: - resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} - fast-glob@3.3.1: resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} @@ -2889,9 +2787,6 @@ packages: hoist-non-react-statics@3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} - html-entities@2.5.2: - resolution: {integrity: sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==} - htmlparser2@5.0.1: resolution: {integrity: sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==} @@ -3264,11 +3159,6 @@ packages: mz@2.7.0: resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} - nanoid@3.3.6: - resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} - engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} - hasBin: true - nanoid@3.3.7: resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -3280,12 +3170,6 @@ packages: natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} - next-themes@0.3.0: - resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==} - peerDependencies: - react: ^16.8 || ^17 || ^18 - react-dom: ^16.8 || ^17 || ^18 - next@15.0.2: resolution: {integrity: sha512-rxIWHcAu4gGSDmwsELXacqAPUk+j8dV/A9cDF5fsiCMpkBDYkO2AEaL1dfD+nNmDiU6QMCFN8Q30VEKapT9UHQ==} engines: {node: '>=18.18.0'} @@ -3387,9 +3271,6 @@ packages: package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} - papaparse@5.4.1: - resolution: {integrity: sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==} - parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -3500,10 +3381,6 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} - prettier-linter-helpers@1.0.0: - resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==} - engines: {node: '>=6.0.0'} - prettier-plugin-packagejson@2.5.3: resolution: {integrity: sha512-ATMEEXr+ywls1kgrZEWl4SBPEm0uDdyDAjyNzUC0/Z8WZTD3RqbJcQDR+Dau+wYkW9KHK6zqQIsFyfn+9aduWg==} peerDependencies: @@ -3755,6 +3632,11 @@ packages: resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==} engines: {node: '>=12'} + slate-dom@0.111.0: + resolution: {integrity: sha512-VjeBh2xIRvP6ToEhrO1TPahc5fPezxbeSUhsRTppBPtHfidEdyp/MTI9TjUrZnlznJiVZ7QKrORXilFq8hsbtQ==} + peerDependencies: + slate: '>=0.99.0' + slate-history@0.110.3: resolution: {integrity: sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==} peerDependencies: @@ -3765,12 +3647,13 @@ packages: peerDependencies: slate: '>=0.65.3' - slate-react@0.110.3: - resolution: {integrity: sha512-AS8PPjwmsFS3Lq0MOEegLVlFoxhyos68G6zz2nW4sh3WeTXV7pX0exnwtY1a/docn+J3LGQO11aZXTenPXA/kg==} + slate-react@0.111.0: + resolution: {integrity: sha512-DiiVSYn+dilx0j40FjaaHiG2KbaX4lZfTdEnYvUJMnpc+d9evcuO2nV6KCDQOtS6xr4w0sBzQMxrpGlA5alKww==} peerDependencies: react: '>=18.2.0' react-dom: '>=18.2.0' slate: '>=0.99.0' + slate-dom: '>=0.110.2' slate@0.110.2: resolution: {integrity: sha512-4xGULnyMCiEQ0Ml7JAC1A6HVE6MNpPJU7Eq4cXh1LxlrR0dFXC3XC+rNfQtUJ7chHoPkws57x7DDiWiZAt+PBA==} @@ -3778,12 +3661,6 @@ packages: slick@1.12.2: resolution: {integrity: sha512-4qdtOGcBjral6YIBCWJ0ljFSKNLz9KkhbWtuGvUyRowl1kxfuE1x/Z/aJcaiilpb3do9bl5K7/1h9XC5wWpY/A==} - sonner@1.5.0: - resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==} - peerDependencies: - react: ^18.0.0 - react-dom: ^18.0.0 - sort-object-keys@1.1.3: resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==} @@ -3893,10 +3770,6 @@ packages: peerDependencies: vue: '>=3.2.26 < 4' - synckit@0.9.1: - resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==} - engines: {node: ^14.18.0 || >=16.0.0} - synckit@0.9.2: resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -3931,6 +3804,10 @@ packages: thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + throttleit@2.1.0: + resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==} + engines: {node: '>=18'} + tiny-invariant@1.3.1: resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==} @@ -3962,9 +3839,6 @@ packages: tsconfig-paths@3.15.0: resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==} - tslib@2.7.0: - resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==} - tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -4204,19 +4078,10 @@ packages: snapshots: - '@ai-sdk/openai@0.0.68(zod@3.23.8)': + '@ai-sdk/openai@0.0.71(zod@3.23.8)': dependencies: - '@ai-sdk/provider': 0.0.24 - '@ai-sdk/provider-utils': 1.0.20(zod@3.23.8) - zod: 3.23.8 - - '@ai-sdk/provider-utils@1.0.20(zod@3.23.8)': - dependencies: - '@ai-sdk/provider': 0.0.24 - eventsource-parser: 1.1.2 - nanoid: 3.3.6 - secure-json-parse: 2.7.0 - optionalDependencies: + '@ai-sdk/provider': 0.0.26 + '@ai-sdk/provider-utils': 1.0.22(zod@3.23.8) zod: 3.23.8 '@ai-sdk/provider-utils@1.0.22(zod@3.23.8)': @@ -4228,19 +4093,16 @@ snapshots: optionalDependencies: zod: 3.23.8 - '@ai-sdk/provider@0.0.24': - dependencies: - json-schema: 0.4.0 - '@ai-sdk/provider@0.0.26': dependencies: json-schema: 0.4.0 - '@ai-sdk/react@0.0.69(react@18.3.1)(zod@3.23.8)': + '@ai-sdk/react@0.0.70(react@18.3.1)(zod@3.23.8)': dependencies: '@ai-sdk/provider-utils': 1.0.22(zod@3.23.8) '@ai-sdk/ui-utils': 0.0.50(zod@3.23.8) swr: 2.2.5(react@18.3.1) + throttleit: 2.1.0 optionalDependencies: react: 18.3.1 zod: 3.23.8 @@ -4289,19 +4151,19 @@ snapshots: '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 - '@ariakit/core@0.4.10': {} + '@ariakit/core@0.4.12': {} - '@ariakit/react-core@0.4.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@ariakit/react-core@0.4.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@ariakit/core': 0.4.10 - '@floating-ui/dom': 1.6.11 + '@ariakit/core': 0.4.12 + '@floating-ui/dom': 1.6.12 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) use-sync-external-store: 1.2.2(react@18.3.1) - '@ariakit/react@0.4.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@ariakit/react@0.4.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@ariakit/react-core': 0.4.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@ariakit/react-core': 0.4.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -4313,11 +4175,7 @@ snapshots: dependencies: '@babel/types': 7.26.0 - '@babel/runtime@7.25.6': - dependencies: - regenerator-runtime: 0.14.1 - - '@babel/runtime@7.25.7': + '@babel/runtime@7.26.0': dependencies: regenerator-runtime: 0.14.1 @@ -4440,22 +4298,24 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@faker-js/faker@9.2.0': {} + '@floating-ui/core@1.6.8': dependencies: '@floating-ui/utils': 0.2.8 - '@floating-ui/dom@1.6.11': + '@floating-ui/dom@1.6.12': dependencies: '@floating-ui/core': 1.6.8 '@floating-ui/utils': 0.2.8 '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@floating-ui/dom': 1.6.11 + '@floating-ui/dom': 1.6.12 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@floating-ui/react@0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@floating-ui/react@0.26.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@floating-ui/utils': 0.2.8 @@ -4631,8 +4491,6 @@ snapshots: '@pkgr/core@0.1.1': {} - '@radix-ui/number@1.1.0': {} - '@radix-ui/primitive@1.1.0': {} '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': @@ -4789,10 +4647,6 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 - '@radix-ui/react-icons@1.3.1(react@18.3.1)': - dependencies: - react: 18.3.1 - '@radix-ui/react-id@1.1.0(@types/react@18.3.12)(react@18.3.1)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) @@ -4913,23 +4767,6 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 - '@radix-ui/react-scroll-area@1.2.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/number': 1.1.0 - '@radix-ui/primitive': 1.1.0 - '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-direction': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - '@radix-ui/react-separator@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -5078,7 +4915,7 @@ snapshots: '@swc/helpers@0.5.13': dependencies: - tslib: 2.7.0 + tslib: 2.8.1 '@types/diff-match-patch@1.0.36': {} @@ -5200,134 +5037,147 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@udecode/plate-ai@39.2.19(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-ai@39.2.19(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-markdown': 39.2.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-selection': 39.2.12(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-markdown': 39.2.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-selection': 39.2.12(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - supports-color - '@udecode/plate-alignment@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-alignment@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-autoformat@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-autoformat@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) + + '@udecode/plate-basic-elements@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': + dependencies: + '@udecode/plate-block-quote': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-code-block': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-heading': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + slate: 0.110.2 + slate-history: 0.110.3(slate@0.110.2) + slate-hyperscript: 0.100.0(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-basic-marks@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-basic-marks@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-block-quote@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-block-quote@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-break@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-break@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-callout@39.2.18(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-callout@39.2.18(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-caption@39.0.0(@types/react@18.3.12)(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-caption@39.0.0(@types/react@18.3.12)(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) react-textarea-autosize: 8.5.4(@types/react@18.3.12)(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - '@types/react' - '@udecode/plate-code-block@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-code-block@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-combobox@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-combobox@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-comments@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-comments@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-core': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-utils': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-core': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-utils': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/react-hotkeys': 37.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) - '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/slate-utils': 39.2.20(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) '@udecode/utils': 37.0.0 react: 18.3.1 @@ -5335,19 +5185,19 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - '@types/react' - immer - react-native - scheduler - '@udecode/plate-core@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-core@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: '@udecode/react-hotkeys': 37.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) - '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/slate-utils': 39.2.20(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) '@udecode/utils': 37.0.0 clsx: 2.1.1 @@ -5363,7 +5213,7 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) use-deep-compare: 1.3.0(react@18.3.1) zustand: 4.5.5(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1) zustand-x: 3.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(zustand@4.5.5(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1)) @@ -5373,41 +5223,29 @@ snapshots: - react-native - scheduler - '@udecode/plate-csv@39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-cursor@39.2.11(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-table': 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - papaparse: 5.4.1 + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-cursor@39.2.11(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-date@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-date@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-dnd@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dnd-html5-backend@16.0.1)(react-dnd@16.0.1(@types/node@22.8.6)(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - slate: 0.110.2 - slate-history: 0.110.3(slate@0.110.2) - slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) - - '@udecode/plate-dnd@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dnd-html5-backend@16.0.1)(react-dnd@16.0.1(@types/node@22.8.6)(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': - dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 raf: 3.4.1 react: 18.3.1 @@ -5417,214 +5255,193 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-docx@39.2.13(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-docx@39.2.13(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-heading': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-indent': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-indent-list': 39.1.10(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-media': 39.2.13(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-table': 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-heading': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-indent': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-indent-list': 39.1.10(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-media': 39.2.13(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-table': 39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) validator: 13.12.0 - '@udecode/plate-emoji@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-emoji@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: '@emoji-mart/data': 1.2.1 - '@udecode/plate-combobox': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-combobox': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-excalidraw@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-excalidraw@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: '@excalidraw/excalidraw': 0.16.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-find-replace@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': - dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - slate: 0.110.2 - slate-history: 0.110.3(slate@0.110.2) - slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) - - '@udecode/plate-floating@39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-floating@39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: '@floating-ui/core': 1.6.8 - '@floating-ui/react': 0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@floating-ui/react': 0.26.27(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-font@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-font@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) - - '@udecode/plate-heading@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': - dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - slate: 0.110.2 - slate-history: 0.110.3(slate@0.110.2) - slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-highlight@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-heading@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-horizontal-rule@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-highlight@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-html@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-horizontal-rule@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - html-entities: 2.5.2 + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-indent-list@39.1.10(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-indent-list@39.1.10(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-indent': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-list': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-indent': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-list': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) clsx: 2.1.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-indent@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-indent@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-juice@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-juice@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) juice: 8.1.0(encoding@0.1.13) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - encoding - '@udecode/plate-kbd@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-kbd@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-layout@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-layout@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-line-height@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-line-height@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-link@39.1.9(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-link@39.1.9(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-floating': 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-normalizers': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-floating': 39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-normalizers': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-list@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-list@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-reset-node': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-reset-node': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-markdown@39.2.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-markdown@39.2.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -5632,171 +5449,171 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) unified: 11.0.5 transitivePeerDependencies: - supports-color - '@udecode/plate-math@39.2.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-math@39.2.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) katex: 0.16.11 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-media@39.2.13(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-media@39.2.13(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) js-video-url-parser: 0.5.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-mention@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-mention@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-combobox': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-combobox': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-node-id@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-node-id@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-normalizers@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-normalizers@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-reset-node@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-reset-node@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-resizable@39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-resizable@39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-select@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-select@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-selection@39.2.12(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-selection@39.2.12(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) copy-to-clipboard: 3.3.3 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-slash-command@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-slash-command@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-combobox': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-combobox': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-tabbable@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-tabbable@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) tabbable: 6.2.0 - '@udecode/plate-table@39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-table@39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-resizable': 39.1.6(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-resizable': 39.1.6(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - slate-hyperscript - '@udecode/plate-toggle@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-toggle@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-indent': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-node-id': 39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-indent': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-node-id': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-trailing-block@39.0.0(@udecode/plate-common@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-trailing-block@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-utils@39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-utils@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-core': 39.2.20(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-core': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) - '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/slate-utils': 39.2.20(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) '@udecode/utils': 37.0.0 clsx: 2.1.1 @@ -5806,7 +5623,7 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - '@types/react' - immer @@ -5828,7 +5645,7 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@udecode/slate-react@39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/slate-react@39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) @@ -5837,7 +5654,7 @@ snapshots: react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - '@types/react' @@ -5918,19 +5735,17 @@ snapshots: dependencies: acorn: 8.12.1 - acorn-typescript@1.4.13(acorn@8.14.0): + acorn-typescript@1.4.13(acorn@8.12.1): dependencies: - acorn: 8.14.0 + acorn: 8.12.1 acorn@8.12.1: {} - acorn@8.14.0: {} - - ai@3.4.30(react@18.3.1)(sswr@2.1.0(svelte@5.1.9))(svelte@5.1.9)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8): + ai@3.4.33(react@18.3.1)(sswr@2.1.0(svelte@5.1.9))(svelte@5.1.9)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8): dependencies: '@ai-sdk/provider': 0.0.26 '@ai-sdk/provider-utils': 1.0.22(zod@3.23.8) - '@ai-sdk/react': 0.0.69(react@18.3.1)(zod@3.23.8) + '@ai-sdk/react': 0.0.70(react@18.3.1)(zod@3.23.8) '@ai-sdk/solid': 0.0.54(zod@3.23.8) '@ai-sdk/svelte': 0.0.57(svelte@5.1.9)(zod@3.23.8) '@ai-sdk/ui-utils': 0.0.50(zod@3.23.8) @@ -5982,7 +5797,7 @@ snapshots: aria-hidden@1.2.4: dependencies: - tslib: 2.7.0 + tslib: 2.8.1 aria-query@5.3.2: {} @@ -6117,8 +5932,6 @@ snapshots: caniuse-lite@1.0.30001660: {} - caniuse-lite@1.0.30001676: {} - chalk@4.1.2: dependencies: ansi-styles: 4.3.0 @@ -6148,7 +5961,7 @@ snapshots: htmlparser2: 6.1.0 parse5: 6.0.1 parse5-htmlparser2-tree-adapter: 6.0.1 - tslib: 2.7.0 + tslib: 2.8.1 chokidar@3.6.0: dependencies: @@ -6172,7 +5985,7 @@ snapshots: clsx@2.1.1: {} - cmdk@1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + cmdk@1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@radix-ui/react-dialog': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-id': 1.1.0(@types/react@18.3.12)(react@18.3.1) @@ -6612,15 +6425,6 @@ snapshots: - supports-color - typescript - eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3): - dependencies: - eslint: 8.57.1 - prettier: 3.3.3 - prettier-linter-helpers: 1.0.0 - synckit: 0.9.1 - optionalDependencies: - eslint-config-prettier: 9.1.0(eslint@8.57.1) - eslint-plugin-react-hooks@5.0.0(eslint@8.57.1): dependencies: eslint: 8.57.1 @@ -6742,8 +6546,6 @@ snapshots: fast-deep-equal@3.1.3: {} - fast-diff@1.3.0: {} - fast-glob@3.3.1: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -6915,8 +6717,6 @@ snapshots: dependencies: react-is: 16.13.1 - html-entities@2.5.2: {} - htmlparser2@5.0.1: dependencies: domelementtype: 2.3.0 @@ -7270,26 +7070,19 @@ snapshots: object-assign: 4.1.1 thenify-all: 1.6.0 - nanoid@3.3.6: {} - nanoid@3.3.7: {} natural-compare-lite@1.4.0: {} natural-compare@1.4.0: {} - next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - next@15.0.2(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@next/env': 15.0.2 '@swc/counter': 0.1.3 '@swc/helpers': 0.5.13 busboy: 1.6.0 - caniuse-lite: 1.0.30001676 + caniuse-lite: 1.0.30001660 postcss: 8.4.31 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -7390,8 +7183,6 @@ snapshots: package-json-from-dist@1.0.1: {} - papaparse@5.4.1: {} - parent-module@1.0.1: dependencies: callsites: 3.1.0 @@ -7485,10 +7276,6 @@ snapshots: prelude-ls@1.2.1: {} - prettier-linter-helpers@1.0.0: - dependencies: - fast-diff: 1.3.0 - prettier-plugin-packagejson@2.5.3(prettier@3.3.3): dependencies: sort-package-json: 2.10.1 @@ -7554,7 +7341,7 @@ snapshots: dependencies: react: 18.3.1 react-style-singleton: 2.2.1(@types/react@18.3.12)(react@18.3.1) - tslib: 2.7.0 + tslib: 2.8.1 optionalDependencies: '@types/react': 18.3.12 @@ -7563,7 +7350,7 @@ snapshots: react: 18.3.1 react-remove-scroll-bar: 2.3.6(@types/react@18.3.12)(react@18.3.1) react-style-singleton: 2.2.1(@types/react@18.3.12)(react@18.3.1) - tslib: 2.7.0 + tslib: 2.8.1 use-callback-ref: 1.3.2(@types/react@18.3.12)(react@18.3.1) use-sidecar: 1.1.2(@types/react@18.3.12)(react@18.3.1) optionalDependencies: @@ -7579,13 +7366,13 @@ snapshots: get-nonce: 1.0.1 invariant: 2.2.4 react: 18.3.1 - tslib: 2.7.0 + tslib: 2.8.1 optionalDependencies: '@types/react': 18.3.12 react-textarea-autosize@8.5.4(@types/react@18.3.12)(react@18.3.1): dependencies: - '@babel/runtime': 7.25.7 + '@babel/runtime': 7.26.0 react: 18.3.1 use-composed-ref: 1.3.0(react@18.3.1) use-latest: 1.2.1(@types/react@18.3.12)(react@18.3.1) @@ -7623,7 +7410,7 @@ snapshots: redux@4.2.1: dependencies: - '@babel/runtime': 7.25.6 + '@babel/runtime': 7.26.0 reflect.getprototypeof@1.0.6: dependencies: @@ -7770,6 +7557,17 @@ snapshots: slash@4.0.0: {} + slate-dom@0.111.0(slate@0.110.2): + dependencies: + '@juggle/resize-observer': 3.4.0 + direction: 1.0.4 + is-hotkey: 0.2.0 + is-plain-object: 5.0.0 + lodash: 4.17.21 + scroll-into-view-if-needed: 3.1.0 + slate: 0.110.2 + tiny-invariant: 1.3.1 + slate-history@0.110.3(slate@0.110.2): dependencies: is-plain-object: 5.0.0 @@ -7780,7 +7578,7 @@ snapshots: is-plain-object: 5.0.0 slate: 0.110.2 - slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2): + slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2): dependencies: '@juggle/resize-observer': 3.4.0 direction: 1.0.4 @@ -7791,6 +7589,7 @@ snapshots: react-dom: 18.3.1(react@18.3.1) scroll-into-view-if-needed: 3.1.0 slate: 0.110.2 + slate-dom: 0.111.0(slate@0.110.2) tiny-invariant: 1.3.1 slate@0.110.2: @@ -7801,11 +7600,6 @@ snapshots: slick@1.12.2: {} - sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - sort-object-keys@1.1.3: {} sort-package-json@2.10.1: @@ -7923,8 +7717,8 @@ snapshots: '@ampproject/remapping': 2.3.0 '@jridgewell/sourcemap-codec': 1.5.0 '@types/estree': 1.0.6 - acorn: 8.14.0 - acorn-typescript: 1.4.13(acorn@8.14.0) + acorn: 8.12.1 + acorn-typescript: 1.4.13(acorn@8.12.1) aria-query: 5.3.2 axobject-query: 4.1.0 esm-env: 1.1.4 @@ -7946,11 +7740,6 @@ snapshots: dependencies: vue: 3.5.12(typescript@5.6.3) - synckit@0.9.1: - dependencies: - '@pkgr/core': 0.1.1 - tslib: 2.7.0 - synckit@0.9.2: dependencies: '@pkgr/core': 0.1.1 @@ -8003,6 +7792,8 @@ snapshots: dependencies: any-promise: 1.3.0 + throttleit@2.1.0: {} + tiny-invariant@1.3.1: {} tiny-warning@1.0.3: {} @@ -8030,8 +7821,6 @@ snapshots: minimist: 1.2.8 strip-bom: 3.0.0 - tslib@2.7.0: {} - tslib@2.8.1: {} tsx@4.19.2: @@ -8121,7 +7910,7 @@ snapshots: use-callback-ref@1.3.2(@types/react@18.3.12)(react@18.3.1): dependencies: react: 18.3.1 - tslib: 2.7.0 + tslib: 2.8.1 optionalDependencies: '@types/react': 18.3.12 @@ -8158,7 +7947,7 @@ snapshots: dependencies: detect-node-es: 1.1.0 react: 18.3.1 - tslib: 2.7.0 + tslib: 2.8.1 optionalDependencies: '@types/react': 18.3.12 diff --git a/templates/plate-playground-template/postcss.config.js b/templates/plate-playground-template/postcss.config.js deleted file mode 100644 index 12a703d900..0000000000 --- a/templates/plate-playground-template/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/templates/plate-playground-template/postcss.config.mjs b/templates/plate-playground-template/postcss.config.mjs new file mode 100644 index 0000000000..1a69fd2a45 --- /dev/null +++ b/templates/plate-playground-template/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/templates/plate-playground-template/public/next.svg b/templates/plate-playground-template/public/next.svg deleted file mode 100644 index 5174b28c56..0000000000 --- a/templates/plate-playground-template/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/plate-playground-template/public/thirteen.svg b/templates/plate-playground-template/public/thirteen.svg deleted file mode 100644 index 8977c1bd12..0000000000 --- a/templates/plate-playground-template/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/plate-playground-template/public/vercel.svg b/templates/plate-playground-template/public/vercel.svg deleted file mode 100644 index d2f8422273..0000000000 --- a/templates/plate-playground-template/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/plate-playground-template/src/app/editor/page.tsx b/templates/plate-playground-template/src/app/editor/page.tsx new file mode 100644 index 0000000000..2859d21b23 --- /dev/null +++ b/templates/plate-playground-template/src/app/editor/page.tsx @@ -0,0 +1,12 @@ +import { PlateEditor } from '@/components/editor/plate-editor'; +import { OpenAIProvider } from '@/components/editor/use-chat'; + +export default function Page() { + return ( +
+ + + +
+ ); +} diff --git a/templates/plate-playground-template/public/favicon.ico b/templates/plate-playground-template/src/app/favicon.ico similarity index 100% rename from templates/plate-playground-template/public/favicon.ico rename to templates/plate-playground-template/src/app/favicon.ico diff --git a/templates/plate-playground-template/src/app/fonts/GeistMonoVF.woff b/templates/plate-playground-template/src/app/fonts/GeistMonoVF.woff new file mode 100644 index 0000000000..f2ae185cbf Binary files /dev/null and b/templates/plate-playground-template/src/app/fonts/GeistMonoVF.woff differ diff --git a/templates/plate-playground-template/src/app/fonts/GeistVF.woff b/templates/plate-playground-template/src/app/fonts/GeistVF.woff new file mode 100644 index 0000000000..1b62daacff Binary files /dev/null and b/templates/plate-playground-template/src/app/fonts/GeistVF.woff differ diff --git a/templates/plate-playground-template/src/app/globals.css b/templates/plate-playground-template/src/app/globals.css new file mode 100644 index 0000000000..09c15d81a3 --- /dev/null +++ b/templates/plate-playground-template/src/app/globals.css @@ -0,0 +1,135 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + font-family: Arial, Helvetica, sans-serif; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } + [data-registry="plate"] { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --brand: 217.2 91.2% 59.8%; + --highlight: 47.9 95.8% 53.1%; + } + [data-registry="plate"].dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --brand: 213.3 93.9% 67.8%; + --highlight: 48 96% 53%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/templates/plate-playground-template/src/app/layout.tsx b/templates/plate-playground-template/src/app/layout.tsx index fb6d38cff0..a36cde01c6 100644 --- a/templates/plate-playground-template/src/app/layout.tsx +++ b/templates/plate-playground-template/src/app/layout.tsx @@ -1,65 +1,35 @@ -import { Metadata, Viewport } from 'next'; - -import { cn } from '@udecode/cn'; -import { Toaster } from 'sonner'; - -import { OpenAIProvider } from '@/components/openai/openai-context'; -import { SiteHeader } from '@/components/site/site-header'; -import { TailwindIndicator } from '@/components/site/tailwind-indicator'; -import { ThemeProvider } from '@/components/site/theme-provider'; -import { siteConfig } from '@/config/site'; -import { fontSans } from '@/lib/fonts'; - -import '@/styles/globals.css'; +import type { Metadata } from "next"; +import localFont from "next/font/local"; +import "./globals.css"; + +const geistSans = localFont({ + src: "./fonts/GeistVF.woff", + variable: "--font-geist-sans", + weight: "100 900", +}); +const geistMono = localFont({ + src: "./fonts/GeistMonoVF.woff", + variable: "--font-geist-mono", + weight: "100 900", +}); export const metadata: Metadata = { - description: siteConfig.description, - icons: { - apple: '/apple-touch-icon.png', - icon: '/favicon.ico', - shortcut: '/favicon-16x16.png', - }, - title: { - default: siteConfig.name, - template: `%s - ${siteConfig.name}`, - }, -}; - -export const viewport: Viewport = { - themeColor: [ - { color: 'white', media: '(prefers-color-scheme: light)' }, - { color: 'black', media: '(prefers-color-scheme: dark)' }, - ], + title: "Create Next App", + description: "Generated by create next app", }; -interface RootLayoutProps { +export default function RootLayout({ + children, +}: Readonly<{ children: React.ReactNode; -} - -export default function RootLayout({ children }: RootLayoutProps) { +}>) { return ( - <> - - - - - -
- -
{children}
-
- - - - - - - - + + + {children} + + ); } diff --git a/templates/plate-playground-template/src/app/page.tsx b/templates/plate-playground-template/src/app/page.tsx index 5b4c581634..433c8aa7fd 100644 --- a/templates/plate-playground-template/src/app/page.tsx +++ b/templates/plate-playground-template/src/app/page.tsx @@ -1,42 +1,101 @@ -import Link from 'next/link'; +import Image from "next/image"; -import PlateEditor from '@/components/plate-editor'; -import { buttonVariants } from '@/components/plate-ui/button'; -import { siteConfig } from '@/config/site'; - -export default function IndexPage() { +export default function Home() { return ( -
-
-

- Plate Playground -

-

- AI · Plugins · Components · Next 15 -

-
-
- +
+ +
    +
  1. + Get started by editing{" "} + + app/page.tsx + + . +
    2. +
  2. Save and see your changes instantly.
    3. +
+ + +
+
- -
- -
-
+ + Examples + + + + Go to nextjs.org → + + +
); } diff --git a/templates/plate-playground-template/src/assets/fonts/Inter-Bold.ttf b/templates/plate-playground-template/src/assets/fonts/Inter-Bold.ttf deleted file mode 100644 index 8e82c70d10..0000000000 Binary files a/templates/plate-playground-template/src/assets/fonts/Inter-Bold.ttf and /dev/null differ diff --git a/templates/plate-playground-template/src/assets/fonts/Inter-Regular.ttf b/templates/plate-playground-template/src/assets/fonts/Inter-Regular.ttf deleted file mode 100644 index 8d4eebf206..0000000000 Binary files a/templates/plate-playground-template/src/assets/fonts/Inter-Regular.ttf and /dev/null differ diff --git a/templates/plate-playground-template/src/components/editor/plate-editor.tsx b/templates/plate-playground-template/src/components/editor/plate-editor.tsx new file mode 100644 index 0000000000..dc74d35fce --- /dev/null +++ b/templates/plate-playground-template/src/components/editor/plate-editor.tsx @@ -0,0 +1,51 @@ +'use client'; + +import React, { useRef } from 'react'; +import { DndProvider } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; + +import { Plate } from '@udecode/plate-common/react'; + +import { useCreateEditor } from '@/components/editor/use-create-editor'; +import { SettingsDialog } from '@/components/editor/use-chat'; +import { CommentsPopover } from '@/components/plate-ui/comments-popover'; +import { CursorOverlay } from '@/components/plate-ui/cursor-overlay'; +import { Editor, EditorContainer } from '@/components/plate-ui/editor'; +import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar'; +import { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons'; +import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar'; +import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons'; + +export function PlateEditor() { + const containerRef = useRef(null); + + const editor = useCreateEditor(); + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/www/src/registry/default/lib/plate-types.ts b/templates/plate-playground-template/src/components/editor/plate-types.ts similarity index 92% rename from apps/www/src/registry/default/lib/plate-types.ts rename to templates/plate-playground-template/src/components/editor/plate-types.ts index 7066f1fdec..32b8e0b587 100644 --- a/apps/www/src/registry/default/lib/plate-types.ts +++ b/templates/plate-playground-template/src/components/editor/plate-types.ts @@ -1,13 +1,15 @@ +'use client'; + import type React from 'react'; -import type { usePlaygroundEditor } from '@/registry/default/example/playground-demo'; import type { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import type { CodeBlockPlugin, CodeLinePlugin, } from '@udecode/plate-code-block/react'; import type { TCommentText } from '@udecode/plate-comments'; -import type { ElementOf, TElement, TText } from '@udecode/plate-common'; +import type { TElement, TText } from '@udecode/plate-common'; +import type { ParagraphPlugin } from '@udecode/plate-common/react'; import type { TExcalidrawElement } from '@udecode/plate-excalidraw'; import type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react'; import type { HEADING_KEYS } from '@udecode/plate-heading'; @@ -40,11 +42,6 @@ import type { import type { TToggleElement } from '@udecode/plate-toggle'; import type { TogglePlugin } from '@udecode/plate-toggle/react'; -import { - type ParagraphPlugin, - useEditorRef, -} from '@udecode/plate-common/react'; - /** Text */ export type EmptyText = { @@ -243,10 +240,6 @@ export interface MyExcalidrawElement export type MyNestableBlock = MyParagraphElement; -export type MyElement = ElementOf; - -export type MyBlock = Exclude; - export type MyRootBlock = | MyBlockquoteElement | MyBulletedListElement @@ -267,10 +260,12 @@ export type MyRootBlock = | MyTodoListElement | MyToggleElement; -/** Editor types */ - export type MyValue = MyRootBlock[]; -export type MyEditor = ReturnType; +// export type MyElement = ElementOf; + +// export type MyBlock = Exclude; + +// export type MyEditor = ReturnType; -export const useMyEditorRef = () => useEditorRef(); +// export const useEditor = () => useEditorRef(); diff --git a/templates/plate-playground-template/src/components/plugins/ai-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/ai-plugins.tsx similarity index 89% rename from templates/plate-playground-template/src/components/plugins/ai-plugins.tsx rename to templates/plate-playground-template/src/components/editor/plugins/ai-plugins.tsx index 111de3061e..34c40291da 100644 --- a/templates/plate-playground-template/src/components/plugins/ai-plugins.tsx +++ b/templates/plate-playground-template/src/components/editor/plugins/ai-plugins.tsx @@ -36,20 +36,20 @@ import { MarkdownPlugin } from '@udecode/plate-markdown'; import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; import Prism from 'prismjs'; -import { AIMenu } from '../plate-ui/ai-menu'; -import { BlockquoteElement } from '../plate-ui/blockquote-element'; -import { CodeBlockElement } from '../plate-ui/code-block-element'; -import { CodeLeaf } from '../plate-ui/code-leaf'; -import { CodeLineElement } from '../plate-ui/code-line-element'; -import { CodeSyntaxLeaf } from '../plate-ui/code-syntax-leaf'; -import { SelectionOverlayPlugin } from '../plate-ui/cursor-overlay'; -import { HeadingElement } from '../plate-ui/heading-element'; -import { HrElement } from '../plate-ui/hr-element'; -import { LinkElement } from '../plate-ui/link-element'; -import { LinkFloatingToolbar } from '../plate-ui/link-floating-toolbar'; -import { ParagraphElement } from '../plate-ui/paragraph-element'; +import { AIMenu } from '@/components/plate-ui/ai-menu'; +import { BlockquoteElement } from '@/components/plate-ui/blockquote-element'; +import { CodeBlockElement } from '@/components/plate-ui/code-block-element'; +import { CodeLeaf } from '@/components/plate-ui/code-leaf'; +import { CodeLineElement } from '@/components/plate-ui/code-line-element'; +import { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf'; +import { SelectionOverlayPlugin } from '@/components/plate-ui/cursor-overlay'; +import { HeadingElement } from '@/components/plate-ui/heading-element'; +import { HrElement } from '@/components/plate-ui/hr-element'; +import { LinkElement } from '@/components/plate-ui/link-element'; +import { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar'; +import { ParagraphElement } from '@/components/plate-ui/paragraph-element'; -export const createAIEditor = () => { +const createAIEditor = () => { const editor = createPlateEditor({ id: 'ai', override: { diff --git a/templates/plate-playground-template/src/lib/plate/autoformat-rules.ts b/templates/plate-playground-template/src/components/editor/plugins/autoformat-plugin.ts similarity index 91% rename from templates/plate-playground-template/src/lib/plate/autoformat-rules.ts rename to templates/plate-playground-template/src/components/editor/plugins/autoformat-plugin.ts index b911110f9c..a6fd5ed8d0 100644 --- a/templates/plate-playground-template/src/lib/plate/autoformat-rules.ts +++ b/templates/plate-playground-template/src/components/editor/plugins/autoformat-plugin.ts @@ -13,6 +13,7 @@ import { autoformatPunctuation, autoformatSmartQuotes, } from '@udecode/plate-autoformat'; +import { AutoformatPlugin } from '@udecode/plate-autoformat/react'; import { BoldPlugin, CodePlugin, @@ -242,7 +243,7 @@ export const autoformatLists: AutoformatRule[] = [ }, { format: (editor) => formatList(editor, NumberedListPlugin.key), - match: ['^\\d+\\.$ ', '^\\d+\\)$ '], + match: [String.raw`^\d+\.$ `, String.raw`^\d+\)$ `], matchByRegex: true, mode: 'block', preFormat, @@ -284,7 +285,7 @@ export const autoformatIndentLists: AutoformatRule[] = [ toggleIndentList(editor, { listStyleType: ListStyleType.Decimal, }), - match: ['^\\d+\\.$ ', '^\\d+\\)$ '], + match: [String.raw`^\d+\.$ `, String.raw`^\d+\)$ `], matchByRegex: true, mode: 'block', type: 'list', @@ -319,14 +320,20 @@ export const autoformatIndentLists: AutoformatRule[] = [ }, ]; -export const autoformatRules: AutoformatRule[] = [ - ...autoformatBlocks, - ...autoformatMarks, - ...autoformatSmartQuotes, - ...autoformatPunctuation, - ...autoformatLegal, - ...autoformatLegalHtml, - ...autoformatArrow, - ...autoformatMath, - ...autoformatIndentLists, -]; +export const autoformatPlugin = AutoformatPlugin.configure({ + options: { + enableUndoOnDelete: true, + rules: [ + ...autoformatBlocks, + ...autoformatMarks, + ...autoformatSmartQuotes, + ...autoformatPunctuation, + ...autoformatLegal, + ...autoformatLegalHtml, + ...autoformatArrow, + ...autoformatMath, + // Use autoformatLists instead if using ListPlugin + ...autoformatIndentLists, + ], + }, +}); diff --git a/apps/www/src/lib/plate/demo/plugins/copilot-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/copilot-plugins.tsx similarity index 77% rename from apps/www/src/lib/plate/demo/plugins/copilot-plugins.tsx rename to templates/plate-playground-template/src/components/editor/plugins/copilot-plugins.tsx index 8aca4748a6..7ea20a55a0 100644 --- a/apps/www/src/lib/plate/demo/plugins/copilot-plugins.tsx +++ b/templates/plate-playground-template/src/components/editor/plugins/copilot-plugins.tsx @@ -1,15 +1,16 @@ +import type { TElement } from '@udecode/plate-common'; + import { faker } from '@faker-js/faker'; import { CopilotPlugin } from '@udecode/plate-ai/react'; -import { type TElement, getAncestorNode } from '@udecode/plate-common'; +import { getAncestorNode } from '@udecode/plate-common'; import { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown'; -import { GhostText } from '@/registry/default/plate-ui/ghost-text'; +import { GhostText } from '@/components/plate-ui/ghost-text'; export const copilotPlugins = [ CopilotPlugin.configure(({ api }) => ({ options: { completeOptions: { - // API to be implemented api: '/api/ai/copilot', body: { system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context. @@ -24,14 +25,9 @@ export const copilotPlugins = [ - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context. - If no context is provided or you can't generate a continuation, return "0" without explanation.`, }, - // Mock the API response. Remove it when you implement the route /api/ai/copilot - fetch: async () => { - const text = await new Promise((resolve) => - setTimeout(() => resolve(faker.lorem.sentence()), 100) - ); - - return new Response(JSON.stringify({ text }), { - headers: { 'Content-Type': 'application/json' }, + onError: () => { + api.copilot.setBlockSuggestion({ + text: stripMarkdown(faker.lorem.sentence()), }); }, onFinish: (_, completion) => { diff --git a/templates/plate-playground-template/src/lib/transforms.ts b/templates/plate-playground-template/src/components/editor/transforms.ts similarity index 98% rename from templates/plate-playground-template/src/lib/transforms.ts rename to templates/plate-playground-template/src/components/editor/transforms.ts index a7b7e04dbf..7e48770362 100644 --- a/templates/plate-playground-template/src/lib/transforms.ts +++ b/templates/plate-playground-template/src/components/editor/transforms.ts @@ -1,4 +1,5 @@ -import type { TElement, TNodeEntry } from '@udecode/plate-common'; +'use client'; + import type { PlateEditor } from '@udecode/plate-common/react'; import { insertCallout } from '@udecode/plate-callout'; @@ -6,6 +7,8 @@ import { CalloutPlugin } from '@udecode/plate-callout/react'; import { insertCodeBlock } from '@udecode/plate-code-block'; import { CodeBlockPlugin } from '@udecode/plate-code-block/react'; import { + type TElement, + type TNodeEntry, getBlockAbove, getBlocks, getNodeEntry, diff --git a/templates/plate-playground-template/src/components/openai/settings-dialog.tsx b/templates/plate-playground-template/src/components/editor/use-chat.tsx similarity index 64% rename from templates/plate-playground-template/src/components/openai/settings-dialog.tsx rename to templates/plate-playground-template/src/components/editor/use-chat.tsx index 414a5ba996..4a51c451bb 100644 --- a/templates/plate-playground-template/src/components/openai/settings-dialog.tsx +++ b/templates/plate-playground-template/src/components/editor/use-chat.tsx @@ -1,10 +1,12 @@ 'use client'; -import { useState } from 'react'; +import { type ReactNode, createContext, useContext, useState } from 'react'; +import { faker } from '@faker-js/faker'; import { cn } from '@udecode/cn'; import { CopilotPlugin } from '@udecode/plate-ai/react'; import { useEditorPlugin } from '@udecode/plate-common/react'; +import { useChat as useBaseChat } from 'ai/react'; import { ArrowUpRight, Check, @@ -39,7 +41,116 @@ import { PopoverTrigger, } from '@/components/plate-ui/popover'; -import { models, useOpenAI } from './openai-context'; +export const useChat = () => { + return useBaseChat({ + id: 'editor', + api: '/api/ai/command', + body: { + apiKey: useOpenAI().apiKey, + model: useOpenAI().model.value, + }, + fetch: async (input, init) => { + try { + return await fetch(input, init); + } catch (error) { + // Mock the API response. Remove it when you implement the route /api/ai + await new Promise((resolve) => setTimeout(resolve, 400)); + + const stream = fakeStreamText(); + + return new Response(stream, { + headers: { + Connection: 'keep-alive', + 'Content-Type': 'text/plain', + }, + }); + } + }, + }); +}; + +// Used for testing. Remove it after implementing useChat api. +const fakeStreamText = ({ + chunkCount = 10, + streamProtocol = 'data', +}: { + chunkCount?: number; + streamProtocol?: 'data' | 'text'; +} = {}) => { + const chunks = Array.from({ length: chunkCount }, () => ({ + delay: faker.number.int({ max: 150, min: 50 }), + texts: faker.lorem.words({ max: 3, min: 1 }) + ' ', + })); + const encoder = new TextEncoder(); + + return new ReadableStream({ + async start(controller) { + for (const chunk of chunks) { + await new Promise((resolve) => setTimeout(resolve, chunk.delay)); + + if (streamProtocol === 'text') { + controller.enqueue(encoder.encode(chunk.texts)); + } else { + controller.enqueue( + encoder.encode(`0:${JSON.stringify(chunk.texts)}\n`) + ); + } + } + + if (streamProtocol === 'data') { + controller.enqueue( + `d:{"finishReason":"stop","usage":{"promptTokens":0,"completionTokens":${chunks.length}}}\n` + ); + } + + controller.close(); + }, + }); +}; + +interface Model { + label: string; + value: string; +} + +interface OpenAIContextType { + apiKey: string; + model: Model; + setApiKey: (key: string) => void; + setModel: (model: Model) => void; +} + +export const models: Model[] = [ + { label: 'gpt-4o-mini', value: 'gpt-4o-mini' }, + { label: 'gpt-4o', value: 'gpt-4o' }, + { label: 'gpt-4-turbo', value: 'gpt-4-turbo' }, + { label: 'gpt-4', value: 'gpt-4' }, + { label: 'gpt-3.5-turbo', value: 'gpt-3.5-turbo' }, + { label: 'gpt-3.5-turbo-instruct', value: 'gpt-3.5-turbo-instruct' }, +]; + +const OpenAIContext = createContext(undefined); + +export function OpenAIProvider({ children }: { children: ReactNode }) { + const [apiKey, setApiKey] = useState(''); + const [model, setModel] = useState(models[0]); + + return ( + + {children} + + ); +} + +export function useOpenAI() { + const context = useContext(OpenAIContext); + + if (context === undefined) { + throw new Error('useOpenAI must be used within an OpenAIProvider'); + } + + return context; +} export function SettingsDialog() { const { apiKey, model, setApiKey, setModel } = useOpenAI(); @@ -141,6 +252,7 @@ export function SettingsDialog() { diff --git a/templates/plate-playground-template/src/components/plate-editor.tsx b/templates/plate-playground-template/src/components/editor/use-create-editor.tsx similarity index 85% rename from templates/plate-playground-template/src/components/plate-editor.tsx rename to templates/plate-playground-template/src/components/editor/use-create-editor.tsx index fc83c92ce5..77f165f35b 100644 --- a/templates/plate-playground-template/src/components/plate-editor.tsx +++ b/templates/plate-playground-template/src/components/editor/use-create-editor.tsx @@ -1,13 +1,8 @@ -'use client'; - -import React, { useRef } from 'react'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; +import React from 'react'; import { withProps } from '@udecode/cn'; import { AIPlugin } from '@udecode/plate-ai/react'; import { AlignPlugin } from '@udecode/plate-alignment/react'; -import { AutoformatPlugin } from '@udecode/plate-autoformat/react'; import { BoldPlugin, CodePlugin, @@ -38,7 +33,6 @@ import { } from '@udecode/plate-common'; import { ParagraphPlugin, - Plate, PlateElement, PlateLeaf, usePlateEditor, @@ -98,30 +92,32 @@ import { TogglePlugin } from '@udecode/plate-toggle/react'; import { TrailingBlockPlugin } from '@udecode/plate-trailing-block'; import Prism from 'prismjs'; +import { aiPlugins } from '@/components/editor/plugins/ai-plugins'; +import { autoformatPlugin } from '@/components/editor/plugins/autoformat-plugin'; +import { copilotPlugins } from '@/components/editor/plugins/copilot-plugins'; +import { AILeaf } from '@/components/plate-ui/ai-leaf'; +import { BlockContextMenu } from '@/components/plate-ui/block-context-menu'; import { BlockquoteElement } from '@/components/plate-ui/blockquote-element'; import { CodeBlockElement } from '@/components/plate-ui/code-block-element'; import { CodeLeaf } from '@/components/plate-ui/code-leaf'; import { CodeLineElement } from '@/components/plate-ui/code-line-element'; import { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf'; +import { ColumnElement } from '@/components/plate-ui/column-element'; +import { ColumnGroupElement } from '@/components/plate-ui/column-group-element'; import { CommentLeaf } from '@/components/plate-ui/comment-leaf'; -import { CommentsPopover } from '@/components/plate-ui/comments-popover'; -import { - CursorOverlay, - DragOverCursorPlugin, -} from '@/components/plate-ui/cursor-overlay'; -import { Editor, EditorContainer } from '@/components/plate-ui/editor'; +import { DragOverCursorPlugin } from '@/components/plate-ui/cursor-overlay'; +import { DateElement } from '@/components/plate-ui/date-element'; import { EmojiInputElement } from '@/components/plate-ui/emoji-input-element'; import { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element'; -import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar'; -import { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons'; -import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar'; -import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons'; import { HeadingElement } from '@/components/plate-ui/heading-element'; import { HighlightLeaf } from '@/components/plate-ui/highlight-leaf'; import { HrElement } from '@/components/plate-ui/hr-element'; import { ImageElement } from '@/components/plate-ui/image-element'; import { ImagePreview } from '@/components/plate-ui/image-preview'; -import { TodoLi, TodoMarker } from '@/components/plate-ui/indent-todo-marker'; +import { + TodoLi, + TodoMarker, +} from '@/components/plate-ui/indent-todo-marker'; import { KbdLeaf } from '@/components/plate-ui/kbd-leaf'; import { LinkElement } from '@/components/plate-ui/link-element'; import { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar'; @@ -131,61 +127,16 @@ import { MentionElement } from '@/components/plate-ui/mention-element'; import { MentionInputElement } from '@/components/plate-ui/mention-input-element'; import { ParagraphElement } from '@/components/plate-ui/paragraph-element'; import { withPlaceholders } from '@/components/plate-ui/placeholder'; +import { SlashInputElement } from '@/components/plate-ui/slash-input-element'; import { TableCellElement, TableCellHeaderElement, } from '@/components/plate-ui/table-cell-element'; import { TableElement } from '@/components/plate-ui/table-element'; import { TableRowElement } from '@/components/plate-ui/table-row-element'; -import { TodoListElement } from '@/components/plate-ui/todo-list-element'; +import { TocElement } from '@/components/plate-ui/toc-element'; +import { ToggleElement } from '@/components/plate-ui/toggle-element'; import { withDraggables } from '@/components/plate-ui/with-draggables'; -import { autoformatRules } from '@/lib/plate/autoformat-rules'; - -import { SettingsDialog } from './openai/settings-dialog'; -import { AILeaf } from './plate-ui/ai-leaf'; -import { BlockContextMenu } from './plate-ui/block-context-menu'; -import { ColumnElement } from './plate-ui/column-element'; -import { ColumnGroupElement } from './plate-ui/column-group-element'; -import { DateElement } from './plate-ui/date-element'; -import { SlashInputElement } from './plate-ui/slash-input-element'; -import { TocElement } from './plate-ui/toc-element'; -import { ToggleElement } from './plate-ui/toggle-element'; -import { aiPlugins } from './plugins/ai-plugins'; -import { copilotPlugins } from './plugins/copilot-plugins'; - -export default function PlateEditor() { - const containerRef = useRef(null); - - const editor = useCreateEditor(); - - return ( - - - - - - - - - - - - - - - - - - - - - - ); -} export const useCreateEditor = () => { return usePlateEditor({ @@ -233,7 +184,6 @@ export const useCreateEditor = () => { [TablePlugin.key]: TableElement, [TableRowPlugin.key]: TableRowElement, [TocPlugin.key]: TocElement, - [TodoListPlugin.key]: TodoListElement, [TogglePlugin.key]: ToggleElement, [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), }) @@ -352,12 +302,7 @@ export const useCreateEditor = () => { }), // Functionality - AutoformatPlugin.configure({ - options: { - enableUndoOnDelete: true, - rules: autoformatRules, - }, - }), + autoformatPlugin, BlockSelectionPlugin.configure({ options: { areaOptions: { diff --git a/templates/plate-playground-template/src/components/openai/openai-context.tsx b/templates/plate-playground-template/src/components/openai/openai-context.tsx deleted file mode 100644 index 7b4a09affa..0000000000 --- a/templates/plate-playground-template/src/components/openai/openai-context.tsx +++ /dev/null @@ -1,45 +0,0 @@ -'use client'; - -import { ReactNode, createContext, useContext, useState } from 'react'; - -interface Model { - label: string; - value: string; -} - -interface OpenAIContextType { - apiKey: string; - model: Model; - setApiKey: (key: string) => void; - setModel: (model: Model) => void; -} - -export const models: Model[] = [ - { label: 'gpt-4o-mini', value: 'gpt-4o-mini' }, - { label: 'gpt-4o', value: 'gpt-4o' }, - { label: 'gpt-4-turbo', value: 'gpt-4-turbo' }, - { label: 'gpt-4', value: 'gpt-4' }, - { label: 'gpt-3.5-turbo', value: 'gpt-3.5-turbo' }, - { label: 'gpt-3.5-turbo-instruct', value: 'gpt-3.5-turbo-instruct' }, -]; - -const OpenAIContext = createContext(undefined); - -export function OpenAIProvider({ children }: { children: ReactNode }) { - const [apiKey, setApiKey] = useState(''); - const [model, setModel] = useState(models[0]); - - return ( - - {children} - - ); -} - -export function useOpenAI() { - const context = useContext(OpenAIContext); - if (context === undefined) { - throw new Error('useOpenAI must be used within an OpenAIProvider'); - } - return context; -} diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx index 37b04f7eee..a34755a07d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx @@ -2,10 +2,12 @@ import React, { memo } from 'react'; -import type { PlateEditor } from '@udecode/plate-common/react'; - import { AIChatPlugin, useLastAssistantMessage } from '@udecode/plate-ai/react'; -import { Plate, useEditorPlugin } from '@udecode/plate-common/react'; +import { + type PlateEditor, + Plate, + useEditorPlugin, +} from '@udecode/plate-common/react'; import { deserializeMd } from '@udecode/plate-markdown'; import { Editor } from './editor'; diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx index 5d69cf08da..1afaa90ccc 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx @@ -2,15 +2,17 @@ import { useEffect, useMemo } from 'react'; -import type { PlateEditor } from '@udecode/plate-common/react'; - import { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react'; import { getAncestorNode, getEndPoint, getNodeString, } from '@udecode/plate-common'; -import { focusEditor, useEditorPlugin } from '@udecode/plate-common/react'; +import { + type PlateEditor, + focusEditor, + useEditorPlugin, +} from '@udecode/plate-common/react'; import { useIsSelecting } from '@udecode/plate-selection/react'; import { Album, diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx index fccaa4cbac..d51aa59d09 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx @@ -1,10 +1,11 @@ -import * as React from 'react'; +'use client'; -import type { TElement, TNodeEntry } from '@udecode/plate-common'; -import type { PlateEditor } from '@udecode/plate-common/react'; +import * as React from 'react'; import { AIChatPlugin, useEditorChat } from '@udecode/plate-ai/react'; import { + type TElement, + type TNodeEntry, getAncestorNode, getBlocks, isElementEmpty, @@ -12,6 +13,7 @@ import { isSelectionAtBlockEnd, } from '@udecode/plate-common'; import { + type PlateEditor, toDOMNode, useEditorPlugin, useHotkeys, @@ -20,11 +22,10 @@ import { BlockSelectionPlugin, useIsSelecting, } from '@udecode/plate-selection/react'; -import { useChat } from 'ai/react'; import { Loader2Icon } from 'lucide-react'; -import { toast } from 'sonner'; -import { useOpenAI } from '../openai/openai-context'; +import { useChat } from '@/components/editor/use-chat'; + import { AIChatEditor } from './ai-chat-editor'; import { AIMenuItems } from './ai-menu-items'; import { Command, CommandList, InputCommand } from './command'; @@ -39,22 +40,7 @@ export function AIMenu() { const aiEditorRef = React.useRef(null); const [value, setValue] = React.useState(''); - const chat = useChat({ - id: 'editor', - api: '/api/ai/command', - body: { - apiKey: useOpenAI().apiKey, - model: useOpenAI().model.value, - }, - onError: (error) => { - if (error.message.includes('API key')) { - toast.error('OpenAI API key required'); - } else { - toast.error('Invalid OpenAI API key'); - } - api.aiChat.hide(); - }, - }); + const chat = useChat(); const { input, isLoading, messages, setInput } = chat; const [anchorElement, setAnchorElement] = React.useState( diff --git a/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx b/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx index 1fef6b3f5e..bc3094b22e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx @@ -1,9 +1,7 @@ 'use client'; -import type { VariantProps } from 'class-variance-authority'; - import { useBlockSelected } from '@udecode/plate-selection/react'; -import { cva } from 'class-variance-authority'; +import { type VariantProps, cva } from 'class-variance-authority'; const blockSelectionVariants = cva( 'pointer-events-none absolute inset-0 z-[1] bg-brand/[.13] transition-opacity', diff --git a/templates/plate-playground-template/src/components/plate-ui/button.tsx b/templates/plate-playground-template/src/components/plate-ui/button.tsx index e92ca630ab..d017db41fe 100644 --- a/templates/plate-playground-template/src/components/plate-ui/button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/button.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; -import type { VariantProps } from 'class-variance-authority'; - import { Slot } from '@radix-ui/react-slot'; import { cn, withRef } from '@udecode/cn'; -import { cva } from 'class-variance-authority'; +import { type VariantProps, cva } from 'class-variance-authority'; export const buttonVariants = cva( 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', diff --git a/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx b/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx index d7567407f3..7ec8055ba4 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx @@ -8,6 +8,7 @@ import { useCodeBlockComboboxState, } from '@udecode/plate-code-block/react'; import { Check, ChevronsUpDown } from 'lucide-react'; + // Prism must be imported before all language files import Prism from 'prismjs'; @@ -30,8 +31,10 @@ import 'prismjs/components/prism-cpp.js'; import 'prismjs/components/prism-csharp.js'; import 'prismjs/components/prism-css.js'; import 'prismjs/components/prism-dart.js'; + // import 'prismjs/components/prism-django.js'; import 'prismjs/components/prism-docker.js'; + // import 'prismjs/components/prism-ejs.js'; import 'prismjs/components/prism-erlang.js'; import 'prismjs/components/prism-git.js'; @@ -52,6 +55,7 @@ import 'prismjs/components/prism-matlab.js'; import 'prismjs/components/prism-mermaid.js'; import 'prismjs/components/prism-objectivec.js'; import 'prismjs/components/prism-perl.js'; + // import 'prismjs/components/prism-php.js'; import 'prismjs/components/prism-powershell.js'; import 'prismjs/components/prism-properties.js'; diff --git a/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx b/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx index 98cef38b3f..901990e681 100644 --- a/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx @@ -5,10 +5,11 @@ import React from 'react'; import { cn, withRef } from '@udecode/cn'; import { EraserIcon } from 'lucide-react'; -import type { TColor } from './color-dropdown-menu-items'; - import { buttonVariants } from './button'; -import { ColorDropdownMenuItems } from './color-dropdown-menu-items'; +import { + type TColor, + ColorDropdownMenuItems, +} from './color-dropdown-menu-items'; import { ColorCustom } from './colors-custom'; import { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu'; diff --git a/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx b/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx index 65ee50f0f3..e5568e72f2 100644 --- a/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx @@ -1,7 +1,6 @@ 'use client'; -import React from 'react'; -import type { ComponentPropsWithoutRef } from 'react'; +import React, { type ComponentPropsWithoutRef } from 'react'; import { cn } from '@udecode/cn'; import { @@ -10,10 +9,11 @@ import { } from '@udecode/plate-font/react'; import { PlusIcon } from 'lucide-react'; -import type { TColor } from './color-dropdown-menu-items'; - import { buttonVariants } from './button'; -import { ColorDropdownMenuItems } from './color-dropdown-menu-items'; +import { + type TColor, + ColorDropdownMenuItems, +} from './color-dropdown-menu-items'; import { ColorInput } from './color-input'; // import { ColorInput } from './color-input'; diff --git a/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx b/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx index dd5d77a098..10d903bd74 100644 --- a/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx @@ -3,7 +3,6 @@ import React from 'react'; import type { TColumnElement } from '@udecode/plate-layout'; -import type { LucideProps } from 'lucide-react'; import { cn, withRef } from '@udecode/cn'; import { useElement, useRemoveNodeButton } from '@udecode/plate-common/react'; @@ -12,7 +11,7 @@ import { useColumnState, useDebouncePopoverOpen, } from '@udecode/plate-layout/react'; -import { Trash2Icon } from 'lucide-react'; +import { type LucideProps, Trash2Icon } from 'lucide-react'; import { useReadOnly } from 'slate-react'; import { Button } from './button'; diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx index f1cf9f5425..0751d01dac 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx @@ -3,14 +3,13 @@ import React from 'react'; import type { TCommentText } from '@udecode/plate-comments'; -import type { PlateLeafProps } from '@udecode/plate-common/react'; import { cn } from '@udecode/cn'; import { useCommentLeaf, useCommentLeafState, } from '@udecode/plate-comments/react'; -import { PlateLeaf } from '@udecode/plate-common/react'; +import { type PlateLeafProps, PlateLeaf } from '@udecode/plate-common/react'; export function CommentLeaf({ className, diff --git a/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx index ed1a4cc136..baf1d1f166 100644 --- a/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx @@ -10,7 +10,36 @@ const ContextMenu = ContextMenuPrimitive.Root; const ContextMenuTrigger = ContextMenuPrimitive.Trigger; -const ContextMenuGroup = ContextMenuPrimitive.Group; +const ContextMenuGroup = React.forwardRef< + HTMLDivElement, + { label?: React.ReactNode } & React.ComponentPropsWithoutRef< + typeof ContextMenuPrimitive.Group + > +>(({ label, ...props }, ref) => { + return ( + <> + + + + {label && {label}} + {props.children} + + + ); +}); const ContextMenuPortal = ContextMenuPrimitive.Portal; @@ -27,7 +56,7 @@ const ContextMenuSubTrigger = React.forwardRef< { const { editor } = useEditorPlugin(BlockSelectionPlugin); const isSelecting = editor.useOptions(BlockSelectionPlugin).isSelecting; diff --git a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx index 94e2e97c4d..8b036063c6 100644 --- a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx @@ -3,18 +3,18 @@ import React from 'react'; import type { TEditor } from '@udecode/plate-common'; -import type { PlateElementProps } from '@udecode/plate-common/react'; -import type { DragItemNode } from '@udecode/plate-dnd'; import type { DropTargetMonitor } from 'react-dnd'; import { cn, withRef } from '@udecode/cn'; import { + type PlateElementProps, MemoizedChildren, useEditorPlugin, useEditorRef, withHOC, } from '@udecode/plate-common/react'; import { + type DragItemNode, DraggableProvider, useDraggable, useDraggableGutter, diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx index 6bfd240b0e..aa2397a5c4 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx @@ -2,9 +2,10 @@ import React from 'react'; -import type { EmojiDropdownMenuOptions } from '@udecode/plate-emoji/react'; - -import { useEmojiDropdownMenuState } from '@udecode/plate-emoji/react'; +import { + type EmojiDropdownMenuOptions, + useEmojiDropdownMenuState, +} from '@udecode/plate-emoji/react'; import { Smile } from 'lucide-react'; import { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons'; diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx index e16b5eddc7..0f13a897c7 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx @@ -2,11 +2,10 @@ import { memo, useCallback } from 'react'; -import type { Emoji, GridRow } from '@udecode/plate-emoji'; import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; import { cn } from '@udecode/cn'; -import { EmojiSettings } from '@udecode/plate-emoji'; +import { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji'; export type EmojiPickerContentProps = Pick< UseEmojiPickerType, diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx index a01128d0ee..189056f70a 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx @@ -1,7 +1,6 @@ 'use client'; -import React from 'react'; -import type { ReactNode } from 'react'; +import React, { type ReactNode } from 'react'; import * as Popover from '@radix-ui/react-popover'; diff --git a/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx b/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx index 5712c8f507..1f6275a0ed 100644 --- a/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx @@ -1,5 +1,4 @@ 'use client'; - import React from 'react'; import { withRef } from '@udecode/cn'; diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx index 3c9e6075c4..467698de88 100644 --- a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import { diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx index 76c83ce326..f2995fc0ca 100644 --- a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import { diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx index 9cb684faa8..ee937d4222 100644 --- a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx @@ -2,8 +2,6 @@ import React from 'react'; -import type { FloatingToolbarState } from '@udecode/plate-floating'; - import { cn, withRef } from '@udecode/cn'; import { useComposedRef, @@ -12,6 +10,7 @@ import { useEventEditorSelectors, } from '@udecode/plate-common/react'; import { + type FloatingToolbarState, flip, offset, useFloatingToolbar, diff --git a/templates/plate-playground-template/src/components/plate-ui/image-preview.tsx b/templates/plate-playground-template/src/components/plate-ui/image-preview.tsx index 9ee41caf3b..c9f3191b02 100644 --- a/templates/plate-playground-template/src/components/plate-ui/image-preview.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/image-preview.tsx @@ -1,3 +1,5 @@ +'use client'; + import { cn, createPrimitiveComponent } from '@udecode/cn'; import { PreviewImage, @@ -7,14 +9,7 @@ import { useScaleInputState, } from '@udecode/plate-media/react'; import { cva } from 'class-variance-authority'; -import { - ArrowLeftIcon, - ArrowRightIcon, - DownloadIcon, - MinusIcon, - PlusIcon, - XIcon, -} from 'lucide-react'; +import { ArrowLeft, ArrowRight, Download, Minus, Plus, X } from 'lucide-react'; const toolButtonVariants = cva('rounded bg-[rgba(0,0,0,0.5)] px-1', { defaultVariants: { @@ -76,7 +71,7 @@ export const ImagePreview = () => { className="absolute bottom-0 left-1/2 z-40 flex w-fit -translate-x-1/2 justify-center gap-4 p-2 text-center text-white" onClick={(e) => e.stopPropagation()} > -
+
{(currentUrlIndex ?? 0) + 1}
@@ -111,7 +106,7 @@ export const ImagePreview = () => { {...zommOutProps} type="button" > - +
{state.isEditingScale ? ( @@ -132,19 +127,19 @@ export const ImagePreview = () => { {...zoomInProps} type="button" > - +
{/* TODO: downLoad the image */}
diff --git a/templates/plate-playground-template/src/components/plate-ui/indent-fire-marker.tsx b/templates/plate-playground-template/src/components/plate-ui/indent-fire-marker.tsx deleted file mode 100644 index 5887dcd5ac..0000000000 --- a/templates/plate-playground-template/src/components/plate-ui/indent-fire-marker.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { PlateRenderElementProps } from '@udecode/plate-common/react'; -import type { TIndentElement } from '@udecode/plate-indent'; - -export const FireMarker = ( - props: Omit -) => { - const { element } = props; - - return ( -
- - {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'} - -
- ); -}; - -export const FireLiComponent = (props: PlateRenderElementProps) => { - const { children } = props; - - return {children}; -}; diff --git a/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx b/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx index b31f06e4bb..601ec14e7d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx @@ -1,6 +1,9 @@ 'use client'; import React, { + type HTMLAttributes, + type ReactNode, + type RefObject, createContext, forwardRef, startTransition, @@ -10,14 +13,11 @@ import React, { useMemo, useState, } from 'react'; -import type { HTMLAttributes, ReactNode, RefObject } from 'react'; -import type { ComboboxItemProps } from '@ariakit/react'; -import type { UseComboboxInputResult } from '@udecode/plate-combobox/react'; -import type { TElement } from '@udecode/plate-common'; import type { PointRef } from 'slate'; import { + type ComboboxItemProps, Combobox, ComboboxGroup, ComboboxGroupLabel, @@ -32,10 +32,12 @@ import { import { cn, withCn } from '@udecode/cn'; import { filterWords } from '@udecode/plate-combobox'; import { + type UseComboboxInputResult, useComboboxInput, useHTMLInputCursorState, } from '@udecode/plate-combobox/react'; import { + type TElement, createPointRef, getPointBefore, insertText, diff --git a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx index 5577a6d1c5..618f4c2201 100644 --- a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx @@ -3,11 +3,11 @@ import React from 'react'; import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; -import type { PlateEditor } from '@udecode/plate-common/react'; import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import { CodeBlockPlugin } from '@udecode/plate-code-block/react'; import { + type PlateEditor, ParagraphPlugin, focusEditor, useEditorRef, @@ -45,7 +45,10 @@ import { TableOfContentsIcon, } from 'lucide-react'; -import { insertBlock, insertInlineElement } from '@/lib/transforms'; +import { + insertBlock, + insertInlineElement, +} from '@/components/editor/transforms'; import { DropdownMenu, diff --git a/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx index 5ce2d79564..807561831e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx @@ -2,13 +2,15 @@ import React from 'react'; -import type { UseVirtualFloatingOptions } from '@udecode/plate-floating'; -import type { LinkFloatingToolbarState } from '@udecode/plate-link/react'; - import { cn } from '@udecode/cn'; import { useFormInputProps } from '@udecode/plate-common/react'; -import { flip, offset } from '@udecode/plate-floating'; import { + type UseVirtualFloatingOptions, + flip, + offset, +} from '@udecode/plate-floating'; +import { + type LinkFloatingToolbarState, FloatingLinkUrlInput, LinkOpenButton, useFloatingLinkEdit, diff --git a/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx b/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx index 3c623e9de8..e8c9c052cf 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx @@ -2,9 +2,10 @@ import React, { useEffect } from 'react'; -import type { WithRequiredKey } from '@udecode/plate-common'; - -import { isSelectionExpanded } from '@udecode/plate-common'; +import { + type WithRequiredKey, + isSelectionExpanded, +} from '@udecode/plate-common'; import { useEditorSelector, useElement, diff --git a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx index a52d4962c8..af5a051daf 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx @@ -2,10 +2,12 @@ import React from 'react'; -import type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; - import { withRef } from '@udecode/cn'; -import { useMediaToolbarButton } from '@udecode/plate-media/react'; +import { + type ImagePlugin, + type MediaEmbedPlugin, + useMediaToolbarButton, +} from '@udecode/plate-media/react'; import { ImageIcon } from 'lucide-react'; import { ToolbarButton } from './toolbar'; diff --git a/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx index 223d13f28d..2407b02e9f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx @@ -1,3 +1,4 @@ +'use client'; import React from 'react'; import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; diff --git a/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx b/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx index 53e4b786d4..e55ccf04e0 100644 --- a/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx @@ -2,11 +2,10 @@ import React from 'react'; -import type { PlaceholderProps } from '@udecode/plate-common/react'; - import { cn } from '@udecode/cn'; +import { ParagraphPlugin } from '@udecode/plate-common/react'; import { - ParagraphPlugin, + type PlaceholderProps, createNodeHOC, createNodesHOC, usePlaceholderState, diff --git a/templates/plate-playground-template/src/components/plate-ui/search-highlight-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/search-highlight-leaf.tsx deleted file mode 100644 index 4057b3552c..0000000000 --- a/templates/plate-playground-template/src/components/plate-ui/search-highlight-leaf.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { withCn } from '@udecode/cn'; -import { PlateLeaf } from '@udecode/plate-common/react'; - -export const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100'); diff --git a/templates/plate-playground-template/src/components/plate-ui/slash-input-element.tsx b/templates/plate-playground-template/src/components/plate-ui/slash-input-element.tsx index f4f3cf4e7c..752461e06d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/slash-input-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/slash-input-element.tsx @@ -31,7 +31,10 @@ import { TableOfContentsIcon, } from 'lucide-react'; -import { insertBlock, insertInlineElement } from '@/lib/transforms'; +import { + insertBlock, + insertInlineElement, +} from '@/components/editor/transforms'; import { InlineCombobox, diff --git a/templates/plate-playground-template/src/components/plate-ui/table-element.tsx b/templates/plate-playground-template/src/components/plate-ui/table-element.tsx index ecbe0d09b4..39b572455c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/table-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/table-element.tsx @@ -4,7 +4,6 @@ import React from 'react'; import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import type { TTableElement } from '@udecode/plate-table'; -import type { LucideProps } from 'lucide-react'; import { PopoverAnchor } from '@radix-ui/react-popover'; import { cn, withRef } from '@udecode/cn'; @@ -25,7 +24,7 @@ import { useTableElementState, useTableMergeState, } from '@udecode/plate-table/react'; -import { Combine, Trash2Icon, Ungroup } from 'lucide-react'; +import { type LucideProps, Combine, Trash2Icon, Ungroup } from 'lucide-react'; import { useReadOnly, useSelected } from 'slate-react'; import { Button } from './button'; diff --git a/templates/plate-playground-template/src/components/plate-ui/toc-element.tsx b/templates/plate-playground-template/src/components/plate-ui/toc-element.tsx index 961886fb57..844b2bed28 100644 --- a/templates/plate-playground-template/src/components/plate-ui/toc-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/toc-element.tsx @@ -1,3 +1,5 @@ +'use client'; + import { cn, withRef } from '@udecode/cn'; import { useTocElement, diff --git a/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx b/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx deleted file mode 100644 index e198f27db0..0000000000 --- a/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; - -import { cn, withRef } from '@udecode/cn'; -import { - useTodoListElement, - useTodoListElementState, -} from '@udecode/plate-list/react'; - -import { Checkbox } from './checkbox'; -import { PlateElement } from './plate-element'; - -export const TodoListElement = withRef( - ({ children, className, ...props }, ref) => { - const { element } = props; - const state = useTodoListElementState({ element }); - const { checkboxProps } = useTodoListElement(state); - - return ( - -
- -
- - {children} - - - ); - } -); diff --git a/templates/plate-playground-template/src/components/plate-ui/toggle-element.tsx b/templates/plate-playground-template/src/components/plate-ui/toggle-element.tsx index e13e7fa0fc..7619893c8e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/toggle-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/toggle-element.tsx @@ -1,3 +1,5 @@ +'use client'; + import { cn, withRef } from '@udecode/cn'; import { useElement } from '@udecode/plate-common/react'; import { diff --git a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx index 1c41c527fe..9720c3624f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx @@ -2,11 +2,9 @@ import * as React from 'react'; -import type { VariantProps } from 'class-variance-authority'; - import * as ToolbarPrimitive from '@radix-ui/react-toolbar'; import { cn, withCn, withRef, withVariants } from '@udecode/cn'; -import { cva } from 'class-variance-authority'; +import { type VariantProps, cva } from 'class-variance-authority'; import { ChevronDown } from 'lucide-react'; import { Separator } from './separator'; diff --git a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx index 85924c8a15..67d0bb7878 100644 --- a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx @@ -29,7 +29,7 @@ import { SquareIcon, } from 'lucide-react'; -import { getBlockType, setBlockType } from '@/lib/transforms'; +import { getBlockType, setBlockType } from '@/components/editor/transforms'; import { DropdownMenu, diff --git a/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx b/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx index 823c9b59b4..e374a36797 100644 --- a/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx @@ -1,14 +1,15 @@ import type { FC } from 'react'; -import type { WithDraggableOptions } from '@udecode/plate-dnd'; - import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import { CodeBlockPlugin } from '@udecode/plate-code-block/react'; import { ParagraphPlugin, createNodesWithHOC, } from '@udecode/plate-common/react'; -import { withDraggable as withDraggablePrimitive } from '@udecode/plate-dnd'; +import { + type WithDraggableOptions, + withDraggable as withDraggablePrimitive, +} from '@udecode/plate-dnd'; import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; import { ColumnPlugin } from '@udecode/plate-layout/react'; @@ -24,9 +25,7 @@ import { import { TablePlugin } from '@udecode/plate-table/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; -import type { DraggableProps } from './draggable'; - -import { Draggable } from './draggable'; +import { type DraggableProps, Draggable } from './draggable'; export const withDraggable = ( Component: FC, diff --git a/templates/plate-playground-template/src/components/site/main-nav.tsx b/templates/plate-playground-template/src/components/site/main-nav.tsx deleted file mode 100644 index 59bba67902..0000000000 --- a/templates/plate-playground-template/src/components/site/main-nav.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; - -import { cn } from '@udecode/cn'; -import Link from 'next/link'; - -import { siteConfig } from '@/config/site'; -import { NavItem } from '@/types/nav'; - -interface MainNavProps { - items?: NavItem[]; -} - -export function MainNav({ items }: MainNavProps) { - return ( -
- - {siteConfig.name} - - {items?.length ? ( - - ) : null} -
- ); -} diff --git a/templates/plate-playground-template/src/components/site/site-header.tsx b/templates/plate-playground-template/src/components/site/site-header.tsx deleted file mode 100644 index c3d4e52587..0000000000 --- a/templates/plate-playground-template/src/components/site/site-header.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { LucideProps } from 'lucide-react'; - -import Link from 'next/link'; - -import { buttonVariants } from '@/components/plate-ui/button'; -import { MainNav } from '@/components/site/main-nav'; -import { ThemeToggle } from '@/components/site/theme-toggle'; -import { siteConfig } from '@/config/site'; - -export function SiteHeader() { - return ( -
-
- -
- -
-
-
- ); -} - -const GithubIcon = (props: LucideProps) => ( - - - -); diff --git a/templates/plate-playground-template/src/components/site/tailwind-indicator.tsx b/templates/plate-playground-template/src/components/site/tailwind-indicator.tsx deleted file mode 100644 index 0e60a7b2ca..0000000000 --- a/templates/plate-playground-template/src/components/site/tailwind-indicator.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export function TailwindIndicator() { - if (process.env.NODE_ENV === 'production') return null; - - return ( -
-
xs
-
sm
-
md
-
lg
-
xl
-
2xl
-
- ); -} diff --git a/templates/plate-playground-template/src/components/site/theme-provider.tsx b/templates/plate-playground-template/src/components/site/theme-provider.tsx deleted file mode 100644 index 6e9122e5a6..0000000000 --- a/templates/plate-playground-template/src/components/site/theme-provider.tsx +++ /dev/null @@ -1,10 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import { ThemeProvider as NextThemesProvider } from 'next-themes'; -import { ThemeProviderProps } from 'next-themes/dist/types'; - -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { - return {children}; -} diff --git a/templates/plate-playground-template/src/components/site/theme-toggle.tsx b/templates/plate-playground-template/src/components/site/theme-toggle.tsx deleted file mode 100644 index fc12b0308a..0000000000 --- a/templates/plate-playground-template/src/components/site/theme-toggle.tsx +++ /dev/null @@ -1,24 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import { MoonIcon, SunIcon } from 'lucide-react'; -import { useTheme } from 'next-themes'; - -import { Button } from '@/components/plate-ui/button'; - -export function ThemeToggle() { - const { setTheme, theme } = useTheme(); - - return ( - - ); -} diff --git a/templates/plate-playground-template/src/components/tabbable-element.tsx b/templates/plate-playground-template/src/components/tabbable-element.tsx deleted file mode 100644 index f81d8c859d..0000000000 --- a/templates/plate-playground-template/src/components/tabbable-element.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { CSSProperties } from 'react'; - -import { PlateElementProps } from '@udecode/plate-common/react'; -import { useFocused, useSelected } from 'slate-react'; - -const boxStyle: CSSProperties = { - marginBottom: '8px', - padding: '8px', -}; - -const unselectedBoxStyle: CSSProperties = { - ...boxStyle, - border: '1px solid #ccc', -}; - -const selectedBoxStyle: CSSProperties = { - ...boxStyle, - border: '2px solid blue', -}; - -export function TabbableElement({ attributes, children }: PlateElementProps) { - const selected = useSelected(); - const focused = useFocused(); - - return ( - // Need contentEditable=false or Firefox has issues with certain input types. -
-
-

This is a void element.

- {' '} - -
- {children} -
- ); -} diff --git a/templates/plate-playground-template/src/config/site.ts b/templates/plate-playground-template/src/config/site.ts deleted file mode 100644 index 833ac028bd..0000000000 --- a/templates/plate-playground-template/src/config/site.ts +++ /dev/null @@ -1,18 +0,0 @@ -export type SiteConfig = typeof siteConfig; - -export const siteConfig = { - description: - 'Rich-text editor components built with Radix UI and Tailwind CSS.', - links: { - docs: 'https://platejs.org', - github: 'https://github.com/udecode/plate', - twitter: 'https://twitter.com/zbeyens', - }, - mainNav: [ - { - href: '/', - title: 'Home', - }, - ], - name: 'Next.js', -}; diff --git a/templates/plate-playground-template/src/lib/fonts.ts b/templates/plate-playground-template/src/lib/fonts.ts deleted file mode 100644 index 285edae10b..0000000000 --- a/templates/plate-playground-template/src/lib/fonts.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - JetBrains_Mono as FontMono, - Inter as FontSans, -} from 'next/font/google'; - -export const fontSans = FontSans({ - subsets: ['latin'], - variable: '--font-sans', -}); - -export const fontMono = FontMono({ - subsets: ['latin'], - variable: '--font-mono', -}); diff --git a/templates/plate-playground-template/src/lib/plate/mentionables.ts b/templates/plate-playground-template/src/lib/plate/mentionables.ts deleted file mode 100644 index 709dca4e23..0000000000 --- a/templates/plate-playground-template/src/lib/plate/mentionables.ts +++ /dev/null @@ -1,83 +0,0 @@ -import type { TMentionItemBase } from '@udecode/plate-mention'; - -export interface MyMentionItem extends TMentionItemBase { - key: string; -} - -export const MENTIONABLES: MyMentionItem[] = [ - { key: '0', text: 'Aayla Secura' }, - { key: '1', text: 'Adi Gallia' }, - { - key: '2', - text: 'Admiral Dodd Rancit', - }, - { - key: '3', - text: 'Admiral Firmus Piett', - }, - { - key: '4', - text: 'Admiral Gial Ackbar', - }, - { key: '5', text: 'Admiral Ozzel' }, - { key: '6', text: 'Admiral Raddus' }, - { - key: '7', - text: 'Admiral Terrinald Screed', - }, - { key: '8', text: 'Admiral Trench' }, - { - key: '9', - text: 'Admiral U.O. Statura', - }, - { key: '10', text: 'Agen Kolar' }, - { key: '11', text: 'Agent Kallus' }, - { - key: '12', - text: 'Aiolin and Morit Astarte', - }, - { key: '13', text: 'Aks Moe' }, - { key: '14', text: 'Almec' }, - { key: '15', text: 'Alton Kastle' }, - { key: '16', text: 'Amee' }, - { key: '17', text: 'AP-5' }, - { key: '18', text: 'Armitage Hux' }, - { key: '19', text: 'Artoo' }, - { key: '20', text: 'Arvel Crynyd' }, - { key: '21', text: 'Asajj Ventress' }, - { key: '22', text: 'Aurra Sing' }, - { key: '23', text: 'AZI-3' }, - { key: '24', text: 'Bala-Tik' }, - { key: '25', text: 'Barada' }, - { key: '26', text: 'Bargwill Tomder' }, - { key: '27', text: 'Baron Papanoida' }, - { key: '28', text: 'Barriss Offee' }, - { key: '29', text: 'Baze Malbus' }, - { key: '30', text: 'Bazine Netal' }, - { key: '31', text: 'BB-8' }, - { key: '32', text: 'BB-9E' }, - { key: '33', text: 'Ben Quadinaros' }, - { key: '34', text: 'Berch Teller' }, - { key: '35', text: 'Beru Lars' }, - { key: '36', text: 'Bib Fortuna' }, - { - key: '37', - text: 'Biggs Darklighter', - }, - { key: '38', text: 'Black Krrsantan' }, - { key: '39', text: 'Bo-Katan Kryze' }, - { key: '40', text: 'Boba Fett' }, - { key: '41', text: 'Bobbajo' }, - { key: '42', text: 'Bodhi Rook' }, - { key: '43', text: 'Borvo the Hutt' }, - { key: '44', text: 'Boss Nass' }, - { key: '45', text: 'Bossk' }, - { - key: '46', - text: 'Breha Antilles-Organa', - }, - { key: '47', text: 'Bren Derlin' }, - { key: '48', text: 'Brendol Hux' }, - { key: '49', text: 'BT-1' }, - { key: '50', text: 'C-3PO' }, -]; diff --git a/templates/plate-playground-template/src/lib/utils.ts b/templates/plate-playground-template/src/lib/utils.ts new file mode 100644 index 0000000000..bd0c391ddd --- /dev/null +++ b/templates/plate-playground-template/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/templates/plate-playground-template/src/styles/globals.css b/templates/plate-playground-template/src/styles/globals.css deleted file mode 100644 index f5babae090..0000000000 --- a/templates/plate-playground-template/src/styles/globals.css +++ /dev/null @@ -1,65 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 72.22% 50.59%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 5% 64.9%; - --radius: 0.5rem; - - --brand: 217.2 91.2% 59.8%; - --highlight: 47.9 95.8% 53.1%; - } - - .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; - --border: 240 3.7% 25%; - --input: 240 3.7% 25%; - --ring: 240 3.7% 25%; - - --brand: 213.3 93.9% 67.8%; - --highlight: 48 96% 53%; - } -} - -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} diff --git a/templates/plate-playground-template/src/types/nav.ts b/templates/plate-playground-template/src/types/nav.ts deleted file mode 100644 index c022b8285f..0000000000 --- a/templates/plate-playground-template/src/types/nav.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface NavItem { - title: string; - disabled?: boolean; - external?: boolean; - href?: string; -} diff --git a/templates/plate-playground-template/tailwind.config.js b/templates/plate-playground-template/tailwind.config.js deleted file mode 100644 index cd60c24747..0000000000 --- a/templates/plate-playground-template/tailwind.config.js +++ /dev/null @@ -1,86 +0,0 @@ -const { fontFamily } = require('tailwindcss/defaultTheme'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - darkMode: ['class'], - content: ['src/**/*.{ts,tsx}'], - theme: { - container: { - center: 'true', - padding: '2rem', - screens: { - '2xl': '1400px', - }, - }, - extend: { - colors: { - border: 'hsl(var(--border))', - brand: { - DEFAULT: 'hsl(var(--brand))', - foreground: 'hsl(var(--brand-foreground))', - }, - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - highlight: { - DEFAULT: 'hsl(var(--highlight))', - foreground: 'hsl(var(--highlight-foreground))', - }, - }, - borderRadius: { - xl: '`calc(var(--radius) + 4px)`', - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)', - }, - fontFamily: { - sans: ['var(--font-sans)', ...fontFamily.sans], - heading: ['var(--font-heading)', ...fontFamily.sans], - }, - keyframes: { - 'accordion-down': { - from: { height: '0' }, - to: { height: 'var(--radix-accordion-content-height)' }, - }, - 'accordion-up': { - from: { height: 'var(--radix-accordion-content-height)' }, - to: { height: '0' }, - }, - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - }, - }, - }, - plugins: [require('tailwindcss-animate')], -}; diff --git a/templates/plate-playground-template/tailwind.config.ts b/templates/plate-playground-template/tailwind.config.ts new file mode 100644 index 0000000000..52703aa24e --- /dev/null +++ b/templates/plate-playground-template/tailwind.config.ts @@ -0,0 +1,71 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + darkMode: ["class"], + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + }, + brand: { + DEFAULT: 'hsl(var(--brand))', + foreground: 'hsl(var(--brand-foreground))' + }, + highlight: { + DEFAULT: 'hsl(var(--highlight))', + foreground: 'hsl(var(--highlight-foreground))' + } + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + } + } + }, + plugins: [require("tailwindcss-animate")], +}; +export default config; diff --git a/templates/plate-template/.editorconfig b/templates/plate-template/.editorconfig deleted file mode 100644 index ae10a5cce3..0000000000 --- a/templates/plate-template/.editorconfig +++ /dev/null @@ -1,10 +0,0 @@ -# editorconfig.org -root = true - -[*] -charset = utf-8 -end_of_line = lf -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/templates/plate-template/README.md b/templates/plate-template/README.md index ce01a085f0..fd6a8ac386 100644 --- a/templates/plate-template/README.md +++ b/templates/plate-template/README.md @@ -1,21 +1,47 @@ # Playground Template -A minimal template for building rich-text editors with [Plate](https://platejs.org/) and Next.js 14. +A minimal template for building rich-text editors with [Plate](https://platejs.org/) and Next.js 15. -## Usage +## Features + +- Next.js 15 App Directory +- [Plate](https://platejs.org/) editor +- [shadcn/ui](https://ui.shadcn.com/) + +## Installation + +Choose one of these methods: + +### 1. Using CLI (Recommended) + +```bash +npx shadcx@latest init -u https://platejs.org/r +``` + +```bash +npx shadcx@latest add editor-basic -r plate +``` + +### 2. Using Template + +[Use this template](https://github.com/plate-editor/plate-template/generate), then install dependencies: ```bash pnpm install +``` + +## Development + +```bash pnpm dev ``` -## Features +Visit http://localhost:3000/editor to see the editor in action. -- Next.js 14 App Directory -- [Plate](https://platejs.org/) Editor -- [shadcn/ui](https://ui.shadcn.com/) -- Radix UI Primitives -- Tailwind CSS -- Icons from [Lucide](https://lucide.dev) -- Dark mode with `next-themes` -- Tailwind CSS class sorting, merging and linting. +## Upgrade + +Using the CLI, you can upgrade to `editor-ai` by running: + +```bash +npx shadcx@latest add editor-ai -r plate -o +``` diff --git a/templates/plate-template/components.json b/templates/plate-template/components.json index a2b96e9c44..64c647d655 100644 --- a/templates/plate-template/components.json +++ b/templates/plate-template/components.json @@ -1,21 +1,28 @@ { "$schema": "https://ui.shadcn.com/schema.json", - "style": "default", + "aliases": { + "components": "@/components", + "hooks": "@/hooks", + "lib": "@/lib", + "ui": "@/components/ui", + "utils": "@/lib/utils" + }, + "registries": { + "plate": { + "aliases": { + "ui": "@/components/plate-ui" + }, + "url": "https://platejs.org/r" + } + }, "rsc": true, - "tsx": true, + "style": "default", "tailwind": { - "config": "tailwind.config.js", - "css": "src/styles/globals.css", "baseColor": "slate", + "config": "tailwind.config.ts", + "css": "src/app/globals.css", "cssVariables": true, "prefix": "" }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils", - "ui": "@/components/plate-ui", - "lib": "@/lib", - "hooks": "@/hooks" - }, - "url": "https://platejs.org/r" -} \ No newline at end of file + "tsx": true +} diff --git a/templates/plate-template/next.config.mjs b/templates/plate-template/next.config.mjs index 4678774e6d..a2abd446f6 100644 --- a/templates/plate-template/next.config.mjs +++ b/templates/plate-template/next.config.mjs @@ -1,4 +1,14 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + async redirects() { + return [ + { + source: '/', + destination: '/editor', + permanent: true, + }, + ]; + }, +}; export default nextConfig; diff --git a/templates/plate-template/package.json b/templates/plate-template/package.json index b2b83a0ee7..99fd17dbeb 100644 --- a/templates/plate-template/package.json +++ b/templates/plate-template/package.json @@ -1,38 +1,32 @@ { "name": "plate-template", - "version": "0.0.1", + "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev --turbo", "build": "next build", - "start": "next start", + "dev": "next dev --turbo", "lint": "next lint", "lint:fix": "next lint --fix", "preview": "next build && next start", + "start": "next start", "sync": "tsx --tsconfig ./scripts/tsconfig.scripts.json scripts/sync.mts", "typecheck": "tsc --noEmit" }, "dependencies": { - "@radix-ui/react-slot": "^1.1.0", - "@radix-ui/react-tooltip": "^1.1.3", "@udecode/cn": "^39.0.0", - "@udecode/plate-common": "^39.2.21", "@udecode/plate-basic-elements": "^39.0.0", "@udecode/plate-basic-marks": "^39.0.0", + "@udecode/plate-common": "^39.2.21", "class-variance-authority": "0.7.0", "clsx": "^2.1.1", - "eslint-plugin-prettier": "^5.2.1", "lucide-react": "0.454.0", "next": "^15.0.2", - "next-themes": "^0.3.0", "react": "^18.3.1", - "react-dnd": "^16.0.1", - "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.3.1", - "slate": "0.110.2", - "slate-history": "0.110.3", - "slate-hyperscript": "0.100.0", - "slate-react": "0.110.3", + "slate": "^0.110.2", + "slate-history": "^0.110.3", + "slate-hyperscript": "^0.100.0", + "slate-react": "^0.111.0", "tailwind-merge": "2.5.4", "tailwindcss-animate": "1.0.7" }, @@ -45,8 +39,8 @@ "encoding": "^0.1.13", "eslint": "^8.56.0", "eslint-config-next": "15.0.2", - "eslint-plugin-perfectionist": "3.9.1", "eslint-config-prettier": "^9.1.0", + "eslint-plugin-perfectionist": "3.9.1", "eslint-plugin-react": "^7.37.2", "eslint-plugin-tailwindcss": "^3.17.5", "eslint-plugin-unused-imports": "^4.1.3", diff --git a/templates/plate-template/pnpm-lock.yaml b/templates/plate-template/pnpm-lock.yaml index 8bcd179751..3a1583822a 100644 --- a/templates/plate-template/pnpm-lock.yaml +++ b/templates/plate-template/pnpm-lock.yaml @@ -8,66 +8,48 @@ importers: .: dependencies: - '@radix-ui/react-slot': - specifier: ^1.1.0 - version: 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-tooltip': - specifier: ^1.1.3 - version: 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/cn': specifier: ^39.0.0 version: 39.0.0(@types/react@18.3.12)(class-variance-authority@0.7.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4) '@udecode/plate-basic-elements': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-basic-marks': specifier: ^39.0.0 - version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/plate-common': specifier: ^39.2.21 - version: 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + version: 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) class-variance-authority: specifier: 0.7.0 version: 0.7.0 clsx: specifier: ^2.1.1 version: 2.1.1 - eslint-plugin-prettier: - specifier: ^5.2.1 - version: 5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3) lucide-react: specifier: 0.454.0 version: 0.454.0(react@18.3.1) next: specifier: ^15.0.2 version: 15.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next-themes: - specifier: ^0.3.0 - version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 - react-dnd: - specifier: ^16.0.1 - version: 16.0.1(@types/node@22.8.6)(@types/react@18.3.12)(react@18.3.1) - react-dnd-html5-backend: - specifier: ^16.0.1 - version: 16.0.1 react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) slate: - specifier: 0.110.2 + specifier: ^0.110.2 version: 0.110.2 slate-history: - specifier: 0.110.3 + specifier: ^0.110.3 version: 0.110.3(slate@0.110.2) slate-hyperscript: - specifier: 0.100.0 + specifier: ^0.100.0 version: 0.100.0(slate@0.110.2) slate-react: - specifier: 0.110.3 - version: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + specifier: ^0.111.0 + version: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) tailwind-merge: specifier: 2.5.4 version: 2.5.4 @@ -139,10 +121,6 @@ packages: resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} - '@babel/runtime@7.25.6': - resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==} - engines: {node: '>=6.9.0'} - '@emnapi/runtime@1.3.1': resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==} @@ -318,21 +296,6 @@ packages: resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - '@floating-ui/core@1.6.8': - resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} - - '@floating-ui/dom@1.6.11': - resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==} - - '@floating-ui/react-dom@2.1.2': - resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - - '@floating-ui/utils@0.2.8': - resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} - '@humanwhocodes/config-array@0.13.0': resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==} engines: {node: '>=10.10.0'} @@ -554,22 +517,6 @@ packages: resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} - '@radix-ui/primitive@1.1.0': - resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==} - - '@radix-ui/react-arrow@1.1.0': - resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-compose-refs@1.1.0': resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} peerDependencies: @@ -579,98 +526,6 @@ packages: '@types/react': optional: true - '@radix-ui/react-context@1.1.0': - resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-context@1.1.1': - resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-dismissable-layer@1.1.1': - resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/react-id@1.1.0': - resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-popper@1.2.0': - resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/react-portal@1.1.2': - resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/react-presence@1.1.1': - resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/react-primitive@2.0.0': - resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-slot@1.1.0': resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} peerDependencies: @@ -680,98 +535,6 @@ packages: '@types/react': optional: true - '@radix-ui/react-tooltip@1.1.3': - resolution: {integrity: sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/react-use-callback-ref@1.1.0': - resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-use-controllable-state@1.1.0': - resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-use-escape-keydown@1.1.0': - resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-use-layout-effect@1.1.0': - resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-use-rect@1.1.0': - resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-use-size@1.1.0': - resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-visually-hidden@1.1.0': - resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/rect@1.1.0': - resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==} - - '@react-dnd/asap@5.0.2': - resolution: {integrity: sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==} - - '@react-dnd/invariant@4.0.2': - resolution: {integrity: sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==} - - '@react-dnd/shallowequal@4.0.2': - resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==} - '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} @@ -1129,9 +892,6 @@ packages: caniuse-lite@1.0.30001660: resolution: {integrity: sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==} - caniuse-lite@1.0.30001676: - resolution: {integrity: sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==} - chalk@4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} @@ -1263,9 +1023,6 @@ packages: dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} - dnd-core@16.0.1: - resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==} - doctrine@2.1.0: resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==} engines: {node: '>=0.10.0'} @@ -1424,20 +1181,6 @@ packages: vue-eslint-parser: optional: true - eslint-plugin-prettier@5.2.1: - resolution: {integrity: sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==} - engines: {node: ^14.18.0 || >=16.0.0} - peerDependencies: - '@types/eslint': '>=8.0.0' - eslint: '>=8.0.0' - eslint-config-prettier: '*' - prettier: '>=3.0.0' - peerDependenciesMeta: - '@types/eslint': - optional: true - eslint-config-prettier: - optional: true - eslint-plugin-react-hooks@5.0.0: resolution: {integrity: sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==} engines: {node: '>=10'} @@ -1501,9 +1244,6 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} - fast-diff@1.3.0: - resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} - fast-glob@3.3.1: resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} @@ -1649,9 +1389,6 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} - hoist-non-react-statics@3.3.2: - resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} - iconv-lite@0.6.3: resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} engines: {node: '>=0.10.0'} @@ -1968,12 +1705,6 @@ packages: natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} - next-themes@0.3.0: - resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==} - peerDependencies: - react: ^16.8 || ^17 || ^18 - react-dom: ^16.8 || ^17 || ^18 - next@15.0.2: resolution: {integrity: sha512-rxIWHcAu4gGSDmwsELXacqAPUk+j8dV/A9cDF5fsiCMpkBDYkO2AEaL1dfD+nNmDiU6QMCFN8Q30VEKapT9UHQ==} engines: {node: '>=18.18.0'} @@ -2161,10 +1892,6 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} - prettier-linter-helpers@1.0.0: - resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==} - engines: {node: '>=6.0.0'} - prettier-plugin-packagejson@2.5.3: resolution: {integrity: sha512-ATMEEXr+ywls1kgrZEWl4SBPEm0uDdyDAjyNzUC0/Z8WZTD3RqbJcQDR+Dau+wYkW9KHK6zqQIsFyfn+9aduWg==} peerDependencies: @@ -2191,24 +1918,6 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} - react-dnd-html5-backend@16.0.1: - resolution: {integrity: sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==} - - react-dnd@16.0.1: - resolution: {integrity: sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==} - peerDependencies: - '@types/hoist-non-react-statics': '>= 3.3.1' - '@types/node': '>= 12' - '@types/react': '>= 16' - react: '>= 16.14' - peerDependenciesMeta: - '@types/hoist-non-react-statics': - optional: true - '@types/node': - optional: true - '@types/react': - optional: true - react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -2241,16 +1950,10 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} - redux@4.2.1: - resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} - reflect.getprototypeof@1.0.6: resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==} engines: {node: '>= 0.4'} - regenerator-runtime@0.14.1: - resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} - regexp.prototype.flags@1.5.3: resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==} engines: {node: '>= 0.4'} @@ -2343,6 +2046,11 @@ packages: resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==} engines: {node: '>=12'} + slate-dom@0.111.0: + resolution: {integrity: sha512-VjeBh2xIRvP6ToEhrO1TPahc5fPezxbeSUhsRTppBPtHfidEdyp/MTI9TjUrZnlznJiVZ7QKrORXilFq8hsbtQ==} + peerDependencies: + slate: '>=0.99.0' + slate-history@0.110.3: resolution: {integrity: sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==} peerDependencies: @@ -2353,12 +2061,13 @@ packages: peerDependencies: slate: '>=0.65.3' - slate-react@0.110.3: - resolution: {integrity: sha512-AS8PPjwmsFS3Lq0MOEegLVlFoxhyos68G6zz2nW4sh3WeTXV7pX0exnwtY1a/docn+J3LGQO11aZXTenPXA/kg==} + slate-react@0.111.0: + resolution: {integrity: sha512-DiiVSYn+dilx0j40FjaaHiG2KbaX4lZfTdEnYvUJMnpc+d9evcuO2nV6KCDQOtS6xr4w0sBzQMxrpGlA5alKww==} peerDependencies: react: '>=18.2.0' react-dom: '>=18.2.0' slate: '>=0.99.0' + slate-dom: '>=0.110.2' slate@0.110.2: resolution: {integrity: sha512-4xGULnyMCiEQ0Ml7JAC1A6HVE6MNpPJU7Eq4cXh1LxlrR0dFXC3XC+rNfQtUJ7chHoPkws57x7DDiWiZAt+PBA==} @@ -2450,10 +2159,6 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - synckit@0.9.1: - resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==} - engines: {node: ^14.18.0 || >=16.0.0} - synckit@0.9.2: resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -2507,9 +2212,6 @@ packages: tsconfig-paths@3.15.0: resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==} - tslib@2.7.0: - resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==} - tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -2656,10 +2358,6 @@ snapshots: '@alloc/quick-lru@5.2.0': {} - '@babel/runtime@7.25.6': - dependencies: - regenerator-runtime: 0.14.1 - '@emnapi/runtime@1.3.1': dependencies: tslib: 2.8.1 @@ -2767,23 +2465,6 @@ snapshots: '@eslint/js@8.57.1': {} - '@floating-ui/core@1.6.8': - dependencies: - '@floating-ui/utils': 0.2.8 - - '@floating-ui/dom@1.6.11': - dependencies: - '@floating-ui/core': 1.6.8 - '@floating-ui/utils': 0.2.8 - - '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@floating-ui/dom': 1.6.11 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - - '@floating-ui/utils@0.2.8': {} - '@humanwhocodes/config-array@0.13.0': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -2948,102 +2629,12 @@ snapshots: '@pkgr/core@0.1.1': {} - '@radix-ui/primitive@1.1.0': {} - - '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.12)(react@18.3.1)': dependencies: react: 18.3.1 optionalDependencies: '@types/react': 18.3.12 - '@radix-ui/react-context@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-context@1.1.1(@types/react@18.3.12)(react@18.3.1)': - dependencies: - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-dismissable-layer@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/primitive': 1.1.0 - '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - - '@radix-ui/react-id@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-popper@1.2.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-arrow': 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-context': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/rect': 1.1.0 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - - '@radix-ui/react-portal@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - - '@radix-ui/react-presence@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - - '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/react-slot': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - '@radix-ui/react-slot@1.1.0(@types/react@18.3.12)(react@18.3.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1) @@ -3051,83 +2642,6 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 - '@radix-ui/react-tooltip@1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/primitive': 1.1.0 - '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-id': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-slot': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@18.3.1) - '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - - '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@radix-ui/rect': 1.1.0 - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-use-size@1.1.0(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.12 - '@types/react-dom': 18.3.1 - - '@radix-ui/rect@1.1.0': {} - - '@react-dnd/asap@5.0.2': {} - - '@react-dnd/invariant@4.0.2': {} - - '@react-dnd/shallowequal@4.0.2': {} - '@rtsao/scc@1.1.0': {} '@rushstack/eslint-patch@1.10.4': {} @@ -3246,57 +2760,57 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@udecode/plate-basic-elements@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-basic-elements@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-block-quote': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-code-block': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-heading': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-block-quote': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-code-block': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-heading': 39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-basic-marks@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-basic-marks@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-block-quote@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-block-quote@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-code-block@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-code-block@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-core': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-utils': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-core': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-utils': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/react-hotkeys': 37.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) - '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/slate-utils': 39.2.20(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) '@udecode/utils': 37.0.0 react: 18.3.1 @@ -3304,19 +2818,19 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - '@types/react' - immer - react-native - scheduler - '@udecode/plate-core@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-core@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: '@udecode/react-hotkeys': 37.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) - '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/slate-utils': 39.2.20(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) '@udecode/utils': 37.0.0 clsx: 2.1.1 @@ -3332,7 +2846,7 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) use-deep-compare: 1.3.0(react@18.3.1) zustand: 4.5.5(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1) zustand-x: 3.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(zustand@4.5.5(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1)) @@ -3342,22 +2856,22 @@ snapshots: - react-native - scheduler - '@udecode/plate-heading@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-heading@39.0.0(@udecode/plate-common@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-common': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) - '@udecode/plate-utils@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/plate-utils@39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: - '@udecode/plate-core': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/plate-core': 39.2.21(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.110.3(slate@0.110.2))(slate-hyperscript@0.100.0(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) - '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2) + '@udecode/slate-react': 39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2) '@udecode/slate-utils': 39.2.20(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) '@udecode/utils': 37.0.0 clsx: 2.1.1 @@ -3367,7 +2881,7 @@ snapshots: slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) slate-hyperscript: 0.100.0(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - '@types/react' - immer @@ -3389,7 +2903,7 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@udecode/slate-react@39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2))(slate@0.110.2)': + '@udecode/slate-react@39.2.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.110.3(slate@0.110.2))(slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2))(slate@0.110.2)': dependencies: '@udecode/react-utils': 39.0.0(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@udecode/slate': 39.2.1(slate-history@0.110.3(slate@0.110.2))(slate@0.110.2) @@ -3398,7 +2912,7 @@ snapshots: react-dom: 18.3.1(react@18.3.1) slate: 0.110.2 slate-history: 0.110.3(slate@0.110.2) - slate-react: 0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2) + slate-react: 0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2) transitivePeerDependencies: - '@types/react' @@ -3584,8 +3098,6 @@ snapshots: caniuse-lite@1.0.30001660: {} - caniuse-lite@1.0.30001676: {} - chalk@4.1.2: dependencies: ansi-styles: 4.3.0 @@ -3708,12 +3220,6 @@ snapshots: dlv@1.1.3: {} - dnd-core@16.0.1: - dependencies: - '@react-dnd/asap': 5.0.2 - '@react-dnd/invariant': 4.0.2 - redux: 4.2.1 - doctrine@2.1.0: dependencies: esutils: 2.0.3 @@ -3983,15 +3489,6 @@ snapshots: - supports-color - typescript - eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3): - dependencies: - eslint: 8.57.1 - prettier: 3.3.3 - prettier-linter-helpers: 1.0.0 - synckit: 0.9.1 - optionalDependencies: - eslint-config-prettier: 9.1.0(eslint@8.57.1) - eslint-plugin-react-hooks@5.0.0(eslint@8.57.1): dependencies: eslint: 8.57.1 @@ -4100,8 +3597,6 @@ snapshots: fast-deep-equal@3.1.3: {} - fast-diff@1.3.0: {} - fast-glob@3.3.1: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -4267,10 +3762,6 @@ snapshots: dependencies: function-bind: 1.1.2 - hoist-non-react-statics@3.3.2: - dependencies: - react-is: 16.13.1 - iconv-lite@0.6.3: dependencies: safer-buffer: 2.1.2 @@ -4544,18 +4035,13 @@ snapshots: natural-compare@1.4.0: {} - next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - next@15.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@next/env': 15.0.2 '@swc/counter': 0.1.3 '@swc/helpers': 0.5.13 busboy: 1.6.0 - caniuse-lite: 1.0.30001676 + caniuse-lite: 1.0.30001660 postcss: 8.4.31 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -4721,10 +4207,6 @@ snapshots: prelude-ls@1.2.1: {} - prettier-linter-helpers@1.0.0: - dependencies: - fast-diff: 1.3.0 - prettier-plugin-packagejson@2.5.3(prettier@3.3.3): dependencies: sort-package-json: 2.10.1 @@ -4746,22 +4228,6 @@ snapshots: queue-microtask@1.2.3: {} - react-dnd-html5-backend@16.0.1: - dependencies: - dnd-core: 16.0.1 - - react-dnd@16.0.1(@types/node@22.8.6)(@types/react@18.3.12)(react@18.3.1): - dependencies: - '@react-dnd/invariant': 4.0.2 - '@react-dnd/shallowequal': 4.0.2 - dnd-core: 16.0.1 - fast-deep-equal: 3.1.3 - hoist-non-react-statics: 3.3.2 - react: 18.3.1 - optionalDependencies: - '@types/node': 22.8.6 - '@types/react': 18.3.12 - react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -4791,10 +4257,6 @@ snapshots: dependencies: picomatch: 2.3.1 - redux@4.2.1: - dependencies: - '@babel/runtime': 7.25.6 - reflect.getprototypeof@1.0.6: dependencies: call-bind: 1.0.7 @@ -4805,8 +4267,6 @@ snapshots: globalthis: 1.0.4 which-builtin-type: 1.1.4 - regenerator-runtime@0.14.1: {} - regexp.prototype.flags@1.5.3: dependencies: call-bind: 1.0.7 @@ -4932,6 +4392,17 @@ snapshots: slash@4.0.0: {} + slate-dom@0.111.0(slate@0.110.2): + dependencies: + '@juggle/resize-observer': 3.4.0 + direction: 1.0.4 + is-hotkey: 0.2.0 + is-plain-object: 5.0.0 + lodash: 4.17.21 + scroll-into-view-if-needed: 3.1.0 + slate: 0.110.2 + tiny-invariant: 1.3.1 + slate-history@0.110.3(slate@0.110.2): dependencies: is-plain-object: 5.0.0 @@ -4942,7 +4413,7 @@ snapshots: is-plain-object: 5.0.0 slate: 0.110.2 - slate-react@0.110.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.110.2): + slate-react@0.111.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.110.2))(slate@0.110.2): dependencies: '@juggle/resize-observer': 3.4.0 direction: 1.0.4 @@ -4953,6 +4424,7 @@ snapshots: react-dom: 18.3.1(react@18.3.1) scroll-into-view-if-needed: 3.1.0 slate: 0.110.2 + slate-dom: 0.111.0(slate@0.110.2) tiny-invariant: 1.3.1 slate@0.110.2: @@ -5068,11 +4540,6 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - synckit@0.9.1: - dependencies: - '@pkgr/core': 0.1.1 - tslib: 2.7.0 - synckit@0.9.2: dependencies: '@pkgr/core': 0.1.1 @@ -5144,8 +4611,6 @@ snapshots: minimist: 1.2.8 strip-bom: 3.0.0 - tslib@2.7.0: {} - tslib@2.8.1: {} tsx@4.19.2: diff --git a/templates/plate-template/postcss.config.js b/templates/plate-template/postcss.config.js deleted file mode 100644 index 33ad091d26..0000000000 --- a/templates/plate-template/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/templates/plate-template/postcss.config.mjs b/templates/plate-template/postcss.config.mjs new file mode 100644 index 0000000000..1a69fd2a45 --- /dev/null +++ b/templates/plate-template/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/templates/plate-template/public/next.svg b/templates/plate-template/public/next.svg deleted file mode 100644 index 5174b28c56..0000000000 --- a/templates/plate-template/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/plate-template/public/thirteen.svg b/templates/plate-template/public/thirteen.svg deleted file mode 100644 index 8977c1bd12..0000000000 --- a/templates/plate-template/public/thirteen.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/plate-template/public/vercel.svg b/templates/plate-template/public/vercel.svg deleted file mode 100644 index d2f8422273..0000000000 --- a/templates/plate-template/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/plate-template/src/app/editor/page.tsx b/templates/plate-template/src/app/editor/page.tsx new file mode 100644 index 0000000000..41a3c261e6 --- /dev/null +++ b/templates/plate-template/src/app/editor/page.tsx @@ -0,0 +1,9 @@ +import { PlateEditor } from '@/components/editor/plate-editor'; + +export default function Page() { + return ( +
+ +
+ ); +} diff --git a/templates/plate-template/public/favicon.ico b/templates/plate-template/src/app/favicon.ico similarity index 100% rename from templates/plate-template/public/favicon.ico rename to templates/plate-template/src/app/favicon.ico diff --git a/templates/plate-template/src/app/fonts/GeistMonoVF.woff b/templates/plate-template/src/app/fonts/GeistMonoVF.woff new file mode 100644 index 0000000000..f2ae185cbf Binary files /dev/null and b/templates/plate-template/src/app/fonts/GeistMonoVF.woff differ diff --git a/templates/plate-template/src/app/fonts/GeistVF.woff b/templates/plate-template/src/app/fonts/GeistVF.woff new file mode 100644 index 0000000000..1b62daacff Binary files /dev/null and b/templates/plate-template/src/app/fonts/GeistVF.woff differ diff --git a/templates/plate-template/src/app/globals.css b/templates/plate-template/src/app/globals.css new file mode 100644 index 0000000000..09c15d81a3 --- /dev/null +++ b/templates/plate-template/src/app/globals.css @@ -0,0 +1,135 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + font-family: Arial, Helvetica, sans-serif; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } + [data-registry="plate"] { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --brand: 217.2 91.2% 59.8%; + --highlight: 47.9 95.8% 53.1%; + } + [data-registry="plate"].dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --brand: 213.3 93.9% 67.8%; + --highlight: 48 96% 53%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/templates/plate-template/src/app/layout.tsx b/templates/plate-template/src/app/layout.tsx index d713c79ec9..a36cde01c6 100644 --- a/templates/plate-template/src/app/layout.tsx +++ b/templates/plate-template/src/app/layout.tsx @@ -1,67 +1,35 @@ -import { Metadata, Viewport } from 'next'; +import type { Metadata } from "next"; +import localFont from "next/font/local"; +import "./globals.css"; -import { cn } from '@udecode/cn'; - -import { TooltipProvider } from '@/components/plate-ui/tooltip'; -import { SiteHeader } from '@/components/site/site-header'; -import { TailwindIndicator } from '@/components/site/tailwind-indicator'; -import { ThemeProvider } from '@/components/site/theme-provider'; -import { siteConfig } from '@/config/site'; -import { fontSans } from '@/lib/fonts'; - -import '@/styles/globals.css'; +const geistSans = localFont({ + src: "./fonts/GeistVF.woff", + variable: "--font-geist-sans", + weight: "100 900", +}); +const geistMono = localFont({ + src: "./fonts/GeistMonoVF.woff", + variable: "--font-geist-mono", + weight: "100 900", +}); export const metadata: Metadata = { - description: siteConfig.description, - icons: { - apple: '/apple-touch-icon.png', - icon: '/favicon.ico', - shortcut: '/favicon-16x16.png', - }, - title: { - default: siteConfig.name, - template: `%s - ${siteConfig.name}`, - }, -}; - -export const viewport: Viewport = { - themeColor: [ - { color: 'white', media: '(prefers-color-scheme: light)' }, - { color: 'black', media: '(prefers-color-scheme: dark)' }, - ], + title: "Create Next App", + description: "Generated by create next app", }; -interface RootLayoutProps { +export default function RootLayout({ + children, +}: Readonly<{ children: React.ReactNode; -} - -export default function RootLayout({ children }: RootLayoutProps) { +}>) { return ( - <> - - - - - -
- -
{children}
-
- - - - - - + + + {children} + + ); } diff --git a/templates/plate-template/src/app/page.tsx b/templates/plate-template/src/app/page.tsx index 415c92e933..433c8aa7fd 100644 --- a/templates/plate-template/src/app/page.tsx +++ b/templates/plate-template/src/app/page.tsx @@ -1,42 +1,101 @@ -import Link from 'next/link'; +import Image from "next/image"; -import { PlateEditor } from '@/components/plate-editor'; -import { buttonVariants } from '@/components/plate-ui/button'; -import { siteConfig } from '@/config/site'; - -export default function IndexPage() { +export default function Home() { return ( -
-
-

- Plate Template. -

-

- Minimal Editor · Next 15 -

-
-
- +
+ +
    +
  1. + Get started by editing{" "} + + app/page.tsx + + . +
    2. +
  2. Save and see your changes instantly.
    3. +
+ + +
+
- -
- -
-
+ + Examples + + + + Go to nextjs.org → + + +
); } diff --git a/templates/plate-template/src/assets/fonts/Inter-Bold.ttf b/templates/plate-template/src/assets/fonts/Inter-Bold.ttf deleted file mode 100644 index 8e82c70d10..0000000000 Binary files a/templates/plate-template/src/assets/fonts/Inter-Bold.ttf and /dev/null differ diff --git a/templates/plate-template/src/assets/fonts/Inter-Regular.ttf b/templates/plate-template/src/assets/fonts/Inter-Regular.ttf deleted file mode 100644 index 8d4eebf206..0000000000 Binary files a/templates/plate-template/src/assets/fonts/Inter-Regular.ttf and /dev/null differ diff --git a/templates/plate-template/src/components/editor/plate-editor.tsx b/templates/plate-template/src/components/editor/plate-editor.tsx new file mode 100644 index 0000000000..876d664387 --- /dev/null +++ b/templates/plate-template/src/components/editor/plate-editor.tsx @@ -0,0 +1,18 @@ +'use client'; + +import { Plate } from '@udecode/plate-common/react'; + +import { useCreateEditor } from '@/components/editor/use-create-editor'; +import { Editor, EditorContainer } from '@/components/plate-ui/editor'; + +export function PlateEditor() { + const editor = useCreateEditor(); + + return ( + + + + + + ); +} diff --git a/templates/plate-template/src/components/editor/use-create-editor.tsx b/templates/plate-template/src/components/editor/use-create-editor.tsx new file mode 100644 index 0000000000..ef89c6c2dd --- /dev/null +++ b/templates/plate-template/src/components/editor/use-create-editor.tsx @@ -0,0 +1,85 @@ +'use client'; + +import { withProps } from '@udecode/cn'; +import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react'; +import { + BasicMarksPlugin, + BoldPlugin, + ItalicPlugin, + StrikethroughPlugin, + UnderlinePlugin, +} from '@udecode/plate-basic-marks/react'; +import { + ParagraphPlugin, + PlateElement, + PlateLeaf, + usePlateEditor, +} from '@udecode/plate-common/react'; + +export const useCreateEditor = () => { + return usePlateEditor({ + override: { + // Default styles in globals.css + components: { + [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), + [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), + [ParagraphPlugin.key]: withProps(PlateElement, { + as: 'p', + className: 'mb-4', + }), + [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), + [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + blockquote: withProps(PlateElement, { + as: 'blockquote', + className: 'mb-4 border-l-4 border-[#d0d7de] pl-4 text-[#636c76]', + }), + h1: withProps(PlateElement, { + as: 'h1', + className: + 'mb-4 mt-6 text-3xl font-semibold tracking-tight lg:text-4xl', + }), + h2: withProps(PlateElement, { + as: 'h2', + className: 'mb-4 mt-6 text-2xl font-semibold tracking-tight', + }), + h3: withProps(PlateElement, { + as: 'h3', + className: 'mb-4 mt-6 text-xl font-semibold tracking-tight', + }), + }, + }, + plugins: [BasicElementsPlugin, BasicMarksPlugin], + value: [ + { + children: [{ text: 'Basic Editor' }], + type: 'h1', + }, + { + children: [{ text: 'Heading 2' }], + type: 'h2', + }, + { + children: [{ text: 'Heading 3' }], + type: 'h3', + }, + { + children: [{ text: 'This is a blockquote element' }], + type: 'blockquote', + }, + { + children: [ + { text: 'Basic marks: ' }, + { bold: true, text: 'bold' }, + { text: ', ' }, + { italic: true, text: 'italic' }, + { text: ', ' }, + { text: 'underline', underline: true }, + { text: ', ' }, + { strikethrough: true, text: 'strikethrough' }, + { text: '.' }, + ], + type: ParagraphPlugin.key, + }, + ], + }); +}; diff --git a/templates/plate-template/src/components/plate-ui/button.tsx b/templates/plate-template/src/components/plate-ui/button.tsx deleted file mode 100644 index e92ca630ab..0000000000 --- a/templates/plate-template/src/components/plate-ui/button.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; - -import type { VariantProps } from 'class-variance-authority'; - -import { Slot } from '@radix-ui/react-slot'; -import { cn, withRef } from '@udecode/cn'; -import { cva } from 'class-variance-authority'; - -export const buttonVariants = cva( - 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', - { - defaultVariants: { - size: 'sm', - variant: 'default', - }, - variants: { - isMenu: { - true: 'w-full cursor-pointer justify-start', - }, - size: { - icon: 'size-[28px] rounded-md px-1.5', - lg: 'h-10 rounded-md px-4', - md: 'h-8 px-3 text-sm', - none: '', - sm: 'h-[28px] rounded-md px-2.5', - xs: 'h-8 rounded-md px-3 text-xs', - }, - variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', - destructive: - 'bg-destructive text-destructive-foreground hover:bg-destructive/90', - ghost: 'hover:bg-accent hover:text-accent-foreground', - inlineLink: 'text-base text-primary underline underline-offset-4', - link: 'text-primary underline-offset-4 hover:underline', - outline: - 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', - secondary: - 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - }, - }, - } -); - -export const Button = withRef< - 'button', - { - asChild?: boolean; - } & VariantProps ->(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => { - const Comp = asChild ? Slot : 'button'; - - return ( - - ); -}); diff --git a/templates/plate-template/src/components/plate-ui/tooltip.tsx b/templates/plate-template/src/components/plate-ui/tooltip.tsx deleted file mode 100644 index ca6e82ab74..0000000000 --- a/templates/plate-template/src/components/plate-ui/tooltip.tsx +++ /dev/null @@ -1,86 +0,0 @@ -'use client'; - -import React from 'react'; - -import * as TooltipPrimitive from '@radix-ui/react-tooltip'; -import { withCn, withProps } from '@udecode/cn'; - -export const TooltipProvider = withProps(TooltipPrimitive.Provider, { - delayDuration: 0, - disableHoverableContent: true, - skipDelayDuration: 0, -}); - -export const Tooltip = TooltipPrimitive.Root; - -export const TooltipTrigger = TooltipPrimitive.Trigger; - -export const TooltipPortal = TooltipPrimitive.Portal; - -export const TooltipContent = withCn( - withProps(TooltipPrimitive.Content, { - sideOffset: 4, - }), - 'z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm font-semibold text-white shadow-md' -); - -export function withTooltip< - T extends React.ComponentType | keyof HTMLElementTagNameMap, ->(Component: T) { - return React.forwardRef< - React.ElementRef, - { - tooltipContentProps?: Omit< - React.ComponentPropsWithoutRef, - 'children' - >; - tooltipProps?: Omit< - React.ComponentPropsWithoutRef, - 'children' - >; - tooltip?: React.ReactNode; - } & React.ComponentPropsWithoutRef & - Omit - >(function ExtendComponent( - { - delayDuration = 0, - disableHoverableContent = true, - skipDelayDuration = 0, - tooltip, - tooltipContentProps, - tooltipProps, - ...props - }, - ref - ) { - const [mounted, setMounted] = React.useState(false); - - React.useEffect(() => { - setMounted(true); - }, []); - - const component = ; - - if (tooltip && mounted) { - return ( - - - {component} - - - - {tooltip} - - - - - ); - } - - return component; - }); -} diff --git a/templates/plate-template/src/components/site/main-nav.tsx b/templates/plate-template/src/components/site/main-nav.tsx deleted file mode 100644 index 1ed29b0174..0000000000 --- a/templates/plate-template/src/components/site/main-nav.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; - -import { cn } from '@udecode/cn'; -import { MinusIcon } from 'lucide-react'; -import Link from 'next/link'; - -import { siteConfig } from '@/config/site'; -import { NavItem } from '@/types/nav'; - -interface MainNavProps { - items?: NavItem[]; -} - -export function MainNav({ items }: MainNavProps) { - return ( -
- - - {siteConfig.name} - - {items?.length ? ( - - ) : null} -
- ); -} diff --git a/templates/plate-template/src/components/site/site-header.tsx b/templates/plate-template/src/components/site/site-header.tsx deleted file mode 100644 index c3d4e52587..0000000000 --- a/templates/plate-template/src/components/site/site-header.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { LucideProps } from 'lucide-react'; - -import Link from 'next/link'; - -import { buttonVariants } from '@/components/plate-ui/button'; -import { MainNav } from '@/components/site/main-nav'; -import { ThemeToggle } from '@/components/site/theme-toggle'; -import { siteConfig } from '@/config/site'; - -export function SiteHeader() { - return ( -
-
- -
- -
-
-
- ); -} - -const GithubIcon = (props: LucideProps) => ( - - - -); diff --git a/templates/plate-template/src/components/site/tailwind-indicator.tsx b/templates/plate-template/src/components/site/tailwind-indicator.tsx deleted file mode 100644 index 0e60a7b2ca..0000000000 --- a/templates/plate-template/src/components/site/tailwind-indicator.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export function TailwindIndicator() { - if (process.env.NODE_ENV === 'production') return null; - - return ( -
-
xs
-
sm
-
md
-
lg
-
xl
-
2xl
-
- ); -} diff --git a/templates/plate-template/src/components/site/theme-provider.tsx b/templates/plate-template/src/components/site/theme-provider.tsx deleted file mode 100644 index 6e9122e5a6..0000000000 --- a/templates/plate-template/src/components/site/theme-provider.tsx +++ /dev/null @@ -1,10 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import { ThemeProvider as NextThemesProvider } from 'next-themes'; -import { ThemeProviderProps } from 'next-themes/dist/types'; - -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { - return {children}; -} diff --git a/templates/plate-template/src/components/site/theme-toggle.tsx b/templates/plate-template/src/components/site/theme-toggle.tsx deleted file mode 100644 index fc12b0308a..0000000000 --- a/templates/plate-template/src/components/site/theme-toggle.tsx +++ /dev/null @@ -1,24 +0,0 @@ -'use client'; - -import * as React from 'react'; - -import { MoonIcon, SunIcon } from 'lucide-react'; -import { useTheme } from 'next-themes'; - -import { Button } from '@/components/plate-ui/button'; - -export function ThemeToggle() { - const { setTheme, theme } = useTheme(); - - return ( - - ); -} diff --git a/templates/plate-template/src/config/site.ts b/templates/plate-template/src/config/site.ts deleted file mode 100644 index 833ac028bd..0000000000 --- a/templates/plate-template/src/config/site.ts +++ /dev/null @@ -1,18 +0,0 @@ -export type SiteConfig = typeof siteConfig; - -export const siteConfig = { - description: - 'Rich-text editor components built with Radix UI and Tailwind CSS.', - links: { - docs: 'https://platejs.org', - github: 'https://github.com/udecode/plate', - twitter: 'https://twitter.com/zbeyens', - }, - mainNav: [ - { - href: '/', - title: 'Home', - }, - ], - name: 'Next.js', -}; diff --git a/templates/plate-template/src/lib/fonts.ts b/templates/plate-template/src/lib/fonts.ts deleted file mode 100644 index 285edae10b..0000000000 --- a/templates/plate-template/src/lib/fonts.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - JetBrains_Mono as FontMono, - Inter as FontSans, -} from 'next/font/google'; - -export const fontSans = FontSans({ - subsets: ['latin'], - variable: '--font-sans', -}); - -export const fontMono = FontMono({ - subsets: ['latin'], - variable: '--font-mono', -}); diff --git a/templates/plate-template/src/lib/utils.ts b/templates/plate-template/src/lib/utils.ts index 435c432ae2..bd0c391ddd 100644 --- a/templates/plate-template/src/lib/utils.ts +++ b/templates/plate-template/src/lib/utils.ts @@ -1,8 +1,6 @@ -import type { ClassValue } from 'clsx'; - -import { clsx } from 'clsx'; -import { twMerge } from 'tailwind-merge'; +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); + return twMerge(clsx(inputs)) } diff --git a/templates/plate-template/src/styles/globals.css b/templates/plate-template/src/styles/globals.css deleted file mode 100644 index 6f74c23955..0000000000 --- a/templates/plate-template/src/styles/globals.css +++ /dev/null @@ -1,85 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 72.22% 50.59%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 5% 64.9%; - --radius: 0.5rem; - - --brand: 217.2 91.2% 59.8%; - --highlight: 47.9 95.8% 53.1%; - } - - .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; - --border: 240 3.7% 25%; - --input: 240 3.7% 25%; - --ring: 240 3.7% 25%; - - --brand: 213.3 93.9% 67.8%; - --highlight: 48 96% 53%; - } -} - -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } - - h1 { - @apply text-3xl font-semibold tracking-tight lg:text-4xl mt-6 mb-4; - } - - h2 { - @apply text-2xl font-semibold tracking-tight mt-6 mb-4; - } - - h3 { - @apply text-xl font-semibold tracking-tight mt-6 mb-4; - } - - p { - @apply mb-4; - } - - blockquote { - @apply mb-4 border-l-4 pl-4 text-[#636c76] border-[#d0d7de]; - } -} diff --git a/templates/plate-template/src/types/nav.ts b/templates/plate-template/src/types/nav.ts deleted file mode 100644 index c022b8285f..0000000000 --- a/templates/plate-template/src/types/nav.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface NavItem { - title: string; - disabled?: boolean; - external?: boolean; - href?: string; -} diff --git a/templates/plate-template/tailwind.config.js b/templates/plate-template/tailwind.config.js deleted file mode 100644 index cd60c24747..0000000000 --- a/templates/plate-template/tailwind.config.js +++ /dev/null @@ -1,86 +0,0 @@ -const { fontFamily } = require('tailwindcss/defaultTheme'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - darkMode: ['class'], - content: ['src/**/*.{ts,tsx}'], - theme: { - container: { - center: 'true', - padding: '2rem', - screens: { - '2xl': '1400px', - }, - }, - extend: { - colors: { - border: 'hsl(var(--border))', - brand: { - DEFAULT: 'hsl(var(--brand))', - foreground: 'hsl(var(--brand-foreground))', - }, - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - highlight: { - DEFAULT: 'hsl(var(--highlight))', - foreground: 'hsl(var(--highlight-foreground))', - }, - }, - borderRadius: { - xl: '`calc(var(--radius) + 4px)`', - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)', - }, - fontFamily: { - sans: ['var(--font-sans)', ...fontFamily.sans], - heading: ['var(--font-heading)', ...fontFamily.sans], - }, - keyframes: { - 'accordion-down': { - from: { height: '0' }, - to: { height: 'var(--radix-accordion-content-height)' }, - }, - 'accordion-up': { - from: { height: 'var(--radix-accordion-content-height)' }, - to: { height: '0' }, - }, - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - }, - }, - }, - plugins: [require('tailwindcss-animate')], -}; diff --git a/templates/plate-template/tailwind.config.ts b/templates/plate-template/tailwind.config.ts new file mode 100644 index 0000000000..52703aa24e --- /dev/null +++ b/templates/plate-template/tailwind.config.ts @@ -0,0 +1,71 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + darkMode: ["class"], + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + }, + brand: { + DEFAULT: 'hsl(var(--brand))', + foreground: 'hsl(var(--brand-foreground))' + }, + highlight: { + DEFAULT: 'hsl(var(--highlight))', + foreground: 'hsl(var(--highlight-foreground))' + } + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + } + } + }, + plugins: [require("tailwindcss-animate")], +}; +export default config; diff --git a/turbo.json b/turbo.json index 1040c6bc65..fd800b0ce0 100644 --- a/turbo.json +++ b/turbo.json @@ -1,6 +1,6 @@ { "$schema": "https://turbo.build/schema.json", - "globalEnv": ["CI", "GITHUB_OAUTH_TOKEN"], + "globalEnv": ["CI", "GITHUB_OAUTH_TOKEN", "OPENAI_API_KEY"], "tasks": { "dev": { "cache": false, diff --git a/yarn.lock b/yarn.lock index dd482c179e..7940f6e9e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10614,7 +10614,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-tailwindcss@npm:^3.17.4": +"eslint-plugin-tailwindcss@npm:^3.17.5": version: 3.17.5 resolution: "eslint-plugin-tailwindcss@npm:3.17.5" dependencies: @@ -16969,7 +16969,7 @@ __metadata: eslint-plugin-react: "npm:^7.36.1" eslint-plugin-react-hooks: "npm:^4.6.2" eslint-plugin-regexp: "npm:^2.6.0" - eslint-plugin-tailwindcss: "npm:^3.17.4" + eslint-plugin-tailwindcss: "npm:^3.17.5" eslint-plugin-testing-library: "npm:^6.3.0" eslint-plugin-unicorn: "npm:^55.0.0" eslint-plugin-unused-imports: "npm:^4.1.3"