diff --git a/apps/www/content/docs/caption.mdx b/apps/www/content/docs/caption.mdx index c6fecde124..382585b112 100644 --- a/apps/www/content/docs/caption.mdx +++ b/apps/www/content/docs/caption.mdx @@ -1,8 +1,8 @@ --- title: Caption docs: - - route: /docs/components/draggable - title: Draggable + - route: /docs/components/caption + title: Caption --- @@ -25,25 +25,35 @@ npm install @udecode/plate-caption ```tsx import { CaptionPlugin } from '@udecode/plate-caption/react'; -import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; +import { + AudioPlugin, + FilePlugin, + ImagePlugin, + MediaEmbedPlugin, + VideoPlugin, +} from '@udecode/plate-media/react'; +``` +```tsx const plugins = [ // ...otherPlugins, - CaptionPlugin, ImagePlugin, + VideoPlugin, + AudioPlugin, + FilePlugin, MediaEmbedPlugin, -]; - -const editor = createPlateEditor({ - plugins, - override: { - plugins: { - [CaptionPlugin.key]: { - plugins: [ImagePlugin.key, MediaEmbedPlugin.key], - }, + CaptionPlugin.configure({ + options: { + plugins: [ + ImagePlugin, + VideoPlugin, + AudioPlugin, + FilePlugin, + MediaEmbedPlugin, + ], }, - }, -}); + }), +]; ``` ## Plugins diff --git a/apps/www/content/docs/media-placeholder.mdx b/apps/www/content/docs/media-placeholder.mdx deleted file mode 100644 index c46767ce5c..0000000000 --- a/apps/www/content/docs/media-placeholder.mdx +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Media Placeholder -docs: - - route: components/media-placeholder-element - title: Media Placeholder Element - - route: components/media-upload-toast - title: Media Upload Toast ---- - - - - - -## Features - -- Supports multiple media types: image, video, audio, and file -- Transforms for inserting different types of media placeholders - - - -## Installation - -```bash -npm install @udecode/plate-media -``` - -## Usage - -```tsx -import { - AudioPlugin, - FilePlugin, - ImagePlugin, - MediaEmbedPlugin, - PlaceholderPlugin, - VideoPlugin, -} from '@udecode/plate-media/react'; -``` - -```tsx -const plugins = [ - // ...otherPlugins, - PlaceholderPlugin.configure({ - options: { - disableEmptyPlaceholder: true, - }, - render: { - afterEditable: () => , - }, - }), -]; -``` - -```tsx -const components = { - // ...otherComponents, - [PlaceholderPlugin.key]: MediaPlaceholderElement, -}; -``` - -### UploadThing Integration - -The UploadThing integration provides an easy way to handle file uploads in your editor. Follow these steps to set it up: - -1. Install the required dependencies: - - ```bash - npm install @uploadthing/react uploadthing - ``` - -2. Install the [media-placeholder-element](/docs/components/media-placeholder-element) component. - -3. Set up the UploadThing API route by copying the [example implementation](https://github.com/udecode/plate/blob/main/templates/plate-playground-template/src/app/api/uploadthing/core.ts). - -4. Get your UploadThing API key from the [dashboard](https://uploadthing.com/dashboard) and add it to your `.env` file: - ```bash - UPLOADTHING_SECRET=your_secret_key - ``` - -### Using your own backend - -To implement your own backend for file uploads: - -1. Remove the UploadThing implementation: - - ```bash - lib/uploadthing/ - api/uploadthing/ - ``` - -2. Create your own upload hook: - - ```ts - function useUploadFile() { - // Your implementation here - return { - isUploading: boolean, - progress: number, - uploadFile: (file: File) => Promise, - uploadedFile: UploadedFile | undefined, - uploadingFile: File | undefined, - }; - } - ``` - -3. The hook should match the interface expected by the media placeholder component: - ```ts - interface UploadedFile { - key: string; - url: string; - name: string; - size: number; - type: string; - } - ``` - -### Plate UI - -Refer to the preview above. - -### Plate Plus - - - -## Plugins - -### PlaceholderPlugin - -Media placeholder element plugin. - - - -Configuration for different file types: - -- You can use this option to configure upload limits for each file type, including: - - - Maximum file count (e.g. `maxFileCount: 1`) - - Maximum file size (e.g. `maxFileSize: '8MB'`) - - Minimum file count (e.g. `minFileCount: 1`) - - mediaType: Used for passing to the media-placeholder-elements file to distinguish between different file types and their progress bar styles. - - default configuration: - - ```tsx - uploadConfig: { - audio: { - maxFileCount: 1, - maxFileSize: '8MB', - mediaType: AudioPlugin.key, - minFileCount: 1, - }, - blob: { - maxFileCount: 1, - maxFileSize: '8MB', - mediaType: FilePlugin.key, - minFileCount: 1, - }, - image: { - maxFileCount: 3, - maxFileSize: '4MB', - mediaType: ImagePlugin.key, - minFileCount: 1, - }, - pdf: { - maxFileCount: 1, - maxFileSize: '4MB', - mediaType: FilePlugin.key, - minFileCount: 1, - }, - text: { - maxFileCount: 1, - maxFileSize: '64KB', - mediaType: FilePlugin.key, - minFileCount: 1, - }, - video: { - maxFileCount: 1, - maxFileSize: '16MB', - mediaType: VideoPlugin.key, - minFileCount: 1, - }, - }, - ``` - - here is all allowed file types (keys for `uploadConfig`): - - ```tsx - export const ALLOWED_FILE_TYPES = [ - 'image', - 'video', - 'audio', - 'pdf', - 'text', - 'blob', - ] as const; - ``` - - - - -Disable empty placeholder when no file is selected. - -- **Default:** `false` - - - -Whether we can undo to the placeholder after the file upload is complete. - -- **Default:** `false` - - - -Maximum number of files that can be uploaded at once. - -- **Default:** `5` - - - -## Transforms - -### editor.tf.insert.audioPlaceholder - -Inserts an audio placeholder element. - - - - Options for the insert nodes transform. - - - -### editor.tf.insert.filePlaceholder - -Inserts a file placeholder element. - - - - Options for the insert nodes transform. - - - -### editor.tf.insert.imagePlaceholder - -Inserts an image placeholder element. - - - - Options for the insert nodes transform. - - - -### editor.tf.insert.videoPlaceholder - -Inserts a video placeholder element. - - - - Options for the insert nodes transform. - - - -## Types - -### TPlaceholderElement - -```tsx -type TPlaceholderElement = TElement & { - mediaType: string; -}; -``` diff --git a/apps/www/content/docs/media.mdx b/apps/www/content/docs/media.mdx index afde41371a..989d9aeb86 100644 --- a/apps/www/content/docs/media.mdx +++ b/apps/www/content/docs/media.mdx @@ -3,10 +3,20 @@ title: Media docs: - route: /docs/components/image-element title: Image Element + - route: /docs/components/video-element + title: Video Element + - route: /docs/components/audio-element + title: Audio Element + - route: /docs/components/file-element + title: File Element - route: /docs/components/media-embed-element title: Media Embed Element - route: /docs/components/media-popover title: Media Popover + - route: /docs/components/media-placeholder-element + title: Media Placeholder Element + - route: /docs/components/media-upload-toast + title: Media Upload Toast - route: /docs/components/media-toolbar-button title: Media Toolbar Button - route: https://pro.platejs.org/docs/components/media-toolbar @@ -19,11 +29,36 @@ docs: ## Features -- Allows insertion of embeddable media: images, videos, and tweets. -- Supports multiple media providers: video, youtube, vimeo, dailymotion, youku, coub, twitter. -- Editable captions. -- Resizable. -- Use [Plate Cloud](/docs/cloud) for easy cloud uploads and server-side image resizing. +### Media Features + +- Editable captions +- Resizable elements + +### Media Support +- **File types**: + - Image + - Video + - Audio + - Others (PDF, Word, etc.) +- **Video providers**: + - Local video files + - YouTube, Vimeo, Dailymotion, Youku, Coub +- **Embed providers**: + - Tweets + +### Upload + +- **Multiple upload methods**: + - Toolbar button with file picker + - Drag and drop from file system + - Paste from clipboard (images) + - URL embedding for external media +- **Upload experience**: + - Real-time progress tracking + - Preview during upload + - Error handling + - File size validation + - Type validation @@ -36,38 +71,206 @@ npm install @udecode/plate-media ## Usage ```tsx -import { CaptionPlugin } from '@udecode/plate-caption/react'; -import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; +import { + AudioPlugin, + FilePlugin, + ImagePlugin, + MediaEmbedPlugin, + PlaceholderPlugin, + VideoPlugin, +} from '@udecode/plate-media/react'; import { SelectOnBackspacePlugin } from '@udecode/plate-select'; +``` +```tsx const plugins = [ // ...otherPlugins, - CaptionPlugin.configure({ - options: { plugins: [ImagePlugin, MediaEmbedPlugin] }, - }), ImagePlugin, + VideoPlugin, + AudioPlugin, + FilePlugin, MediaEmbedPlugin, SelectOnBackspacePlugin.configure({ options: { query: { - allow: [ImagePlugin.key, MediaEmbedPlugin.key], + allow: [ImagePlugin.key, VideoPlugin.key, AudioPlugin.key, FilePlugin.key, MediaEmbedPlugin.key], }, }, }), + PlaceholderPlugin.configure({ + options: { disableEmptyPlaceholder: true }, + render: { afterEditable: MediaUploadToast }, + }), ]; ``` +```tsx +const components = { + // ...otherComponents, + [ImagePlugin.key]: ImageElement, + [VideoPlugin.key]: VideoElement, + [AudioPlugin.key]: AudioElement, + [FilePlugin.key]: FileElement, + [MediaEmbedPlugin.key]: MediaEmbedElement, + [PlaceholderPlugin.key]: MediaPlaceholderElement, +}; +``` + +### Caption + +To enable media captions, use the [Caption Plugin](/docs/caption). + +### Upload + +There are two ways to implement file uploads in your editor: + +1. Using our UploadThing implementation +2. Creating a custom implementation with your preferred upload solution + +#### UploadThing + +1. Add [MediaPlaceholderElement](/docs/components/media-placeholder-element) component + +2. Add API routes for UploadThing: + + + +3. Get your secret key from [UploadThing](https://uploadthing.com/dashboard/settings) for free +4. Add your UploadThing secret key to `.env`: + +```bash title=".env" +UPLOADTHING_TOKEN=sk_live_xxx +``` + +#### Custom Implementation + +For custom implementations, you'll need to create an upload hook that matches our interface. This can work with any upload backend (AWS S3, UploadThing, Cloudinary, Firebase Storage, etc.). + +The upload hook should implement this interface: + +```ts +interface UseUploadFileProps { + onUploadComplete?: (file: UploadedFile) => void; + onUploadError?: (error: unknown) => void; + headers?: Record; + onUploadBegin?: (fileName: string) => void; + onUploadProgress?: (progress: { progress: number }) => void; + skipPolling?: boolean; +} + +interface UploadedFile { + key: string; // Unique identifier + url: string; // Public URL of the uploaded file + name: string; // Original filename + size: number; // File size in bytes + type: string; // MIME type +} +``` + +Example implementation with S3 presigned URLs: + +```ts +export function useUploadFile({ + onUploadComplete, + onUploadError, + onUploadProgress +}: UseUploadFileProps = {}) { + const [uploadedFile, setUploadedFile] = useState(); + const [uploadingFile, setUploadingFile] = useState(); + const [progress, setProgress] = useState(0); + const [isUploading, setIsUploading] = useState(false); + + async function uploadFile(file: File) { + setIsUploading(true); + setUploadingFile(file); + + try { + // Get presigned URL and final URL from your backend + const { presignedUrl, fileUrl, fileKey } = await fetch('/api/upload', { + method: 'POST', + body: JSON.stringify({ + filename: file.name, + contentType: file.type, + }), + }).then(r => r.json()); + + // Upload to S3 using presigned URL + await axios.put(presignedUrl, file, { + headers: { 'Content-Type': file.type }, + onUploadProgress: (progressEvent) => { + const progress = (progressEvent.loaded / progressEvent.total) * 100; + setProgress(progress); + onUploadProgress?.({ progress }); + }, + }); + + const uploadedFile = { + key: fileKey, + url: fileUrl, + name: file.name, + size: file.size, + type: file.type, + }; + + setUploadedFile(uploadedFile); + onUploadComplete?.(uploadedFile); + + return uploadedFile; + } catch (error) { + onUploadError?.(error); + throw error; + } finally { + setProgress(0); + setIsUploading(false); + setUploadingFile(undefined); + } + } + + return { + isUploading, + progress, + uploadFile, + uploadedFile, + uploadingFile, + }; +} +``` + + ## Plugins +### MediaPluginOptions + +Plugin options used by media plugins. + + + + A function to check whether a text string is a URL. + + + A function to transform the URL. + + + ### ImagePlugin +Plugin for void image elements. Options extends [MediaPluginOptions](#mediapluginoptions). + -Extends `MediaPluginOptions`. +Extends [MediaPluginOptions](#mediapluginoptions). -An optional method that will upload the image to a server. The method receives the base64 dataUrl of the uploaded image, and should return the URL of the uploaded image. +An optional method that will upload the image to a server. The method receives either: +- A data URL (string) from `FileReader.readAsDataURL` +- An ArrayBuffer from clipboard data + +Should return either: +- A URL string to the uploaded image +- The original data URL/ArrayBuffer if no upload is needed + +If not provided, the original data URL/ArrayBuffer will be used as the image source. @@ -78,12 +281,159 @@ Disables URL embed on data insertion if set to true. +### VideoPlugin + +Plugin for void video elements. + +### AudioPlugin + +Plugin for void audio elements. + +### FilePlugin + +Plugin for void file elements. + ### MediaEmbedPlugin -Options extends `MediaPluginOptions`. +Plugin for void media embed elements. Options extends `MediaPluginOptions`. + +### PlaceholderPlugin + +Plugin for void media placeholder elements. Handles file uploads, drag & drop, and clipboard paste events. + + + + + +Configuration for different file types. Default configuration: + +```ts +{ + audio: { + maxFileCount: 1, + maxFileSize: '8MB', + mediaType: AudioPlugin.key, + minFileCount: 1, + }, + blob: { + maxFileCount: 1, + maxFileSize: '8MB', + mediaType: FilePlugin.key, + minFileCount: 1, + }, + image: { + maxFileCount: 3, + maxFileSize: '4MB', + mediaType: ImagePlugin.key, + minFileCount: 1, + }, + pdf: { + maxFileCount: 1, + maxFileSize: '4MB', + mediaType: FilePlugin.key, + minFileCount: 1, + }, + text: { + maxFileCount: 1, + maxFileSize: '64KB', + mediaType: FilePlugin.key, + minFileCount: 1, + }, + video: { + maxFileCount: 1, + maxFileSize: '16MB', + mediaType: VideoPlugin.key, + minFileCount: 1, + }, +} +``` + +Supported file types: `'image' | 'video' | 'audio' | 'pdf' | 'text' | 'blob'` + + + + The media plugin keys that this config is for: `'audio' | 'file' | 'image' | 'video'` + + + The maximum number of files of this type that can be uploaded. + + + The maximum file size for a file of this type. Format: `${1|2|4|8|16|32|64|128|256|512|1024}${B|KB|MB|GB}` + + + The minimum number of files of this type that must be uploaded. + + + + + + +Disable empty placeholder when no file is uploading. + +- **Default:** `false` + + + +Disable drag and drop file upload functionality. + +- **Default:** `false` + + + +Maximum number of files that can be uploaded at once, if not specified by `uploadConfig`. + +- **Default:** `5` + + + +Allow multiple files of the same type to be uploaded. + +- **Default:** `true` + + + ## API Placeholder +### editor.tf.insert.media() + +Inserts media files into the editor with upload placeholders. + + + + Files to upload. Validates against configured file types and limits. + + + + + Location to insert the media. Defaults to current selection. + + + Whether to insert a new block after the media. + - **Default:** `true` + + + + + +The transform: +- Validates files against configured limits (size, count, type) +- Creates placeholder elements for each file +- Handles multiple file uploads sequentially +- Maintains upload history for undo/redo operations +- Triggers error handling if validation fails + +Error codes: +```ts +enum UploadErrorCode { + INVALID_FILE_TYPE = 400, + TOO_MANY_FILES = 402, + INVALID_FILE_SIZE = 403, + TOO_LESS_FILES = 405, + TOO_LARGE = 413, +} +``` + ### editor.tf.insert.audioPlaceholder Inserts a placeholder. Converts to an audio element when completed. @@ -94,7 +444,6 @@ Inserts a placeholder. Converts to an audio element when completed. - ### editor.tf.insert.filePlaceholder Inserts a placeholder. Converts to a file element when completed. @@ -123,41 +472,47 @@ Inserts a placeholder. Converts to a video element when completed. +### editor.api.placeholder.addUploadingFile() -## API Media +Tracks a file that is currently being uploaded. -### insertMedia + + + Unique identifier for the placeholder element. + + + The file being uploaded. + + -Inserts media (image or media embed) into the editor. The type of media to insert is determined by the `type` parameter. +### editor.api.placeholder.getUploadingFile() + +Gets a file that is currently being uploaded. - -The editor instance. - - - - -A function that returns a promise resolving to the URL of the media to -be inserted. If not provided, a prompt will be displayed to enter the -URL. - - -The type of media to insert. Defaults to the editor's image element -type. + + Unique identifier for the placeholder element. + + -- **Default:** `editor.getType(ImagePlugin)` + + + The uploading file if found, undefined otherwise. + + - - +### editor.api.placeholder.removeUploadingFile() - +Removes a file from the uploading tracking state after upload completes or fails. + + + + Unique identifier for the placeholder element to remove. + +## API Media + ### parseMediaUrl Parses a media URL and returns the data associated with it based on the configured rules of the media plugin. @@ -198,19 +553,6 @@ Submits the floating media element by setting its URL and performing necessary t -### MediaPluginOptions - -Common attributes shared by image and media embed plugins. - - - - A function to check whether a text string is a URL. - - - A function to transform the URL. - - - ### EmbedUrlData A type defining the data returned from parsing an embed URL. @@ -322,6 +664,7 @@ The key of the media embed element. +The options for inserting nodes. @@ -556,3 +899,26 @@ A behavior hook for a media toolbar button. + +## Types + +### TMediaElement + +```tsx +export interface TMediaElement extends TElement { + url: string; + id?: string; + align?: 'center' | 'left' | 'right'; + isUpload?: boolean; + name?: string; + placeholderId?: string; +} +``` + +### TPlaceholderElement + +```tsx +export interface TPlaceholderElement extends TElement { + mediaType: string; +} +``` \ No newline at end of file diff --git a/apps/www/next.config.ts b/apps/www/next.config.ts index 9fbdb09c51..5bf512c151 100644 --- a/apps/www/next.config.ts +++ b/apps/www/next.config.ts @@ -37,8 +37,6 @@ const nextConfig = async (phase: string) => { // ignoreDuringBuilds: true, // }, - serverExternalPackages: ['@prisma/client'], - staticPageGenerationTimeout: 1200, }; diff --git a/apps/www/package.json b/apps/www/package.json index 649de99b9e..5a8612e7ca 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -37,7 +37,7 @@ "@ai-sdk/openai": "^0.0.67", "@ariakit/react": "0.4.11", "@faker-js/faker": "^9.0.2", - "@next/third-parties": "15.0.0", + "@next/third-parties": "15.0.3", "@radix-ui/colors": "3.0.0", "@radix-ui/react-accessible-icon": "^1.1.0", "@radix-ui/react-accordion": "^1.2.0", @@ -142,7 +142,7 @@ "lodash.template": "^4.5.0", "lucide-react": "0.460.0", "match-sorter": "6.3.4", - "next": "15.0.0", + "next": "15.0.3", "next-contentlayer2": "^0.4.6", "next-themes": "^0.3.0", "nuqs": "^2.0.3", diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index 7cf01d654e..2da1042058 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -691,9 +691,7 @@ { "dependencies": [ "@udecode/plate-media", - "use-file-picker", - "@uploadthing/react@7.1.0", - "uploadthing@7.2.0" + "use-file-picker" ], "doc": { "description": "A placeholder for media upload progress indication.", @@ -715,16 +713,13 @@ { "path": "plate-ui/media-placeholder-element.tsx", "type": "registry:ui" - }, - { - "path": "lib/uploadthing.ts", - "type": "registry:ui" } ], "name": "media-placeholder-element", "registryDependencies": [ "plate-element", - "spinner" + "spinner", + "uploadthing" ], "type": "registry:ui" }, @@ -2557,7 +2552,7 @@ "description": "Show toast notifications for media uploads.", "docs": [ { - "route": "/docs/media-placeholder", + "route": "/docs/media", "title": "Media Placeholder" } ], diff --git a/apps/www/public/r/styles/default/ai-demo.json b/apps/www/public/r/styles/default/ai-demo.json index 2424836860..2c71372b97 100644 --- a/apps/www/public/r/styles/default/ai-demo.json +++ b/apps/www/public/r/styles/default/ai-demo.json @@ -30,8 +30,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/align-demo.json b/apps/www/public/r/styles/default/align-demo.json index 7441126414..4624cc932c 100644 --- a/apps/www/public/r/styles/default/align-demo.json +++ b/apps/www/public/r/styles/default/align-demo.json @@ -17,8 +17,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/api-ai.json b/apps/www/public/r/styles/default/api-ai.json index 2296e52502..a54da9eaac 100644 --- a/apps/www/public/r/styles/default/api-ai.json +++ b/apps/www/public/r/styles/default/api-ai.json @@ -6,20 +6,20 @@ "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", + "path": "app/api/ai/command/route.ts", "target": "app/api/ai/command/route.ts", - "type": "registry:page" + "type": "registry:lib" }, { "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", + "path": "app/api/ai/copilot/route.ts", "target": "app/api/ai/copilot/route.ts", - "type": "registry:page" + "type": "registry:lib" } ], "name": "api-ai", "registryDependencies": [ "use-chat" ], - "type": "registry:component" + "type": "registry:lib" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/api-uploadthing.json b/apps/www/public/r/styles/default/api-uploadthing.json index 7e021a2c51..a58eea3a4b 100644 --- a/apps/www/public/r/styles/default/api-uploadthing.json +++ b/apps/www/public/r/styles/default/api-uploadthing.json @@ -4,16 +4,13 @@ ], "files": [ { - "content": "import type { FileRouter } from 'uploadthing/next';\n\nimport { createRouteHandler, createUploadthing } from 'uploadthing/next';\n\nconst f = createUploadthing();\n\n// FileRouter for your app, can contain multiple FileRoutes\nconst ourFileRouter = {\n // Define as many FileRoutes as you like, each with a unique routeSlug\n imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio'])\n // Set permissions and file types for this FileRoute\n // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/require-await\n .middleware(async ({ req }) => {\n // This code runs on your server before upload\n\n // Whatever is returned here is accessible in onUploadComplete as `metadata`\n return {};\n })\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n .onUploadComplete(({ file, metadata }) => {\n // This code RUNS ON YOUR SERVER after upload\n\n // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback\n return { file };\n }),\n} satisfies FileRouter;\n\nexport type OurFileRouter = typeof ourFileRouter;\n\n// Export routes for Next App Router\nexport const { GET, POST } = createRouteHandler({\n router: ourFileRouter,\n\n // Apply an (optional) custom config:\n // config: { ... },\n});\n", - "path": "components/api/uploadthing/route.ts", + "content": "import type { FileRouter } from 'uploadthing/next';\n\nimport { createRouteHandler, createUploadthing } from 'uploadthing/next';\n\nconst f = createUploadthing();\n\nconst ourFileRouter = {\n editorUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio'])\n .middleware(() => {\n return {};\n })\n .onUploadComplete(({ file }) => {\n return { file };\n }),\n} satisfies FileRouter;\n\nexport type OurFileRouter = typeof ourFileRouter;\n\nexport const { GET, POST } = createRouteHandler({\n router: ourFileRouter,\n});\n", + "path": "app/api/uploadthing/route.ts", "target": "app/api/uploadthing/route.ts", - "type": "registry:page" + "type": "registry:lib" } ], "name": "api-uploadthing", - "registryDependencies": [ - "media-placeholder-element", - "uploadthing" - ], - "type": "registry:component" + "registryDependencies": [], + "type": "registry:lib" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/autoformat-demo.json b/apps/www/public/r/styles/default/autoformat-demo.json index 9936e1e2e1..1ee7314776 100644 --- a/apps/www/public/r/styles/default/autoformat-demo.json +++ b/apps/www/public/r/styles/default/autoformat-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/autoformat.json b/apps/www/public/r/styles/default/autoformat.json deleted file mode 100644 index 0eab1c001f..0000000000 --- a/apps/www/public/r/styles/default/autoformat.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "doc": { - "description": "Apply formatting automatically using shortcodes.", - "title": "Autoformat" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport type { AutoformatRule } from '@udecode/plate-autoformat';\nimport type { SlateEditor } from '@udecode/plate-common';\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 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 { TogglePlugin, openNextToggles } from '@udecode/plate-toggle/react';\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 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 type: HEADING_KEYS.h1,\n },\n {\n match: '## ',\n mode: 'block',\n type: HEADING_KEYS.h2,\n },\n {\n match: '### ',\n mode: 'block',\n type: HEADING_KEYS.h3,\n },\n {\n match: '#### ',\n mode: 'block',\n type: HEADING_KEYS.h4,\n },\n {\n match: '##### ',\n mode: 'block',\n type: HEADING_KEYS.h5,\n },\n {\n match: '###### ',\n mode: 'block',\n type: HEADING_KEYS.h6,\n },\n {\n match: '> ',\n mode: 'block',\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 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 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 ...autoformatIndentLists,\n ],\n },\n});\n", - "path": "components/editor/plugins/autoformat-plugin.ts", - "target": "components/autoformat-plugin.ts", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const autoformatValue: any = (\n \n Autoformat\n \n Empower your writing experience by enabling autoformatting features. Add\n Markdown-like shortcuts that automatically apply formatting as you type.\n \n While typing, try these mark rules:\n \n Type ** or __ on either side of\n your text to add **bold* mark.\n \n \n Type * or _ on either side of your\n text to add *italic mark.\n \n\n \n Type ` on either side of your text to add `inline code\n mark.\n \n\n \n Type ~~ on either side of your text to add\n ~~strikethrough~ mark.\n \n \n Note that nothing happens when there is a character before, try on:*bold\n \n \n We even support smart quotes, try typing{' '}\n \"hello\" 'world'.\n \n\n \n At the beginning of any new block or existing block, try these (block\n rules):\n \n\n \n Type *, - or +\n followed by space to create a bulleted list.\n \n \n Type 1. or 1) followed by{' '}\n space\n to create a numbered list.\n \n \n Type [],or [x]\n followed by space to create a todo list.\n \n \n Type > followed by space to\n create a block quote.\n \n \n Type ``` to create a code block.\n \n \n Type --- to create a horizontal rule.\n \n\n \n Type # followed by space to create\n an H1 heading.\n \n \n Type ### followed by space to\n create an H3 sub-heading.\n \n \n Type #### followed by space to\n create an H4 sub-heading.\n \n \n Type ##### followed by space to\n create an H5 sub-heading.\n \n \n Type ###### followed by space to\n create an H6 sub-heading.\n \n \n);\n", - "path": "example/values/autoformat-value.tsx", - "target": "components/autoformat-value.tsx", - "type": "registry:example" - } - ], - "name": "autoformat", - "type": "registry:example" -} \ 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 4f0c016636..f4d49778a3 100644 --- a/apps/www/public/r/styles/default/basic-elements-demo.json +++ b/apps/www/public/r/styles/default/basic-elements-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 02ca41da07..3318114d98 100644 --- a/apps/www/public/r/styles/default/basic-marks-demo.json +++ b/apps/www/public/r/styles/default/basic-marks-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 d2b6620719..0e91c0718f 100644 --- a/apps/www/public/r/styles/default/basic-nodes-demo.json +++ b/apps/www/public/r/styles/default/basic-nodes-demo.json @@ -39,8 +39,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { 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 d630f2a336..990191ffb6 100644 --- a/apps/www/public/r/styles/default/block-menu-demo.json +++ b/apps/www/public/r/styles/default/block-menu-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 3333eeb22f..1329bd4552 100644 --- a/apps/www/public/r/styles/default/block-selection-demo.json +++ b/apps/www/public/r/styles/default/block-selection-demo.json @@ -17,8 +17,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/column-demo.json b/apps/www/public/r/styles/default/column-demo.json index c0d007e8f7..8ca808202c 100644 --- a/apps/www/public/r/styles/default/column-demo.json +++ b/apps/www/public/r/styles/default/column-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 deleted file mode 100644 index 1d4759a99b..0000000000 --- a/apps/www/public/r/styles/default/comment-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Collaborative commenting system." - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - } - ], - "name": "comment-demo", - "registryDependencies": [], - "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 index 9ec5796c42..ca364c930c 100644 --- a/apps/www/public/r/styles/default/comments-demo.json +++ b/apps/www/public/r/styles/default/comments-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/copilot-demo.json b/apps/www/public/r/styles/default/copilot-demo.json index 8132b3c578..4c9bc6b850 100644 --- a/apps/www/public/r/styles/default/copilot-demo.json +++ b/apps/www/public/r/styles/default/copilot-demo.json @@ -27,8 +27,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/csv-demo.json b/apps/www/public/r/styles/default/csv-demo.json index 259fc1bc93..755b7f9298 100644 --- a/apps/www/public/r/styles/default/csv-demo.json +++ b/apps/www/public/r/styles/default/csv-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/cursor-overlay-demo.json b/apps/www/public/r/styles/default/cursor-overlay-demo.json index 43bb0ada6f..38165669f5 100644 --- a/apps/www/public/r/styles/default/cursor-overlay-demo.json +++ b/apps/www/public/r/styles/default/cursor-overlay-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/date-demo.json b/apps/www/public/r/styles/default/date-demo.json index 0a9ae1c54c..0ab3ed4fab 100644 --- a/apps/www/public/r/styles/default/date-demo.json +++ b/apps/www/public/r/styles/default/date-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/delete-plugins.json b/apps/www/public/r/styles/default/delete-plugins.json index 1b89d722e3..dedeb6de51 100644 --- a/apps/www/public/r/styles/default/delete-plugins.json +++ b/apps/www/public/r/styles/default/delete-plugins.json @@ -6,7 +6,7 @@ ], "files": [ { - "content": "'use client';\n\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\n\nexport const deletePlugins = [\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [\n ImagePlugin.key,\n MediaEmbedPlugin.key,\n HorizontalRulePlugin.key,\n ],\n },\n },\n }),\n DeletePlugin,\n] as const;\n", + "content": "'use client';\n\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\n\nexport const deletePlugins = [\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [\n ImagePlugin.key,\n VideoPlugin.key,\n AudioPlugin.key,\n FilePlugin.key,\n MediaEmbedPlugin.key,\n HorizontalRulePlugin.key,\n ],\n },\n },\n }),\n DeletePlugin,\n] as const;\n", "path": "components/editor/plugins/delete-plugins.ts", "target": "components/editor/plugins/delete-plugins.ts", "type": "registry:component" diff --git a/apps/www/public/r/styles/default/demo.json b/apps/www/public/r/styles/default/demo.json index 0fec89281c..e24c08aa73 100644 --- a/apps/www/public/r/styles/default/demo.json +++ b/apps/www/public/r/styles/default/demo.json @@ -8,8 +8,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/deserialize-csv-demo.json b/apps/www/public/r/styles/default/deserialize-csv-demo.json deleted file mode 100644 index 6ac376a98b..0000000000 --- a/apps/www/public/r/styles/default/deserialize-csv-demo.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "doc": { - "description": "Copy paste from CSV to Slate.", - "title": "Serializing CSV" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeCsvValue: any = (\n \n CSV\n Copy and paste CSV content into a table.\n \n);\n", - "path": "example/values/deserialize-csv-value.tsx", - "target": "components/deserialize-csv-value.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\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\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n value?: Value;\n } = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\n\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\n\nimport { aiPlugins } from './ai-plugins';\nimport { alignPlugin } from './align-plugin';\nimport { autoformatPlugin } from './autoformat-plugin';\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockMenuPlugins } from './block-menu-plugins';\nimport { commentsPlugin } from './comments-plugin';\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nimport { deletePlugins } from './delete-plugins';\nimport { dndPlugins } from './dnd-plugins';\nimport { exitBreakPlugin } from './exit-break-plugin';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { lineHeightPlugin } from './line-height-plugin';\nimport { linkPlugin } from './link-plugin';\nimport { mediaPlugins } from './media-plugins';\nimport { mentionPlugin } from './mention-plugin';\nimport { resetBlockTypePlugin } from './reset-block-type-plugin';\nimport { softBreakPlugin } from './soft-break-plugin';\nimport { tablePlugin } from './table-plugin';\nimport { tocPlugin } from './toc-plugin';\n\nexport const viewPlugins = [\n ...basicNodesPlugins,\n HorizontalRulePlugin,\n linkPlugin,\n DatePlugin,\n mentionPlugin,\n tablePlugin,\n TogglePlugin,\n tocPlugin,\n ...mediaPlugins,\n InlineEquationPlugin,\n EquationPlugin,\n CalloutPlugin,\n ColumnPlugin,\n\n // Marks\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n alignPlugin,\n ...indentListPlugins,\n lineHeightPlugin,\n\n // Collaboration\n commentsPlugin,\n] as const;\n\nexport const editorPlugins = [\n // AI\n ...aiPlugins,\n\n // Nodes\n ...viewPlugins,\n\n // Functionality\n SlashPlugin,\n autoformatPlugin,\n cursorOverlayPlugin,\n ...blockMenuPlugins,\n ...dndPlugins,\n EmojiPlugin,\n exitBreakPlugin,\n resetBlockTypePlugin,\n ...deletePlugins,\n softBreakPlugin,\n TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // UI\n FixedToolbarPlugin,\n FloatingToolbarPlugin,\n];\n", - "path": "components/editor/plugins/editor-plugins.tsx", - "target": "components/editor-plugins.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-csv-demo", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/deserialize-csv.json b/apps/www/public/r/styles/default/deserialize-csv.json deleted file mode 100644 index 0a1432d433..0000000000 --- a/apps/www/public/r/styles/default/deserialize-csv.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "doc": { - "description": "Copy paste from CSV to Slate.", - "title": "Serializing CSV" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeCsvValue: any = (\n \n CSV\n Copy and paste CSV content into a table.\n \n);\n", - "path": "example/values/deserialize-csv-value.tsx", - "target": "components/deserialize-csv-value.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-csv", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/deserialize-docx-demo.json b/apps/www/public/r/styles/default/deserialize-docx-demo.json deleted file mode 100644 index b8203e1b52..0000000000 --- a/apps/www/public/r/styles/default/deserialize-docx-demo.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "doc": { - "description": "Copy paste from DOCX to Slate.", - "title": "Serializing Docx" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeDocxValue: any = (\n \n Docx\n \n Easily import content from Microsoft Word documents by simply copying and\n pasting the Docx content into the editor.\n \n \n);\n", - "path": "example/values/deserialize-docx-value.tsx", - "target": "components/deserialize-docx-value.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\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\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n value?: Value;\n } = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\n\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\n\nimport { aiPlugins } from './ai-plugins';\nimport { alignPlugin } from './align-plugin';\nimport { autoformatPlugin } from './autoformat-plugin';\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockMenuPlugins } from './block-menu-plugins';\nimport { commentsPlugin } from './comments-plugin';\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nimport { deletePlugins } from './delete-plugins';\nimport { dndPlugins } from './dnd-plugins';\nimport { exitBreakPlugin } from './exit-break-plugin';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { lineHeightPlugin } from './line-height-plugin';\nimport { linkPlugin } from './link-plugin';\nimport { mediaPlugins } from './media-plugins';\nimport { mentionPlugin } from './mention-plugin';\nimport { resetBlockTypePlugin } from './reset-block-type-plugin';\nimport { softBreakPlugin } from './soft-break-plugin';\nimport { tablePlugin } from './table-plugin';\nimport { tocPlugin } from './toc-plugin';\n\nexport const viewPlugins = [\n ...basicNodesPlugins,\n HorizontalRulePlugin,\n linkPlugin,\n DatePlugin,\n mentionPlugin,\n tablePlugin,\n TogglePlugin,\n tocPlugin,\n ...mediaPlugins,\n InlineEquationPlugin,\n EquationPlugin,\n CalloutPlugin,\n ColumnPlugin,\n\n // Marks\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n alignPlugin,\n ...indentListPlugins,\n lineHeightPlugin,\n\n // Collaboration\n commentsPlugin,\n] as const;\n\nexport const editorPlugins = [\n // AI\n ...aiPlugins,\n\n // Nodes\n ...viewPlugins,\n\n // Functionality\n SlashPlugin,\n autoformatPlugin,\n cursorOverlayPlugin,\n ...blockMenuPlugins,\n ...dndPlugins,\n EmojiPlugin,\n exitBreakPlugin,\n resetBlockTypePlugin,\n ...deletePlugins,\n softBreakPlugin,\n TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // UI\n FixedToolbarPlugin,\n FloatingToolbarPlugin,\n];\n", - "path": "components/editor/plugins/editor-plugins.tsx", - "target": "components/editor-plugins.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-docx-demo", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/deserialize-docx.json b/apps/www/public/r/styles/default/deserialize-docx.json deleted file mode 100644 index 06679796b9..0000000000 --- a/apps/www/public/r/styles/default/deserialize-docx.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "doc": { - "description": "Copy paste from DOCX to Slate.", - "title": "Serializing Docx" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeDocxValue: any = (\n \n Docx\n \n Easily import content from Microsoft Word documents by simply copying and\n pasting the Docx content into the editor.\n \n \n);\n", - "path": "example/values/deserialize-docx-value.tsx", - "target": "components/deserialize-docx-value.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-docx", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/deserialize-html-demo.json b/apps/www/public/r/styles/default/deserialize-html-demo.json deleted file mode 100644 index e855614ef2..0000000000 --- a/apps/www/public/r/styles/default/deserialize-html-demo.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "doc": { - "description": "Copy paste from HTML to Slate.", - "title": "Serializing HTML" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeHtmlValue: any = (\n \n HTML\n \n By default, when you paste content into the Slate editor, it will utilize\n the clipboard's 'text/plain'\n data. While this is suitable for certain scenarios, there are times when\n you want users to be able to paste content while preserving its\n formatting. To achieve this, your editor should be capable of handling{' '}\n 'text/html'\n data.\n \n \n To experience the seamless preservation of formatting, simply copy and\n paste rendered HTML rich text content (not the source code) from another\n website into this editor. You'll notice that the formatting of the pasted\n content is maintained.\n \n \n);\n", - "path": "example/values/deserialize-html-value.tsx", - "target": "components/deserialize-html-value.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\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\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n value?: Value;\n } = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\n\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\n\nimport { aiPlugins } from './ai-plugins';\nimport { alignPlugin } from './align-plugin';\nimport { autoformatPlugin } from './autoformat-plugin';\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockMenuPlugins } from './block-menu-plugins';\nimport { commentsPlugin } from './comments-plugin';\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nimport { deletePlugins } from './delete-plugins';\nimport { dndPlugins } from './dnd-plugins';\nimport { exitBreakPlugin } from './exit-break-plugin';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { lineHeightPlugin } from './line-height-plugin';\nimport { linkPlugin } from './link-plugin';\nimport { mediaPlugins } from './media-plugins';\nimport { mentionPlugin } from './mention-plugin';\nimport { resetBlockTypePlugin } from './reset-block-type-plugin';\nimport { softBreakPlugin } from './soft-break-plugin';\nimport { tablePlugin } from './table-plugin';\nimport { tocPlugin } from './toc-plugin';\n\nexport const viewPlugins = [\n ...basicNodesPlugins,\n HorizontalRulePlugin,\n linkPlugin,\n DatePlugin,\n mentionPlugin,\n tablePlugin,\n TogglePlugin,\n tocPlugin,\n ...mediaPlugins,\n InlineEquationPlugin,\n EquationPlugin,\n CalloutPlugin,\n ColumnPlugin,\n\n // Marks\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n alignPlugin,\n ...indentListPlugins,\n lineHeightPlugin,\n\n // Collaboration\n commentsPlugin,\n] as const;\n\nexport const editorPlugins = [\n // AI\n ...aiPlugins,\n\n // Nodes\n ...viewPlugins,\n\n // Functionality\n SlashPlugin,\n autoformatPlugin,\n cursorOverlayPlugin,\n ...blockMenuPlugins,\n ...dndPlugins,\n EmojiPlugin,\n exitBreakPlugin,\n resetBlockTypePlugin,\n ...deletePlugins,\n softBreakPlugin,\n TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // UI\n FixedToolbarPlugin,\n FloatingToolbarPlugin,\n];\n", - "path": "components/editor/plugins/editor-plugins.tsx", - "target": "components/editor-plugins.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-html-demo", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/deserialize-html.json b/apps/www/public/r/styles/default/deserialize-html.json deleted file mode 100644 index f6b6e59ef9..0000000000 --- a/apps/www/public/r/styles/default/deserialize-html.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "doc": { - "description": "Copy paste from HTML to Slate.", - "title": "HTML Parser" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeHtmlValue: any = (\n \n HTML\n \n By default, when you paste content into the Slate editor, it will utilize\n the clipboard's 'text/plain'\n data. While this is suitable for certain scenarios, there are times when\n you want users to be able to paste content while preserving its\n formatting. To achieve this, your editor should be capable of handling{' '}\n 'text/html'\n data.\n \n \n To experience the seamless preservation of formatting, simply copy and\n paste rendered HTML rich text content (not the source code) from another\n website into this editor. You'll notice that the formatting of the pasted\n content is maintained.\n \n \n);\n", - "path": "example/values/deserialize-html-value.tsx", - "target": "components/deserialize-html-value.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-html", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/deserialize-md-demo.json b/apps/www/public/r/styles/default/deserialize-md-demo.json deleted file mode 100644 index f1a4503f0c..0000000000 --- a/apps/www/public/r/styles/default/deserialize-md-demo.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "doc": { - "description": "Copy paste from Markdown to Slate.", - "title": "Serializing Markdown" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeMdValue: any = (\n \n Markdown\n \n Copy and paste Markdown content from popular Markdown editors like{' '}\n markdown-it.github.io/ into\n the editor for easy conversion and editing.\n \n \n);\n", - "path": "example/values/deserialize-md-value.tsx", - "target": "components/deserialize-md-value.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\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\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n value?: Value;\n } = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\n\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\n\nimport { aiPlugins } from './ai-plugins';\nimport { alignPlugin } from './align-plugin';\nimport { autoformatPlugin } from './autoformat-plugin';\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockMenuPlugins } from './block-menu-plugins';\nimport { commentsPlugin } from './comments-plugin';\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nimport { deletePlugins } from './delete-plugins';\nimport { dndPlugins } from './dnd-plugins';\nimport { exitBreakPlugin } from './exit-break-plugin';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { lineHeightPlugin } from './line-height-plugin';\nimport { linkPlugin } from './link-plugin';\nimport { mediaPlugins } from './media-plugins';\nimport { mentionPlugin } from './mention-plugin';\nimport { resetBlockTypePlugin } from './reset-block-type-plugin';\nimport { softBreakPlugin } from './soft-break-plugin';\nimport { tablePlugin } from './table-plugin';\nimport { tocPlugin } from './toc-plugin';\n\nexport const viewPlugins = [\n ...basicNodesPlugins,\n HorizontalRulePlugin,\n linkPlugin,\n DatePlugin,\n mentionPlugin,\n tablePlugin,\n TogglePlugin,\n tocPlugin,\n ...mediaPlugins,\n InlineEquationPlugin,\n EquationPlugin,\n CalloutPlugin,\n ColumnPlugin,\n\n // Marks\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n alignPlugin,\n ...indentListPlugins,\n lineHeightPlugin,\n\n // Collaboration\n commentsPlugin,\n] as const;\n\nexport const editorPlugins = [\n // AI\n ...aiPlugins,\n\n // Nodes\n ...viewPlugins,\n\n // Functionality\n SlashPlugin,\n autoformatPlugin,\n cursorOverlayPlugin,\n ...blockMenuPlugins,\n ...dndPlugins,\n EmojiPlugin,\n exitBreakPlugin,\n resetBlockTypePlugin,\n ...deletePlugins,\n softBreakPlugin,\n TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n JuicePlugin,\n\n // UI\n FixedToolbarPlugin,\n FloatingToolbarPlugin,\n];\n", - "path": "components/editor/plugins/editor-plugins.tsx", - "target": "components/editor-plugins.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-md-demo", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/deserialize-md.json b/apps/www/public/r/styles/default/deserialize-md.json deleted file mode 100644 index d6ddca0abe..0000000000 --- a/apps/www/public/r/styles/default/deserialize-md.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "doc": { - "description": "Copy paste from Markdown to Slate.", - "title": "Serializing Markdown" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const deserializeMdValue: any = (\n \n Markdown\n \n Copy and paste Markdown content from popular Markdown editors like{' '}\n markdown-it.github.io/ into\n the editor for easy conversion and editing.\n \n \n);\n", - "path": "example/values/deserialize-md-value.tsx", - "target": "components/deserialize-md-value.tsx", - "type": "registry:example" - } - ], - "name": "deserialize-md", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/dnd-demo.json b/apps/www/public/r/styles/default/dnd-demo.json index e99ea5ad72..300a262e51 100644 --- a/apps/www/public/r/styles/default/dnd-demo.json +++ b/apps/www/public/r/styles/default/dnd-demo.json @@ -24,8 +24,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/docx-demo.json b/apps/www/public/r/styles/default/docx-demo.json index 752fcb8d48..aaac74b57b 100644 --- a/apps/www/public/r/styles/default/docx-demo.json +++ b/apps/www/public/r/styles/default/docx-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/editor-ai-chat.json b/apps/www/public/r/styles/default/editor-ai-chat.json deleted file mode 100644 index a7bcc1410f..0000000000 --- a/apps/www/public/r/styles/default/editor-ai-chat.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "title": "AI Chat" - }, - "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 { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { Editor } from '@/components/plate-ui/editor';\n\nexport default function EditorDefault() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin, FloatingToolbarPlugin],\n });\n\n return (\n \n \n \n );\n}\n", - "path": "example/editor-ai-chat.tsx", - "target": "components/editor-ai-chat.tsx", - "type": "registry:example" - } - ], - "name": "editor-ai-chat", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-ai.json b/apps/www/public/r/styles/default/editor-ai.json index d268a91200..64039d6cab 100644 --- a/apps/www/public/r/styles/default/editor-ai.json +++ b/apps/www/public/r/styles/default/editor-ai.json @@ -26,27 +26,34 @@ "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", + "content": "import { Toaster } from 'sonner';\n\nimport { PlateEditor } from '@/components/editor/plate-editor';\nimport { SettingsProvider } from '@/components/editor/settings';\n\nexport default function Page() {\n return (\n
\n \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 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 { 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 \n \n );\n}\n", + "content": "'use client';\n\nimport React 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/settings';\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 \n \n );\n}\n", "path": "block/editor-ai/components/editor/plate-editor.tsx", "target": "components/editor/plate-editor.tsx", "type": "registry:component" }, { - "content": "import { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { 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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-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 [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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [MentionPlugin.key]: MentionElement,\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 ...copilotPlugins,\n ...editorPlugins,\n FixedToolbarPlugin,\n FloatingToolbarPlugin,\n ],\n value: [\n {\n children: [{ text: 'Playground' }],\n type: 'h1',\n },\n {\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", + "content": "import { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { copilotPlugins } from '@/components/editor/plugins/copilot-plugins';\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { 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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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 [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [ExcalidrawPlugin.key]: ExcalidrawElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n })\n ),\n },\n plugins: [\n ...copilotPlugins,\n ...editorPlugins,\n FixedToolbarPlugin,\n FloatingToolbarPlugin,\n ],\n value: [\n {\n children: [{ text: 'Playground' }],\n type: 'h1',\n },\n {\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.ts", + "target": "components/editor/use-create-editor.ts", + "type": "registry:component" + }, + { + "content": "'use client';\n\nimport { type ReactNode, createContext, useContext, useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { CopilotPlugin } from '@udecode/plate-ai/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\nimport {\n Check,\n ChevronsUpDown,\n ExternalLinkIcon,\n Eye,\n EyeOff,\n Settings,\n Wand2Icon,\n} from 'lucide-react';\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\ninterface Model {\n label: string;\n value: string;\n}\n\ninterface SettingsContextType {\n keys: Record;\n model: Model;\n setKey: (service: string, 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 SettingsContext = createContext(\n undefined\n);\n\nexport function SettingsProvider({ children }: { children: ReactNode }) {\n const [keys, setKeys] = useState({\n openai: '',\n uploadthing: '',\n });\n const [model, setModel] = useState(models[0]);\n\n const setKey = (service: string, key: string) => {\n setKeys((prev) => ({ ...prev, [service]: key }));\n };\n\n return (\n \n {children}\n \n );\n}\n\nexport function useSettings() {\n const context = useContext(SettingsContext);\n\n return (\n context ?? {\n keys: {\n openai: '',\n uploadthing: '',\n },\n model: models[0],\n setKey: () => {},\n setModel: () => {},\n }\n );\n}\n\nexport function SettingsDialog() {\n const { keys, model, setKey, setModel } = useSettings();\n const [tempKeys, setTempKeys] = useState(keys);\n const [showKey, setShowKey] = useState>({});\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 Object.entries(tempKeys).forEach(([service, key]) => {\n setKey(service, key);\n });\n setOpen(false);\n\n // Update AI options if needed\n const completeOptions = getOptions().completeOptions ?? {};\n setOption('completeOptions', {\n ...completeOptions,\n body: {\n ...completeOptions.body,\n apiKey: tempKeys.openai,\n model: model.value,\n },\n });\n };\n\n const toggleKeyVisibility = (key: string) => {\n setShowKey((prev) => ({ ...prev, [key]: !prev[key] }));\n };\n\n const renderApiKeyInput = (service: string, label: string) => (\n
\n
\n \n {label}\n \n \n \n \n Get {label}\n \n \n
\n\n \n setTempKeys((prev) => ({ ...prev, [service]: e.target.value }))\n }\n placeholder=\"\"\n data-1p-ignore\n type={showKey[service] ? 'text' : 'password'}\n />\n toggleKeyVisibility(service)}\n type=\"button\"\n >\n {showKey[service] ? (\n \n ) : (\n \n )}\n \n {showKey[service] ? 'Hide' : 'Show'} {label}\n \n \n
\n );\n\n return (\n \n \n \n
\n \n \n Settings\n \n
\n \n \n \n \n Settings\n \n Configure your API keys and preferences.\n \n \n\n
\n {/* AI Settings Group */}\n
\n
\n
\n \n
\n

AI

\n
\n\n
\n {renderApiKeyInput('openai', 'OpenAI API key')}\n\n
\n \n Model\n \n \n \n \n {model.label}\n \n \n \n \n \n \n No model found.\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 {/* Upload Settings Group */}\n {/*
\n
\n
\n \n
\n

Upload

\n
\n\n
\n {renderApiKeyInput('uploadthing', 'Uploadthing API key')}\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/settings.tsx", + "target": "components/editor/settings.tsx", "type": "registry:component" } ], "name": "editor-ai", "registryDependencies": [ "api-ai", + "api-uploadthing", "plate-types", "editor-plugins", "copilot-plugins", @@ -77,7 +84,11 @@ "image-element", "kbd-leaf", "link-element", + "media-audio-element", "media-embed-element", + "media-file-element", + "media-placeholder-element", + "media-video-element", "mention-element", "mention-input-element", "paragraph-element", diff --git a/apps/www/public/r/styles/default/editor-basic.json b/apps/www/public/r/styles/default/editor-basic.json index 3177538874..a5aa3af483 100644 --- a/apps/www/public/r/styles/default/editor-basic.json +++ b/apps/www/public/r/styles/default/editor-basic.json @@ -19,8 +19,8 @@ }, { "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 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", + "path": "block/editor-basic/components/editor/use-create-editor.ts", + "target": "components/editor/use-create-editor.ts", "type": "registry:component" } ], diff --git a/apps/www/public/r/styles/default/emoji-demo.json b/apps/www/public/r/styles/default/emoji-demo.json index a997d4abff..8c77ee7087 100644 --- a/apps/www/public/r/styles/default/emoji-demo.json +++ b/apps/www/public/r/styles/default/emoji-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 fab983a452..9b125ef983 100644 --- a/apps/www/public/r/styles/default/excalidraw-demo.json +++ b/apps/www/public/r/styles/default/excalidraw-demo.json @@ -14,8 +14,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/exit-break-demo.json b/apps/www/public/r/styles/default/exit-break-demo.json index 8cd5390be4..f4e3c54e7f 100644 --- a/apps/www/public/r/styles/default/exit-break-demo.json +++ b/apps/www/public/r/styles/default/exit-break-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/exit-break.json b/apps/www/public/r/styles/default/exit-break.json deleted file mode 100644 index ea566d5de0..0000000000 --- a/apps/www/public/r/styles/default/exit-break.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "doc": { - "description": "Exit a large block using a shortcut.", - "title": "Exit Break" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport { ExitBreakPlugin } from '@udecode/plate-break/react';\nimport { HEADING_LEVELS } from '@udecode/plate-heading';\n\nexport const exitBreakPlugin = 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", - "path": "components/editor/plugins/exit-break-plugin.ts", - "target": "components/exit-break-plugin.ts", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\nimport { createTable } from './table-value';\n\njsx;\n\nexport const trailingBlockValue: any = (\n \n Trailing Block\n Always have a trailing paragraph at the end of your editor.\n \n);\n\nexport const exitBreakValue: any = (\n \n Exit Break\n \n Configure how exit breaks (line breaks between blocks) behave using simple\n rules:\n \n\n \n hotkey – Use hotkeys like ⌘⏎ to move the cursor to the next block\n \n \n query – Specify block types where exit breaks are allowed.\n \n \n before – Choose whether the cursor exits to the next or previous block\n \n\n \n And in the middle ⌘⏎ of a block.\n \n Exit breaks also work within nested blocks:\n {createTable()}\n \n);\n", - "path": "example/values/exit-break-value.tsx", - "target": "components/exit-break-value.tsx", - "type": "registry:example" - } - ], - "name": "exit-break", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/find-replace-demo.json b/apps/www/public/r/styles/default/find-replace-demo.json index 3e6839ed77..48de47711a 100644 --- a/apps/www/public/r/styles/default/find-replace-demo.json +++ b/apps/www/public/r/styles/default/find-replace-demo.json @@ -17,8 +17,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons-list.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons-list.json deleted file mode 100644 index c4cad79f68..0000000000 --- a/apps/www/public/r/styles/default/fixed-toolbar-buttons-list.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "dependencies": [ - "@udecode/plate-basic-marks", - "@udecode/plate-font", - "@udecode/plate-list", - "@udecode/plate-media" - ], - "files": [ - { - "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 {\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 { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { ListIndentToolbarButton } from './list-indent-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 { 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 FixedToolbarButtonsList() {\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", - "path": "plate-ui/fixed-toolbar-buttons-list.tsx", - "target": "components/plate-ui/fixed-toolbar-buttons-list.tsx", - "type": "registry:ui" - } - ], - "name": "fixed-toolbar-buttons-list", - "registryDependencies": [ - "toolbar", - "ai-toolbar-button", - "align-dropdown-menu", - "color-dropdown-menu", - "comment-toolbar-button", - "emoji-dropdown-menu", - "insert-dropdown-menu", - "line-height-dropdown-menu", - "list-indent-toolbar-button", - "link-toolbar-button", - "mark-toolbar-button", - "media-toolbar-button", - "mode-dropdown-menu", - "more-dropdown-menu", - "table-dropdown-menu", - "toggle-toolbar-button", - "turn-into-dropdown-menu" - ], - "type": "registry:ui" -} \ No newline at end of file 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 e30ad329fa..d16a60f4b5 100644 --- a/apps/www/public/r/styles/default/floating-toolbar-demo.json +++ b/apps/www/public/r/styles/default/floating-toolbar-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 f221fd2faf..d4a840ff9f 100644 --- a/apps/www/public/r/styles/default/font-demo.json +++ b/apps/www/public/r/styles/default/font-demo.json @@ -17,8 +17,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 e5faef95ca..3578406b43 100644 --- a/apps/www/public/r/styles/default/highlight-demo.json +++ b/apps/www/public/r/styles/default/highlight-demo.json @@ -14,8 +14,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 index 24aef6f000..eaeaba0ef3 100644 --- a/apps/www/public/r/styles/default/horizontal-rule-demo.json +++ b/apps/www/public/r/styles/default/horizontal-rule-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/hr-demo.json b/apps/www/public/r/styles/default/hr-demo.json deleted file mode 100644 index a2dffdea48..0000000000 --- a/apps/www/public/r/styles/default/hr-demo.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "doc": { - "description": "Horizontal rule insertion and styling.", - "title": "Horizontal Rule" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { DEMO_VALUES } from '@/registry/default/example/values/demo-values';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nexport default function Demo({ id }: { id: keyof typeof DEMO_VALUES }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - } - ], - "name": "hr-demo", - "registryDependencies": [], - "type": "registry:example" -} diff --git a/apps/www/public/r/styles/default/html-demo.json b/apps/www/public/r/styles/default/html-demo.json index 8a4c030f33..b39a8343bd 100644 --- a/apps/www/public/r/styles/default/html-demo.json +++ b/apps/www/public/r/styles/default/html-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/indent-demo.json b/apps/www/public/r/styles/default/indent-demo.json index af2d16858f..24738cbfa4 100644 --- a/apps/www/public/r/styles/default/indent-demo.json +++ b/apps/www/public/r/styles/default/indent-demo.json @@ -14,8 +14,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/indent-list-demo.json b/apps/www/public/r/styles/default/indent-list-demo.json index fe1991eae3..422efc7354 100644 --- a/apps/www/public/r/styles/default/indent-list-demo.json +++ b/apps/www/public/r/styles/default/indent-list-demo.json @@ -27,8 +27,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/kbd-demo.json b/apps/www/public/r/styles/default/kbd-demo.json index 5c345587a7..9a94f53af2 100644 --- a/apps/www/public/r/styles/default/kbd-demo.json +++ b/apps/www/public/r/styles/default/kbd-demo.json @@ -14,8 +14,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 a528f896e4..3c6633d973 100644 --- a/apps/www/public/r/styles/default/line-height-demo.json +++ b/apps/www/public/r/styles/default/line-height-demo.json @@ -17,8 +17,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 0efc5f4119..e081e7e9ac 100644 --- a/apps/www/public/r/styles/default/link-demo.json +++ b/apps/www/public/r/styles/default/link-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 abc8b40764..54c60db483 100644 --- a/apps/www/public/r/styles/default/list-demo.json +++ b/apps/www/public/r/styles/default/list-demo.json @@ -29,8 +29,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/markdown-demo.json b/apps/www/public/r/styles/default/markdown-demo.json index 75088c89c8..d0002c12bc 100644 --- a/apps/www/public/r/styles/default/markdown-demo.json +++ b/apps/www/public/r/styles/default/markdown-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 64a556b8a0..163e64ba09 100644 --- a/apps/www/public/r/styles/default/media-demo.json +++ b/apps/www/public/r/styles/default/media-demo.json @@ -17,8 +17,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/media-dropdown-menu.json b/apps/www/public/r/styles/default/media-dropdown-menu.json deleted file mode 100644 index d642808049..0000000000 --- a/apps/www/public/r/styles/default/media-dropdown-menu.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "dependencies": [ - "@udecode/plate-media" - ], - "doc": { - "description": "Toolbar button for inserting and managing media.", - "docs": [ - { - "route": "/docs/media", - "title": "Media" - } - ], - "examples": [ - "media-demo", - "upload-pro" - ] - }, - "files": [ - { - "content": "'use client';\n\nimport React, { useState } from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { useEditorPlugin } from '@udecode/plate-core/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport { focusEditor } from '@udecode/slate-react';\nimport {\n AudioLinesIcon,\n FileUpIcon,\n FilmIcon,\n ImageIcon,\n LinkIcon,\n} from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { MediaEmbedPopover } from './media-embed-popover';\nimport {\n ToolbarSplitButton,\n ToolbarSplitButtonPrimary,\n ToolbarSplitButtonSecondary,\n} from './toolbar';\n\nconst MEDIA_CONFIG: Record<\n string,\n {\n accept: string[];\n icon: React.ReactNode;\n tooltip: string;\n }\n> = {\n [AudioPlugin.key]: {\n accept: ['audio/*'],\n icon: ,\n tooltip: 'Audio',\n },\n [FilePlugin.key]: {\n accept: ['*'],\n icon: ,\n tooltip: 'File',\n },\n [ImagePlugin.key]: {\n accept: ['image/*'],\n icon: ,\n tooltip: 'Image',\n },\n [VideoPlugin.key]: {\n accept: ['video/*'],\n icon: ,\n tooltip: 'Video',\n },\n};\n\nexport function MediaDropdownMenu({\n children,\n nodeType,\n ...props\n}: DropdownMenuProps & { nodeType: string }) {\n const { editor } = useEditorPlugin(MediaEmbedPlugin);\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n const currentConfig = MEDIA_CONFIG[nodeType];\n const { openFilePicker } = useFilePicker({\n accept: currentConfig.accept,\n multiple: true,\n onFilesSelected: ({ plainFiles: updatedFiles }) => {\n (editor as any).tf.insert.media(updatedFiles);\n },\n });\n\n const openState = useOpenState();\n\n return (\n <>\n \n \n openFilePicker()}>\n {currentConfig.icon}\n \n\n \n \n \n \n\n \n \n openFilePicker()}\n hideIcon\n >\n
\n {currentConfig.icon}\n Upload from computer\n
\n \n {\n focusEditor(editor);\n setIsPopoverOpen(true);\n }}\n hideIcon\n >\n
\n \n Insert via URL\n
\n \n \n \n \n\n \n \n );\n}\n", - "path": "plate-ui/media-dropdown-menu.tsx", - "target": "components/plate-ui/media-dropdown-menu.tsx", - "type": "registry:ui" - } - ], - "name": "media-dropdown-menu", - "registryDependencies": [ - "toolbar" - ], - "type": "registry:ui" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/media-placeholder-element.json b/apps/www/public/r/styles/default/media-placeholder-element.json index 3d32431387..53ecedd10e 100644 --- a/apps/www/public/r/styles/default/media-placeholder-element.json +++ b/apps/www/public/r/styles/default/media-placeholder-element.json @@ -1,9 +1,7 @@ { "dependencies": [ "@udecode/plate-media", - "use-file-picker", - "@uploadthing/react@7.1.0", - "uploadthing@7.2.0" + "use-file-picker" ], "doc": { "description": "A placeholder for media upload progress indication.", @@ -23,22 +21,17 @@ }, "files": [ { - "content": "'use client';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { TPlaceholderElement } from '@udecode/plate-media';\n\nimport { cn } from '@udecode/cn';\nimport {\n insertNodes,\n removeNodes,\n withoutSavingHistory,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useEditorPlugin,\n withHOC,\n withRef,\n} from '@udecode/plate-common/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n PlaceholderPlugin,\n PlaceholderProvider,\n VideoPlugin,\n updateUploadHistory,\n} from '@udecode/plate-media/react';\nimport { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport { useUploadFile } from '@/lib/uploadthing';\n\nimport { PlateElement } from './plate-element';\nimport { Spinner } from './spinner';\n\nconst CONTENT: Record<\n string,\n {\n accept: string[];\n content: ReactNode;\n icon: ReactNode;\n }\n> = {\n [AudioPlugin.key]: {\n accept: ['audio/*'],\n content: 'Add an audio file',\n icon: ,\n },\n [FilePlugin.key]: {\n accept: ['*'],\n content: 'Add a file',\n icon: ,\n },\n [ImagePlugin.key]: {\n accept: ['image/*'],\n content: 'Add an image',\n icon: ,\n },\n [VideoPlugin.key]: {\n accept: ['video/*'],\n content: 'Add a video',\n icon: ,\n },\n};\n\nexport const MediaPlaceholderElement = withHOC(\n PlaceholderProvider,\n withRef(\n ({ children, className, editor, nodeProps, ...props }, ref) => {\n const element = props.element as TPlaceholderElement;\n\n const { api } = useEditorPlugin(PlaceholderPlugin);\n\n const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =\n useUploadFile('imageUploader');\n\n const loading = isUploading && uploadingFile;\n\n const currentContent = CONTENT[element.mediaType];\n\n const isImage = element.mediaType === ImagePlugin.key;\n\n const imageRef = useRef(null);\n\n const { openFilePicker } = useFilePicker({\n accept: currentContent.accept,\n multiple: true,\n onFilesSelected: ({ plainFiles: updatedFiles }) => {\n const firstFile = updatedFiles[0];\n const restFiles = updatedFiles.slice(1);\n\n replaceCurrentPlaceholder(firstFile);\n\n restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);\n },\n });\n\n const replaceCurrentPlaceholder = useCallback(\n (file: File) => {\n void uploadFile(file);\n api.placeholder.addUploadingFile(element.id as string, file);\n },\n [api.placeholder, element.id, uploadFile]\n );\n\n useEffect(() => {\n if (!uploadedFile) return;\n\n const path = findNodePath(editor, element);\n\n withoutSavingHistory(editor, () => {\n removeNodes(editor, { at: path });\n\n const node = {\n children: [{ text: '' }],\n initialHeight: imageRef.current?.height,\n initialWidth: imageRef.current?.width,\n isUpload: true,\n name: element.mediaType === FilePlugin.key ? uploadedFile.name : '',\n placeholderId: element.id as string,\n type: element.mediaType!,\n url: uploadedFile.url,\n };\n\n insertNodes(editor, node, { at: path });\n\n updateUploadHistory(editor, node);\n });\n\n api.placeholder.removeUploadingFile(element.id as string);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [uploadedFile, element.id]);\n\n // React dev mode will call useEffect twice\n const isReplaced = useRef(false);\n /** Paste and drop */\n useEffect(() => {\n if (isReplaced.current) return;\n\n isReplaced.current = true;\n const currentFiles = api.placeholder.getUploadingFile(\n element.id as string\n );\n\n if (!currentFiles) return;\n\n replaceCurrentPlaceholder(currentFiles);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isReplaced]);\n\n return (\n \n {(!loading || !isImage) && (\n !loading && openFilePicker()}\n contentEditable={false}\n >\n
\n {currentContent.icon}\n
\n
\n
\n {loading ? uploadingFile?.name : currentContent.content}\n
\n\n {loading && !isImage && (\n
\n
{formatBytes(uploadingFile?.size ?? 0)}
\n
–
\n
\n \n {progress ?? 0}%\n
\n
\n )}\n
\n
\n )}\n\n {isImage && loading && (\n \n )}\n\n {children}\n \n );\n }\n )\n);\n\nexport function ImageProgress({\n className,\n file,\n imageRef,\n progress = 0,\n}: {\n file: File;\n className?: string;\n imageRef?: React.RefObject;\n progress?: number;\n}) {\n const [objectUrl, setObjectUrl] = useState(null);\n\n useEffect(() => {\n const url = URL.createObjectURL(file);\n setObjectUrl(url);\n\n return () => {\n URL.revokeObjectURL(url);\n };\n }, [file]);\n\n if (!objectUrl) {\n return null;\n }\n\n return (\n
\n \n {progress < 100 && (\n
\n \n \n {Math.round(progress)}%\n \n
\n )}\n
\n );\n}\n\nexport function formatBytes(\n bytes: number,\n opts: {\n decimals?: number;\n sizeType?: 'accurate' | 'normal';\n } = {}\n) {\n const { decimals = 0, sizeType = 'normal' } = opts;\n\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];\n\n if (bytes === 0) return '0 Byte';\n\n const i = Math.floor(Math.log(bytes) / Math.log(1024));\n\n return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n sizeType === 'accurate'\n ? (accurateSizes[i] ?? 'Bytest')\n : (sizes[i] ?? 'Bytes')\n }`;\n}\n", + "content": "'use client';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { TPlaceholderElement } from '@udecode/plate-media';\n\nimport { cn } from '@udecode/cn';\nimport {\n insertNodes,\n removeNodes,\n withoutSavingHistory,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useEditorPlugin,\n withHOC,\n withRef,\n} from '@udecode/plate-common/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n PlaceholderPlugin,\n PlaceholderProvider,\n VideoPlugin,\n updateUploadHistory,\n} from '@udecode/plate-media/react';\nimport { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport { useUploadFile } from '@/lib/uploadthing';\n\nimport { PlateElement } from './plate-element';\nimport { Spinner } from './spinner';\n\nconst CONTENT: Record<\n string,\n {\n accept: string[];\n content: ReactNode;\n icon: ReactNode;\n }\n> = {\n [AudioPlugin.key]: {\n accept: ['audio/*'],\n content: 'Add an audio file',\n icon: ,\n },\n [FilePlugin.key]: {\n accept: ['*'],\n content: 'Add a file',\n icon: ,\n },\n [ImagePlugin.key]: {\n accept: ['image/*'],\n content: 'Add an image',\n icon: ,\n },\n [VideoPlugin.key]: {\n accept: ['video/*'],\n content: 'Add a video',\n icon: ,\n },\n};\n\nexport const MediaPlaceholderElement = withHOC(\n PlaceholderProvider,\n withRef(\n ({ children, className, editor, nodeProps, ...props }, ref) => {\n const element = props.element as TPlaceholderElement;\n\n const { api } = useEditorPlugin(PlaceholderPlugin);\n\n const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =\n useUploadFile();\n\n const loading = isUploading && uploadingFile;\n\n const currentContent = CONTENT[element.mediaType];\n\n const isImage = element.mediaType === ImagePlugin.key;\n\n const imageRef = useRef(null);\n\n const { openFilePicker } = useFilePicker({\n accept: currentContent.accept,\n multiple: true,\n onFilesSelected: ({ plainFiles: updatedFiles }) => {\n const firstFile = updatedFiles[0];\n const restFiles = updatedFiles.slice(1);\n\n replaceCurrentPlaceholder(firstFile);\n\n restFiles.length > 0 && (editor as any).tf.insert.media(restFiles);\n },\n });\n\n const replaceCurrentPlaceholder = useCallback(\n (file: File) => {\n void uploadFile(file);\n api.placeholder.addUploadingFile(element.id as string, file);\n },\n [api.placeholder, element.id, uploadFile]\n );\n\n useEffect(() => {\n if (!uploadedFile) return;\n\n const path = findNodePath(editor, element);\n\n withoutSavingHistory(editor, () => {\n removeNodes(editor, { at: path });\n\n const node = {\n children: [{ text: '' }],\n initialHeight: imageRef.current?.height,\n initialWidth: imageRef.current?.width,\n isUpload: true,\n name: element.mediaType === FilePlugin.key ? uploadedFile.name : '',\n placeholderId: element.id as string,\n type: element.mediaType!,\n url: uploadedFile.url,\n };\n\n insertNodes(editor, node, { at: path });\n\n updateUploadHistory(editor, node);\n });\n\n api.placeholder.removeUploadingFile(element.id as string);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [uploadedFile, element.id]);\n\n // React dev mode will call useEffect twice\n const isReplaced = useRef(false);\n\n /** Paste and drop */\n useEffect(() => {\n if (isReplaced.current) return;\n\n isReplaced.current = true;\n const currentFiles = api.placeholder.getUploadingFile(\n element.id as string\n );\n\n if (!currentFiles) return;\n\n replaceCurrentPlaceholder(currentFiles);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isReplaced]);\n\n return (\n \n {(!loading || !isImage) && (\n !loading && openFilePicker()}\n contentEditable={false}\n >\n
\n {currentContent.icon}\n
\n
\n
\n {loading ? uploadingFile?.name : currentContent.content}\n
\n\n {loading && !isImage && (\n
\n
{formatBytes(uploadingFile?.size ?? 0)}
\n
–
\n
\n \n {progress ?? 0}%\n
\n
\n )}\n
\n \n )}\n\n {isImage && loading && (\n \n )}\n\n {children}\n \n );\n }\n )\n);\n\nexport function ImageProgress({\n className,\n file,\n imageRef,\n progress = 0,\n}: {\n file: File;\n className?: string;\n imageRef?: React.RefObject;\n progress?: number;\n}) {\n const [objectUrl, setObjectUrl] = useState(null);\n\n useEffect(() => {\n const url = URL.createObjectURL(file);\n setObjectUrl(url);\n\n return () => {\n URL.revokeObjectURL(url);\n };\n }, [file]);\n\n if (!objectUrl) {\n return null;\n }\n\n return (\n
\n \n {progress < 100 && (\n
\n \n \n {Math.round(progress)}%\n \n
\n )}\n
\n );\n}\n\nexport function formatBytes(\n bytes: number,\n opts: {\n decimals?: number;\n sizeType?: 'accurate' | 'normal';\n } = {}\n) {\n const { decimals = 0, sizeType = 'normal' } = opts;\n\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];\n\n if (bytes === 0) return '0 Byte';\n\n const i = Math.floor(Math.log(bytes) / Math.log(1024));\n\n return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n sizeType === 'accurate'\n ? (accurateSizes[i] ?? 'Bytest')\n : (sizes[i] ?? 'Bytes')\n }`;\n}\n", "path": "plate-ui/media-placeholder-element.tsx", "target": "components/plate-ui/media-placeholder-element.tsx", "type": "registry:ui" - }, - { - "content": "import * as React from 'react';\n\nimport type { OurFileRouter } from '@/components/api/uploadthing/route';\nimport type {\n ClientUploadedFileData,\n UploadFilesOptions,\n} from 'uploadthing/types';\n\nimport { generateReactHelpers } from '@uploadthing/react';\nimport { isRedirectError } from 'next/dist/client/components/redirect';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\n\nexport interface UploadedFile extends ClientUploadedFileData {}\n\ninterface UseUploadFileProps\n extends Pick<\n UploadFilesOptions,\n 'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'\n > {\n onUploadComplete?: (file: UploadedFile) => void;\n onUploadError?: (error: unknown) => void;\n}\n\nexport function useUploadFile(\n endpoint: keyof OurFileRouter,\n { onUploadComplete, onUploadError, ...props }: UseUploadFileProps = {}\n) {\n const [uploadedFile, setUploadedFile] = React.useState();\n const [uploadingFile, setUploadingFile] = React.useState();\n const [progress, setProgress] = React.useState(0);\n const [isUploading, setIsUploading] = React.useState(false);\n\n async function uploadThing(file: File) {\n setIsUploading(true);\n setUploadingFile(file);\n\n try {\n const res = await uploadFiles(endpoint, {\n ...props,\n files: [file],\n onUploadProgress: ({ progress }) => {\n setProgress(Math.min(progress, 100));\n },\n });\n\n setUploadedFile(res[0]);\n\n onUploadComplete?.(res[0]);\n\n return uploadedFile;\n } catch (error) {\n const errorMessage = getErrorMessage(error);\n\n const message =\n errorMessage.length > 0\n ? errorMessage\n : 'Something went wrong, please try again later.';\n\n toast.error(message);\n\n onUploadError?.(error);\n\n // Mock upload for unauthenticated users\n // toast.info('User not logged in. Mocking upload process.');\n const mockUploadedFile = {\n key: 'mock-key-0',\n appUrl: `https://mock-app-url.com/${file.name}`,\n name: file.name,\n size: file.size,\n type: file.type,\n url: URL.createObjectURL(file),\n } as UploadedFile;\n\n // Simulate upload progress\n let progress = 0;\n\n const simulateProgress = async () => {\n while (progress < 100) {\n await new Promise((resolve) => setTimeout(resolve, 50));\n progress += 2;\n setProgress(Math.min(progress, 100));\n }\n };\n\n await simulateProgress();\n\n setUploadedFile(mockUploadedFile);\n\n return mockUploadedFile;\n } finally {\n setProgress(0);\n setIsUploading(false);\n setUploadingFile(undefined);\n }\n }\n\n return {\n isUploading,\n progress,\n uploadFile: uploadThing,\n uploadedFile,\n uploadingFile,\n };\n}\n\nexport const { uploadFiles, useUploadThing } =\n generateReactHelpers();\n\nexport function getErrorMessage(err: unknown) {\n const unknownError = 'Something went wrong, please try again later.';\n\n if (err instanceof z.ZodError) {\n const errors = err.issues.map((issue) => {\n return issue.message;\n });\n\n return errors.join('\\n');\n } else if (err instanceof Error) {\n return err.message;\n } else if (isRedirectError(err)) {\n throw err;\n } else {\n return unknownError;\n }\n}\n\nexport function showErrorToast(err: unknown) {\n const errorMessage = getErrorMessage(err);\n\n return toast.error(errorMessage);\n}\n", - "path": "lib/uploadthing.ts", - "target": "components/plate-ui/uploadthing.ts", - "type": "registry:ui" } ], "name": "media-placeholder-element", "registryDependencies": [ "plate-element", - "spinner" + "spinner", + "uploadthing" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/media-plugins.json b/apps/www/public/r/styles/default/media-plugins.json index e39edd6702..675f5bab98 100644 --- a/apps/www/public/r/styles/default/media-plugins.json +++ b/apps/www/public/r/styles/default/media-plugins.json @@ -5,7 +5,7 @@ ], "files": [ { - "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n ImagePlugin.extend({\n options: { disableUploadInsert: true },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n VideoPlugin,\n AudioPlugin,\n FilePlugin,\n CaptionPlugin.configure({\n options: { plugins: [ImagePlugin, MediaEmbedPlugin] },\n }),\n PlaceholderPlugin.configure({\n options: { disableEmptyPlaceholder: true },\n render: { afterEditable: MediaUploadToast },\n }),\n] as const;\n", + "content": "'use client';\n\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\n\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport { MediaUploadToast } from '@/components/plate-ui/media-upload-toast';\n\nexport const mediaPlugins = [\n ImagePlugin.extend({\n options: { disableUploadInsert: true },\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n VideoPlugin,\n AudioPlugin,\n FilePlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [\n ImagePlugin,\n VideoPlugin,\n AudioPlugin,\n FilePlugin,\n MediaEmbedPlugin,\n ],\n },\n }),\n PlaceholderPlugin.configure({\n options: { disableEmptyPlaceholder: true },\n render: { afterEditable: MediaUploadToast },\n }),\n] as const;\n", "path": "components/editor/plugins/media-plugins.tsx", "target": "components/editor/plugins/media-plugins.tsx", "type": "registry:component" diff --git a/apps/www/public/r/styles/default/media-upload-toast.json b/apps/www/public/r/styles/default/media-upload-toast.json index b09b2a22d6..b19dfef904 100644 --- a/apps/www/public/r/styles/default/media-upload-toast.json +++ b/apps/www/public/r/styles/default/media-upload-toast.json @@ -7,7 +7,7 @@ "description": "Show toast notifications for media uploads.", "docs": [ { - "route": "/docs/media-placeholder", + "route": "/docs/media", "title": "Media Placeholder" } ], diff --git a/apps/www/public/r/styles/default/mention-demo.json b/apps/www/public/r/styles/default/mention-demo.json index 8836dca8fe..6f865f6fb7 100644 --- a/apps/www/public/r/styles/default/mention-demo.json +++ b/apps/www/public/r/styles/default/mention-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 deleted file mode 100644 index 93fa139e77..0000000000 --- a/apps/www/public/r/styles/default/mode-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Editor mode switching." - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - } - ], - "name": "mode-demo", - "registryDependencies": [], - "type": "registry:example" -} diff --git a/apps/www/public/r/styles/default/placeholder-demo.json b/apps/www/public/r/styles/default/placeholder-demo.json deleted file mode 100644 index dca13b7565..0000000000 --- a/apps/www/public/r/styles/default/placeholder-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Placeholder text in empty blocks." - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - } - ], - "name": "placeholder-demo", - "registryDependencies": [], - "type": "registry:example" -} diff --git a/apps/www/public/r/styles/default/playground-demo.json b/apps/www/public/r/styles/default/playground-demo.json index 424d945251..c080a3430e 100644 --- a/apps/www/public/r/styles/default/playground-demo.json +++ b/apps/www/public/r/styles/default/playground-demo.json @@ -8,8 +8,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/preview-md-demo.json b/apps/www/public/r/styles/default/preview-md-demo.json deleted file mode 100644 index 73be89151d..0000000000 --- a/apps/www/public/r/styles/default/preview-md-demo.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "files": [ - { - "content": "'use client';\n\n/* eslint-disable prettier/prettier */\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { BasicElementsPlugin } from \"@udecode/plate-basic-elements/react\";\nimport { BasicMarksPlugin } from \"@udecode/plate-basic-marks/react\";\nimport {\n type Decorate,\n type TText, createSlatePlugin, isText\n} from \"@udecode/plate-common\";\nimport { type TRenderLeafProps, Plate , usePlateEditor } from \"@udecode/plate-common/react\";\nimport Prism from 'prismjs';\n\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { previewMdValue } from '@/registry/default/example/values/preview-md-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport 'prismjs/components/prism-markdown.js';\n\n/**\n * Decorate texts with markdown preview.\n */\nconst decoratePreview: Decorate =\n ({entry: [node, path]}) => {\n const ranges: any[] = [];\n\n if (!isText(node)) {\n return ranges;\n }\n\n const getLength = (token: any) => {\n if (typeof token === 'string') {\n return token.length;\n }\n if (typeof token.content === 'string') {\n return token.content.length;\n }\n\n return token.content.reduce((l: any, t: any) => l + getLength(t), 0);\n };\n\n const tokens = Prism.tokenize(node.text, Prism.languages.markdown);\n let start = 0;\n\n for (const token of tokens) {\n const length = getLength(token);\n const end = start + length;\n\n if (typeof token !== 'string') {\n ranges.push({\n anchor: { offset: start, path },\n focus: { offset: end, path },\n [token.type]: true,\n });\n }\n\n start = end;\n }\n\n return ranges;\n };\n\nfunction PreviewLeaf({\n attributes,\n children,\n leaf,\n}: TRenderLeafProps<\n {\n blockquote?: boolean;\n bold?: boolean;\n code?: boolean;\n hr?: boolean;\n italic?: boolean;\n list?: boolean;\n title?: boolean;\n } & TText\n>) {\n const { blockquote, bold, code, hr, italic, list, title } = leaf;\n\n return (\n \n {children}\n \n );\n}\n\n\nexport default function PreviewMdDemo() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin, createSlatePlugin({\n key: 'preview-md',\n decorate: decoratePreview,\n })],\n value: previewMdValue,\n })\n \n return (\n \n \n \n \n \n );\n}\n", - "path": "example/preview-md-demo.tsx", - "target": "components/preview-md-demo.tsx", - "type": "registry:example" - } - ], - "name": "preview-md-demo", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/reset-node-demo.json b/apps/www/public/r/styles/default/reset-node-demo.json index a48b8d117f..c0682ccad6 100644 --- a/apps/www/public/r/styles/default/reset-node-demo.json +++ b/apps/www/public/r/styles/default/reset-node-demo.json @@ -14,8 +14,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "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 deleted file mode 100644 index 25f13e3ff6..0000000000 --- a/apps/www/public/r/styles/default/resizable-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Element resizing functionality." - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - } - ], - "name": "resizable-demo", - "registryDependencies": [], - "type": "registry:example" -} diff --git a/apps/www/public/r/styles/default/single-line-demo.json b/apps/www/public/r/styles/default/single-line-demo.json index 6cbfa53c06..dbddf869d5 100644 --- a/apps/www/public/r/styles/default/single-line-demo.json +++ b/apps/www/public/r/styles/default/single-line-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/single-line.json b/apps/www/public/r/styles/default/single-line.json deleted file mode 100644 index 2537e4b6b4..0000000000 --- a/apps/www/public/r/styles/default/single-line.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "doc": { - "description": "Restrict the editor to a single block.", - "title": "Single Line" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const singleLineValue: any = (\n \n You cannot type or paste text with multiple lines.\n \n);\n", - "path": "example/values/single-line-value.tsx", - "target": "components/single-line-value.tsx", - "type": "registry:example" - } - ], - "name": "single-line", - "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 99840e8805..63b8ec52b2 100644 --- a/apps/www/public/r/styles/default/slash-command-demo.json +++ b/apps/www/public/r/styles/default/slash-command-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/soft-break-demo.json b/apps/www/public/r/styles/default/soft-break-demo.json index 9ccc270f25..8d978e8444 100644 --- a/apps/www/public/r/styles/default/soft-break-demo.json +++ b/apps/www/public/r/styles/default/soft-break-demo.json @@ -18,8 +18,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/soft-break.json b/apps/www/public/r/styles/default/soft-break.json deleted file mode 100644 index 253a4302af..0000000000 --- a/apps/www/public/r/styles/default/soft-break.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "doc": { - "description": "Insert line breaks within a block of text without starting a new block.", - "title": "Soft Break" - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - }, - { - "content": "'use client';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SoftBreakPlugin } from '@udecode/plate-break/react';\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n} from '@udecode/plate-table/react';\n\nexport const softBreakPlugin = 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 CalloutPlugin.key,\n ],\n },\n },\n ],\n },\n});\n", - "path": "components/editor/plugins/soft-break-plugin.ts", - "target": "components/soft-break-plugin.ts", - "type": "registry:example" - }, - { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const softBreakValue: any = (\n \n Soft Break\n \n Customize how soft breaks (line breaks within a paragraph) are handled\n using configurable rules\n \n \n hotkey – Use hotkeys like ⇧⏎ to insert a soft break anywhere within a\n paragraph.\n \n \n query – Define custom rules to limit soft breaks to specific block types.\n \n Try here ⏎\n \n And here ⏎ as well.\n \n \n);\n", - "path": "example/values/soft-break-value.tsx", - "target": "components/soft-break-value.tsx", - "type": "registry:example" - } - ], - "name": "soft-break", - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/tabbable-demo.json b/apps/www/public/r/styles/default/tabbable-demo.json index 194fc2b997..760f7d5b85 100644 --- a/apps/www/public/r/styles/default/tabbable-demo.json +++ b/apps/www/public/r/styles/default/tabbable-demo.json @@ -14,8 +14,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/table-demo.json b/apps/www/public/r/styles/default/table-demo.json index 80ed455ebe..f044a6c0b3 100644 --- a/apps/www/public/r/styles/default/table-demo.json +++ b/apps/www/public/r/styles/default/table-demo.json @@ -23,8 +23,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/table-nomerge-demo.json b/apps/www/public/r/styles/default/table-nomerge-demo.json index 6c3c359364..24457a1b52 100644 --- a/apps/www/public/r/styles/default/table-nomerge-demo.json +++ b/apps/www/public/r/styles/default/table-nomerge-demo.json @@ -14,8 +14,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/toc-demo.json b/apps/www/public/r/styles/default/toc-demo.json index 63213fd292..4b1945cd6b 100644 --- a/apps/www/public/r/styles/default/toc-demo.json +++ b/apps/www/public/r/styles/default/toc-demo.json @@ -24,8 +24,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/toggle-demo.json b/apps/www/public/r/styles/default/toggle-demo.json index fa0f26c444..5f77611635 100644 --- a/apps/www/public/r/styles/default/toggle-demo.json +++ b/apps/www/public/r/styles/default/toggle-demo.json @@ -11,8 +11,8 @@ }, { "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/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 {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n type CreatePlateEditorOptions,\n ParagraphPlugin,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n TableCellHeaderPlugin,\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\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 { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-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 { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-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\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n [AudioPlugin.key]: MediaAudioElement,\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 [ColumnItemPlugin.key]: ColumnElement,\n [ColumnPlugin.key]: ColumnGroupElement,\n [CommentsPlugin.key]: CommentLeaf,\n [DatePlugin.key]: DateElement,\n [FilePlugin.key]: MediaFileElement,\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 [MediaEmbedPlugin.key]: MediaEmbedElement,\n [MentionPlugin.key]: MentionElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [PlaceholderPlugin.key]: MediaPlaceholderElement,\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 [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n ...viewComponents,\n [AIPlugin.key]: AILeaf,\n [EmojiInputPlugin.key]: EmojiInputElement,\n [MentionInputPlugin.key]: MentionInputElement,\n [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n {\n components,\n override,\n readOnly,\n ...options\n }: {\n components?: Record;\n plugins?: any[];\n readOnly?: boolean;\n } & Omit = {},\n deps: any[] = []\n) => {\n return usePlateEditor(\n {\n override: {\n components: {\n ...(readOnly\n ? viewComponents\n : withPlaceholders(withDraggables(editorComponents))),\n ...components,\n },\n ...override,\n },\n plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n ...options,\n },\n deps\n );\n};\n", - "path": "components/editor/use-create-editor.tsx", - "target": "components/use-create-editor.tsx", + "path": "components/editor/use-create-editor.ts", + "target": "components/use-create-editor.ts", "type": "registry:example" }, { diff --git a/apps/www/public/r/styles/default/toolbar-demo.json b/apps/www/public/r/styles/default/toolbar-demo.json deleted file mode 100644 index 35f67fd85c..0000000000 --- a/apps/www/public/r/styles/default/toolbar-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Fixed toolbar with formatting controls." - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - } - ], - "name": "toolbar-demo", - "registryDependencies": [], - "type": "registry:example" -} diff --git a/apps/www/public/r/styles/default/upload-demo.json b/apps/www/public/r/styles/default/upload-demo.json deleted file mode 100644 index 51a215ba75..0000000000 --- a/apps/www/public/r/styles/default/upload-demo.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "doc": { - "description": "Media upload and caption functionality." - }, - "files": [ - { - "content": "import React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: [...editorPlugins],\n value: DEMO_VALUES[id],\n });\n\n return (\n \n \n \n \n \n );\n}\n", - "path": "example/demo.tsx", - "target": "components/demo.tsx", - "type": "registry:example" - } - ], - "name": "upload-demo", - "registryDependencies": [], - "type": "registry:example" -} diff --git a/apps/www/public/r/styles/default/upload.json b/apps/www/public/r/styles/default/upload.json deleted file mode 100644 index e4c38ebf09..0000000000 --- a/apps/www/public/r/styles/default/upload.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "files": [ - { - "content": "'use client';\n\nimport React from 'react';\n\nimport {\n Plate,\n PlateContent,\n usePlateEditor,\n} from '@udecode/plate-common/react';\n\nexport default function BasicEditorDefaultDemo() {\n const editor = usePlateEditor();\n\n return (\n \n \n \n );\n}\n", - "path": "example/upload-demo.tsx", - "target": "components/upload-demo.tsx", - "type": "registry:example" - } - ], - "name": "upload", - "registryDependencies": [], - "type": "registry:example" -} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/uploadthing.json b/apps/www/public/r/styles/default/uploadthing.json index 5685781e1b..6ab9430424 100644 --- a/apps/www/public/r/styles/default/uploadthing.json +++ b/apps/www/public/r/styles/default/uploadthing.json @@ -1,11 +1,13 @@ { "dependencies": [ "uploadthing@7.2.0", - "sonner" + "@uploadthing/react@7.1.0", + "sonner", + "zod" ], "files": [ { - "content": "import * as React from 'react';\n\nimport type { OurFileRouter } from '@/components/api/uploadthing/route';\nimport type {\n ClientUploadedFileData,\n UploadFilesOptions,\n} from 'uploadthing/types';\n\nimport { generateReactHelpers } from '@uploadthing/react';\nimport { isRedirectError } from 'next/dist/client/components/redirect';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\n\nexport interface UploadedFile extends ClientUploadedFileData {}\n\ninterface UseUploadFileProps\n extends Pick<\n UploadFilesOptions,\n 'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'\n > {\n onUploadComplete?: (file: UploadedFile) => void;\n onUploadError?: (error: unknown) => void;\n}\n\nexport function useUploadFile(\n endpoint: keyof OurFileRouter,\n { onUploadComplete, onUploadError, ...props }: UseUploadFileProps = {}\n) {\n const [uploadedFile, setUploadedFile] = React.useState();\n const [uploadingFile, setUploadingFile] = React.useState();\n const [progress, setProgress] = React.useState(0);\n const [isUploading, setIsUploading] = React.useState(false);\n\n async function uploadThing(file: File) {\n setIsUploading(true);\n setUploadingFile(file);\n\n try {\n const res = await uploadFiles(endpoint, {\n ...props,\n files: [file],\n onUploadProgress: ({ progress }) => {\n setProgress(Math.min(progress, 100));\n },\n });\n\n setUploadedFile(res[0]);\n\n onUploadComplete?.(res[0]);\n\n return uploadedFile;\n } catch (error) {\n const errorMessage = getErrorMessage(error);\n\n const message =\n errorMessage.length > 0\n ? errorMessage\n : 'Something went wrong, please try again later.';\n\n toast.error(message);\n\n onUploadError?.(error);\n\n // Mock upload for unauthenticated users\n // toast.info('User not logged in. Mocking upload process.');\n const mockUploadedFile = {\n key: 'mock-key-0',\n appUrl: `https://mock-app-url.com/${file.name}`,\n name: file.name,\n size: file.size,\n type: file.type,\n url: URL.createObjectURL(file),\n } as UploadedFile;\n\n // Simulate upload progress\n let progress = 0;\n\n const simulateProgress = async () => {\n while (progress < 100) {\n await new Promise((resolve) => setTimeout(resolve, 50));\n progress += 2;\n setProgress(Math.min(progress, 100));\n }\n };\n\n await simulateProgress();\n\n setUploadedFile(mockUploadedFile);\n\n return mockUploadedFile;\n } finally {\n setProgress(0);\n setIsUploading(false);\n setUploadingFile(undefined);\n }\n }\n\n return {\n isUploading,\n progress,\n uploadFile: uploadThing,\n uploadedFile,\n uploadingFile,\n };\n}\n\nexport const { uploadFiles, useUploadThing } =\n generateReactHelpers();\n\nexport function getErrorMessage(err: unknown) {\n const unknownError = 'Something went wrong, please try again later.';\n\n if (err instanceof z.ZodError) {\n const errors = err.issues.map((issue) => {\n return issue.message;\n });\n\n return errors.join('\\n');\n } else if (err instanceof Error) {\n return err.message;\n } else if (isRedirectError(err)) {\n throw err;\n } else {\n return unknownError;\n }\n}\n\nexport function showErrorToast(err: unknown) {\n const errorMessage = getErrorMessage(err);\n\n return toast.error(errorMessage);\n}\n", + "content": "import * as React from 'react';\n\nimport type { OurFileRouter } from '@/app/api/uploadthing/route';\nimport type {\n ClientUploadedFileData,\n UploadFilesOptions,\n} from 'uploadthing/types';\n\nimport { generateReactHelpers } from '@uploadthing/react';\nimport { toast } from 'sonner';\nimport { z } from 'zod';\n\nexport interface UploadedFile extends ClientUploadedFileData {}\n\ninterface UseUploadFileProps\n extends Pick<\n UploadFilesOptions,\n 'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'\n > {\n onUploadComplete?: (file: UploadedFile) => void;\n onUploadError?: (error: unknown) => void;\n}\n\nexport function useUploadFile({\n onUploadComplete,\n onUploadError,\n ...props\n}: UseUploadFileProps = {}) {\n const [uploadedFile, setUploadedFile] = React.useState();\n const [uploadingFile, setUploadingFile] = React.useState();\n const [progress, setProgress] = React.useState(0);\n const [isUploading, setIsUploading] = React.useState(false);\n\n async function uploadThing(file: File) {\n setIsUploading(true);\n setUploadingFile(file);\n\n try {\n const res = await uploadFiles('editorUploader', {\n ...props,\n files: [file],\n onUploadProgress: ({ progress }) => {\n setProgress(Math.min(progress, 100));\n },\n });\n\n setUploadedFile(res[0]);\n\n onUploadComplete?.(res[0]);\n\n return uploadedFile;\n } catch (error) {\n const errorMessage = getErrorMessage(error);\n\n const message =\n errorMessage.length > 0\n ? errorMessage\n : 'Something went wrong, please try again later.';\n\n toast.error(message);\n\n onUploadError?.(error);\n\n // Mock upload for unauthenticated users\n // toast.info('User not logged in. Mocking upload process.');\n const mockUploadedFile = {\n key: 'mock-key-0',\n appUrl: `https://mock-app-url.com/${file.name}`,\n name: file.name,\n size: file.size,\n type: file.type,\n url: URL.createObjectURL(file),\n } as UploadedFile;\n\n // Simulate upload progress\n let progress = 0;\n\n const simulateProgress = async () => {\n while (progress < 100) {\n await new Promise((resolve) => setTimeout(resolve, 50));\n progress += 2;\n setProgress(Math.min(progress, 100));\n }\n };\n\n await simulateProgress();\n\n setUploadedFile(mockUploadedFile);\n\n return mockUploadedFile;\n } finally {\n setProgress(0);\n setIsUploading(false);\n setUploadingFile(undefined);\n }\n }\n\n return {\n isUploading,\n progress,\n uploadFile: uploadThing,\n uploadedFile,\n uploadingFile,\n };\n}\n\nexport const { uploadFiles, useUploadThing } =\n generateReactHelpers();\n\nexport function getErrorMessage(err: unknown) {\n const unknownError = 'Something went wrong, please try again later.';\n\n if (err instanceof z.ZodError) {\n const errors = err.issues.map((issue) => {\n return issue.message;\n });\n\n return errors.join('\\n');\n } else if (err instanceof Error) {\n return err.message;\n } else {\n return unknownError;\n }\n}\n\nexport function showErrorToast(err: unknown) {\n const errorMessage = getErrorMessage(err);\n\n return toast.error(errorMessage);\n}\n", "path": "lib/uploadthing.ts", "target": "lib/uploadthing.ts", "type": "registry:lib" diff --git a/apps/www/public/r/styles/default/use-chat.json b/apps/www/public/r/styles/default/use-chat.json index 0c664856a4..794ee4c25b 100644 --- a/apps/www/public/r/styles/default/use-chat.json +++ b/apps/www/public/r/styles/default/use-chat.json @@ -6,9 +6,9 @@ ], "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 const res = await fetch(input, init);\n\n if (!res.ok) {\n // Mock the API response. Remove it when you implement the route /api/ai/command\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 return res;\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", + "content": "'use client';\n\nimport { faker } from '@faker-js/faker';\nimport { useChat as useBaseChat } from 'ai/react';\n\nimport { useSettings } from '@/components/editor/settings';\n\nexport const useChat = () => {\n const { keys, model } = useSettings();\n\n return useBaseChat({\n id: 'editor',\n api: '/api/ai/command',\n body: {\n // !!! DEMO ONLY: don't use API keys client-side\n apiKey: keys.openai,\n model: model.value,\n },\n fetch: async (input, init) => {\n const res = await fetch(input, init);\n\n if (!res.ok) {\n // Mock the API response. Remove it when you implement the route /api/ai/command\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 return res;\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", + "path": "components/editor/use-chat.ts", + "target": "components/editor/use-chat.ts", "type": "registry:component" } ], diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 0afb77f840..d7a3aa809f 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -281,6 +281,8 @@ export const Index: Record = { } } + let componentImport = `React.lazy(() => import("${componentPath}"))` + index += ` "${item.name}": { name: "${item.name}", @@ -288,7 +290,7 @@ export const Index: Record = { type: "${item.type}", registryDependencies: ${JSON.stringify(item.registryDependencies)}, files: [${resolveFiles.map((file) => `"${file}"`)}], - component: React.lazy(() => import("${componentPath}")), + component: ${componentImport}, source: "${sourceFilename}", category: "${item.category ?? ''}", subcategory: "${item.subcategory ?? ''}", diff --git a/apps/www/scripts/fix-import.mts b/apps/www/scripts/fix-import.mts index 19da908e49..976faf2778 100644 --- a/apps/www/scripts/fix-import.mts +++ b/apps/www/scripts/fix-import.mts @@ -1,5 +1,5 @@ export function fixImport(content: string) { - const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|plate-ui|hooks|lib))\/([\w-]+)/g + const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|plate-ui|hooks|lib|app))\/([\w-]+)/g const replacement = ( match: string, @@ -15,6 +15,8 @@ export function fixImport(content: string) { return `@/hooks/${component}` } else if (type.endsWith("lib")) { return `@/lib/${component}` + } else if (type.endsWith("app")) { + return `@/app/${component}` } return match diff --git a/apps/www/src/__registry__/default/block/editor-ai/page.tsx b/apps/www/src/__registry__/default/block/editor-ai/page.tsx index dac2f3d526..7b88f3790f 100644 --- a/apps/www/src/__registry__/default/block/editor-ai/page.tsx +++ b/apps/www/src/__registry__/default/block/editor-ai/page.tsx @@ -1,5 +1,7 @@ +import { Toaster } from 'sonner'; + import { PlateEditor } from '@/registry/default/block/editor-ai/components/editor/plate-editor'; -import { OpenAIProvider } from '@/registry/default/components/editor/use-chat'; +import { SettingsProvider } from '@/registry/default/components/editor/settings'; export const description = 'An AI editor'; @@ -10,9 +12,11 @@ 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 578613da20..4e081dfbf9 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -285,8 +285,8 @@ export const Index: Record = { name: "media-placeholder-element", description: "", type: "registry:ui", - registryDependencies: ["plate-element","spinner"], - files: ["registry/default/plate-ui/media-placeholder-element.tsx","registry/default/lib/uploadthing.ts"], + registryDependencies: ["plate-element","spinner","uploadthing"], + files: ["registry/default/plate-ui/media-placeholder-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/media-placeholder-element.tsx")), source: "", category: "", @@ -1486,32 +1486,8 @@ export const Index: Record = { 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: [] - }, - "api-uploadthing": { - name: "api-uploadthing", - description: "", - type: "registry:component", - registryDependencies: ["media-placeholder-element","uploadthing"], - files: ["registry/default/components/api/uploadthing/route.ts"], - component: React.lazy(() => import("@/registry/default/components/api/uploadthing/route.ts")), + files: ["registry/default/components/editor/use-chat.ts"], + component: React.lazy(() => import("@/registry/default/components/editor/use-chat.ts")), source: "", category: "", subcategory: "", @@ -1558,7 +1534,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["basic-nodes-plugins","block-selection-plugins","indent-list-plugins","link-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/components/editor/plugins/ai-plugins.tsx","registry/default/example/values/ai-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/components/editor/plugins/ai-plugins.tsx","registry/default/example/values/ai-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1570,7 +1546,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["align-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/align-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/align-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1582,7 +1558,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["autoformat-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/autoformat-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/autoformat-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1594,7 +1570,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["basic-nodes-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-elements-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-elements-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1606,7 +1582,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["basic-nodes-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-marks-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-marks-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1618,7 +1594,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["basic-nodes-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-nodes-value.tsx","registry/default/example/values/basic-elements-value.tsx","registry/default/example/values/basic-marks-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-nodes-value.tsx","registry/default/example/values/basic-elements-value.tsx","registry/default/example/values/basic-marks-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1630,7 +1606,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["block-menu-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/block-menu-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/block-menu-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1642,7 +1618,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["block-selection-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/block-selection-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/block-selection-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1654,7 +1630,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/column-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/column-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1666,7 +1642,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["comments-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/comments-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/comments-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1678,7 +1654,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["copilot-plugins"], - files: ["registry/default/example/copilot-demo.tsx","registry/default/example/values/copilot-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/copilot-demo.tsx","registry/default/example/values/copilot-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/copilot-demo.tsx")), source: "", category: "", @@ -1690,7 +1666,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["cursor-overlay-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/cursor-overlay-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/cursor-overlay-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1702,7 +1678,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/date-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/date-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1714,7 +1690,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["dnd-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/dnd-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/dnd-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1726,7 +1702,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/emoji-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/emoji-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1738,7 +1714,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["exit-break-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/exit-break-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/exit-break-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1750,7 +1726,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/excalidraw-demo.tsx","registry/default/example/values/excalidraw-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/excalidraw-demo.tsx","registry/default/example/values/excalidraw-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/excalidraw-demo.tsx")), source: "", category: "", @@ -1762,7 +1738,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["fixed-toolbar","input","search-highlight-leaf"], - files: ["registry/default/example/find-replace-demo.tsx","registry/default/example/values/find-replace-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/find-replace-demo.tsx","registry/default/example/values/find-replace-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/find-replace-demo.tsx")), source: "", category: "", @@ -1774,7 +1750,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/floating-toolbar-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/floating-toolbar-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1786,7 +1762,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/font-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/font-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1798,7 +1774,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/highlight-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/highlight-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1810,7 +1786,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/horizontal-rule-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/horizontal-rule-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1822,7 +1798,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["indent-list-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/indent-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/indent-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1834,7 +1810,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["indent-list-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/indent-list-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/indent-list-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1846,7 +1822,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/kbd-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/kbd-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1858,7 +1834,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["line-height-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/line-height-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/line-height-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1870,7 +1846,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["link-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/link-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/link-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1882,7 +1858,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["autoformat-list-plugin","list-element","todo-list-element"], - files: ["registry/default/example/list-demo.tsx","registry/default/example/values/list-value.tsx","registry/default/components/editor/plugins/fixed-toolbar-list-plugin.tsx","registry/default/plate-ui/fixed-toolbar-list-buttons.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/list-demo.tsx","registry/default/example/values/list-value.tsx","registry/default/components/editor/plugins/fixed-toolbar-list-plugin.tsx","registry/default/plate-ui/fixed-toolbar-list-buttons.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/list-demo.tsx")), source: "", category: "", @@ -1894,7 +1870,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["media-plugins"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/media-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/media-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1906,7 +1882,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["mention-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/mention-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/mention-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1918,7 +1894,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["reset-block-type-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-elements-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/basic-elements-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1930,7 +1906,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-csv-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-csv-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1942,7 +1918,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-docx-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-docx-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1954,7 +1930,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-html-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-html-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1966,7 +1942,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-md-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/deserialize-md-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -1978,7 +1954,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/single-line-demo.tsx","registry/default/example/values/single-line-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/single-line-demo.tsx","registry/default/example/values/single-line-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/single-line-demo.tsx")), source: "", category: "", @@ -1990,7 +1966,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/example/values/slash-command-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/slash-command-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -2002,7 +1978,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["soft-break-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/soft-break-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/soft-break-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -2014,7 +1990,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/tabbable-demo.tsx","registry/default/example/values/tabbable-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/tabbable-demo.tsx","registry/default/example/values/tabbable-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/tabbable-demo.tsx")), source: "", category: "", @@ -2026,7 +2002,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["table-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/table-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/table-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -2038,7 +2014,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/table-nomerge-demo.tsx","registry/default/example/values/table-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/table-nomerge-demo.tsx","registry/default/example/values/table-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/table-nomerge-demo.tsx")), source: "", category: "", @@ -2050,7 +2026,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: ["toc-plugin"], - files: ["registry/default/example/demo.tsx","registry/default/example/values/toc-value.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/example/values/toc-value.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -2062,7 +2038,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -2074,7 +2050,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/demo.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -2314,7 +2290,7 @@ export const Index: Record = { description: "", type: "registry:example", registryDependencies: [], - files: ["registry/default/example/demo.tsx","registry/default/components/editor/use-create-editor.tsx","registry/default/components/editor/plugins/editor-plugins.tsx"], + files: ["registry/default/example/demo.tsx","registry/default/components/editor/use-create-editor.ts","registry/default/components/editor/plugins/editor-plugins.tsx"], component: React.lazy(() => import("@/registry/default/example/demo.tsx")), source: "", category: "", @@ -2345,12 +2321,36 @@ export const Index: Record = { subcategory: "", chunks: [] }, + "api-ai": { + name: "api-ai", + description: "", + type: "registry:lib", + registryDependencies: ["use-chat"], + files: ["registry/default/app/api/ai/command/route.ts","registry/default/app/api/ai/copilot/route.ts"], + component: React.lazy(() => import("@/registry/default/app/api/ai/command/route.ts")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, + "api-uploadthing": { + name: "api-uploadthing", + description: "", + type: "registry:lib", + registryDependencies: [], + files: ["registry/default/app/api/uploadthing/route.ts"], + component: React.lazy(() => import("@/registry/default/app/api/uploadthing/route.ts")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, "editor-ai": { name: "editor-ai", description: "An AI editor", type: "registry:block", - registryDependencies: ["api-ai","plate-types","editor-plugins","copilot-plugins","floating-toolbar-plugin","fixed-toolbar-plugin","ai-menu","ghost-text","comments-popover","cursor-overlay","editor","block-context-menu","ai-leaf","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","kbd-leaf","link-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"], + registryDependencies: ["api-ai","api-uploadthing","plate-types","editor-plugins","copilot-plugins","floating-toolbar-plugin","fixed-toolbar-plugin","ai-menu","ghost-text","comments-popover","cursor-overlay","editor","block-context-menu","ai-leaf","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","kbd-leaf","link-element","media-audio-element","media-embed-element","media-file-element","media-placeholder-element","media-video-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.ts","registry/default/components/editor/settings.tsx"], component: React.lazy(() => import("@/registry/default/block/editor-ai/page.tsx")), source: "src/__registry__/default/block/editor-ai/page.tsx", category: "Editors", @@ -2362,7 +2362,7 @@ export const Index: Record = { 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"], + 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.ts"], component: React.lazy(() => import("@/registry/default/block/editor-basic/page.tsx")), source: "src/__registry__/default/block/editor-basic/page.tsx", category: "Editors", diff --git a/apps/www/src/app/(app)/docs/[[...slug]]/doc-content.tsx b/apps/www/src/app/(app)/docs/[[...slug]]/doc-content.tsx index fe7fc3e73c..aa3caf3a34 100644 --- a/apps/www/src/app/(app)/docs/[[...slug]]/doc-content.tsx +++ b/apps/www/src/app/(app)/docs/[[...slug]]/doc-content.tsx @@ -18,6 +18,7 @@ import { badgeVariants } from '@/components/ui/badge'; import { ScrollArea } from '@/components/ui/scroll-area'; import { categoryNavGroups, docSections } from '@/config/docs-utils'; import { getDocTitle, getRegistryTitle } from '@/lib/registry-utils'; +import { Button } from '@/registry/default/plate-ui/button'; // import { formatBytes, getPackageData } from '@/lib/bundlephobia'; @@ -62,6 +63,10 @@ export function DocContent({ const items = categoryNavGroups[category]; + const docSection = docSections[0].items!.find( + (item) => item.value === category + ); + return (
- + {category === 'guide' ? ( + + ) : ( + + + + )}
diff --git a/apps/www/src/app/(app)/docs/examples/server/page.tsx b/apps/www/src/app/(app)/docs/examples/server-side/page.tsx similarity index 97% rename from apps/www/src/app/(app)/docs/examples/server/page.tsx rename to apps/www/src/app/(app)/docs/examples/server-side/page.tsx index 61fd6b2b09..6fc335392e 100644 --- a/apps/www/src/app/(app)/docs/examples/server/page.tsx +++ b/apps/www/src/app/(app)/docs/examples/server-side/page.tsx @@ -60,16 +60,11 @@ import { Code } from '@/components/code'; import { Link } from '@/components/link'; import { Markdown } from '@/components/markdown'; import { H2, H3, P } from '@/components/typography'; +import { exampleNavMap } from '@/config/docs-examples'; import { basicElementsValue } from '@/registry/default/example/values/basic-elements-value'; import { basicMarksValue } from '@/registry/default/example/values/basic-marks-value'; export default function RSCPage() { - const mockDoc = { - description: 'Server-side rendering.', - title: 'Server-Side', - // ... other necessary properties - }; - const editor = createSlateEditor({ plugins: [ BaseHeadingPlugin, @@ -238,7 +233,11 @@ export default function RSCPage() { }); return ( - +

Using Plate in a Server Environment

Plate can be utilized in server-side environments, enabling operations diff --git a/apps/www/src/components/component-installation.tsx b/apps/www/src/components/component-installation.tsx index e3f2e8f098..e68fc1209d 100644 --- a/apps/www/src/components/component-installation.tsx +++ b/apps/www/src/components/component-installation.tsx @@ -22,6 +22,7 @@ interface ComponentInstallationProps { dependencies?: string[]; examples?: RegistryEntry[]; files?: any[]; + inline?: boolean; name?: string; usage?: string[]; } @@ -33,6 +34,7 @@ export function ComponentInstallation({ __previewFiles__ = '[]', codeTabs, examples, + inline, name, usage, ...props @@ -112,7 +114,7 @@ export function ComponentInstallation({ return (

-

Installation

+ {!inline &&

Installation

} diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts index 07980e4539..9b21c1cc78 100644 --- a/apps/www/src/config/customizer-items.ts +++ b/apps/www/src/config/customizer-items.ts @@ -1257,7 +1257,7 @@ export const customizerItems: Record = { npmPackage: '@udecode/plate-placeholder', pluginFactory: 'PlaceholderPlugin', reactImport: true, - route: getPluginNavItem('media-placeholder').href, + route: getPluginNavItem('media').href, }, }; diff --git a/apps/www/src/config/docs-examples.ts b/apps/www/src/config/docs-examples.ts index cf10d45138..805d8a966b 100644 --- a/apps/www/src/config/docs-examples.ts +++ b/apps/www/src/config/docs-examples.ts @@ -39,7 +39,7 @@ export const docsExamples: SidebarNavItem[] = [ }, { description: 'Server-side rendering.', - href: '/docs/examples/server', + href: '/docs/examples/server-side', title: 'Server-Side', }, ...registryToNav( diff --git a/apps/www/src/config/docs-icons.tsx b/apps/www/src/config/docs-icons.tsx index e7bf814bef..61887db04b 100644 --- a/apps/www/src/config/docs-icons.tsx +++ b/apps/www/src/config/docs-icons.tsx @@ -21,7 +21,6 @@ import { Columns3Icon, ColumnsIcon, CommandIcon, - CopyIcon, CornerDownLeftIcon, DockIcon, Edit3Icon, @@ -141,7 +140,6 @@ export const DocIcons = { comments: MessageSquareTextIcon, 'comments-popover': MessageSquareTextIcon, 'context-menu': MousePointerClickIcon, - controlled: CopyIcon, copilot: ArrowRightToLineIcon, csv: FileSpreadsheetIcon, 'cursor-overlay': TextCursorInputIcon, @@ -210,7 +208,6 @@ export const DocIcons = { 'media-audio-element': AudioLinesIcon, 'media-embed-element': DockIcon, 'media-file-element': FileIcon, - 'media-placeholder': SquareDashedIcon, 'media-placeholder-element': SquareDashedIcon, 'media-popover': ImageIcon, 'media-toolbar-button': ImageIcon, @@ -233,7 +230,7 @@ export const DocIcons = { resizable: ProportionsIcon, 'search-highlight-leaf': HighlighterIcon, separator: SeparatorHorizontalIcon, - server: ServerIcon, + 'server-side': ServerIcon, 'single-line': RectangleHorizontalIcon, 'slash-command': SlashIcon, 'slash-input-element': SlashIcon, @@ -259,6 +256,8 @@ export const DocIcons = { }; export const getDocIcon = (item: SidebarNavItem, category?: string) => { + if (category === 'guide') return null; + const icon = item.icon ?? item.href?.split('/').pop(); return (DocIcons as any)[icon!] ?? (category === 'api' ? CodeXmlIcon : null); diff --git a/apps/www/src/config/docs-plugins.ts b/apps/www/src/config/docs-plugins.ts index 70a348bc4d..2b566430c9 100644 --- a/apps/www/src/config/docs-plugins.ts +++ b/apps/www/src/config/docs-plugins.ts @@ -35,12 +35,6 @@ export const pluginsNavItems: SidebarNavItem[] = [ label: 'New', title: 'Equation', }, - { - description: 'A placeholder for media upload with progress indication.', - href: '/docs/media-placeholder', - label: 'New', - title: 'Media Placeholder', - }, { description: 'Slash command menu for quick insertion of various content types.', @@ -197,7 +191,7 @@ export const pluginsNavItems: SidebarNavItem[] = [ { description: 'Embed medias like videos or tweets into your document.', href: '/docs/media', - label: 'Element', + label: ['Element', 'New'], title: 'Media', }, { diff --git a/apps/www/src/registry/default/components/api/ai/command/route.ts b/apps/www/src/registry/default/app/api/ai/command/route.ts similarity index 100% rename from apps/www/src/registry/default/components/api/ai/command/route.ts rename to apps/www/src/registry/default/app/api/ai/command/route.ts diff --git a/apps/www/src/registry/default/components/api/ai/copilot/route.ts b/apps/www/src/registry/default/app/api/ai/copilot/route.ts similarity index 100% rename from apps/www/src/registry/default/components/api/ai/copilot/route.ts rename to apps/www/src/registry/default/app/api/ai/copilot/route.ts diff --git a/apps/www/src/registry/default/app/api/uploadthing/route.ts b/apps/www/src/registry/default/app/api/uploadthing/route.ts new file mode 100644 index 0000000000..f3d0c2d5b3 --- /dev/null +++ b/apps/www/src/registry/default/app/api/uploadthing/route.ts @@ -0,0 +1,21 @@ +import type { FileRouter } from 'uploadthing/next'; + +import { createRouteHandler, createUploadthing } from 'uploadthing/next'; + +const f = createUploadthing(); + +const ourFileRouter = { + editorUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio']) + .middleware(() => { + return {}; + }) + .onUploadComplete(({ file }) => { + return { file }; + }), +} satisfies FileRouter; + +export type OurFileRouter = typeof ourFileRouter; + +export const { GET, POST } = createRouteHandler({ + router: ourFileRouter, +}); 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 index d6399d884b..d07f3e4f79 100644 --- 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 @@ -7,7 +7,7 @@ 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 { SettingsDialog } from '@/registry/default/components/editor/settings'; import { Editor, EditorContainer } from '@/registry/default/plate-ui/editor'; export function PlateEditor() { diff --git a/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor-list.tsx b/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor-list.ts similarity index 100% rename from apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor-list.tsx rename to apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor-list.ts 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.ts similarity index 91% rename from apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.tsx rename to apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.ts index ca3a8a3a21..95cf5f8276 100644 --- 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.ts @@ -31,7 +31,14 @@ import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; import { KbdPlugin } from '@udecode/plate-kbd/react'; import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react'; import { LinkPlugin } from '@udecode/plate-link/react'; -import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; +import { + AudioPlugin, + FilePlugin, + ImagePlugin, + MediaEmbedPlugin, + PlaceholderPlugin, + VideoPlugin, +} from '@udecode/plate-media/react'; import { MentionInputPlugin, MentionPlugin, @@ -67,7 +74,11 @@ import { HrElement } from '@/registry/default/plate-ui/hr-element'; import { ImageElement } from '@/registry/default/plate-ui/image-element'; import { KbdLeaf } from '@/registry/default/plate-ui/kbd-leaf'; import { LinkElement } from '@/registry/default/plate-ui/link-element'; +import { MediaAudioElement } from '@/registry/default/plate-ui/media-audio-element'; import { MediaEmbedElement } from '@/registry/default/plate-ui/media-embed-element'; +import { MediaFileElement } from '@/registry/default/plate-ui/media-file-element'; +import { MediaPlaceholderElement } from '@/registry/default/plate-ui/media-placeholder-element'; +import { MediaVideoElement } from '@/registry/default/plate-ui/media-video-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'; @@ -89,6 +100,7 @@ export const useCreateEditor = () => { components: withDraggables( withPlaceholders({ [AIPlugin.key]: AILeaf, + [AudioPlugin.key]: MediaAudioElement, [BlockquotePlugin.key]: BlockquoteElement, [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), [CodeBlockPlugin.key]: CodeBlockElement, @@ -101,6 +113,7 @@ export const useCreateEditor = () => { [DatePlugin.key]: DateElement, [EmojiInputPlugin.key]: EmojiInputElement, [ExcalidrawPlugin.key]: ExcalidrawElement, + [FilePlugin.key]: MediaFileElement, [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), @@ -117,6 +130,7 @@ export const useCreateEditor = () => { [MentionInputPlugin.key]: MentionInputElement, [MentionPlugin.key]: MentionElement, [ParagraphPlugin.key]: ParagraphElement, + [PlaceholderPlugin.key]: MediaPlaceholderElement, [SlashInputPlugin.key]: SlashInputElement, [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }), @@ -128,6 +142,7 @@ export const useCreateEditor = () => { [TocPlugin.key]: TocElement, [TogglePlugin.key]: ToggleElement, [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + [VideoPlugin.key]: MediaVideoElement, }) ), }, diff --git a/apps/www/src/registry/default/block/editor-ai/page.tsx b/apps/www/src/registry/default/block/editor-ai/page.tsx index dac2f3d526..7b88f3790f 100644 --- a/apps/www/src/registry/default/block/editor-ai/page.tsx +++ b/apps/www/src/registry/default/block/editor-ai/page.tsx @@ -1,5 +1,7 @@ +import { Toaster } from 'sonner'; + import { PlateEditor } from '@/registry/default/block/editor-ai/components/editor/plate-editor'; -import { OpenAIProvider } from '@/registry/default/components/editor/use-chat'; +import { SettingsProvider } from '@/registry/default/components/editor/settings'; export const description = 'An AI editor'; @@ -10,9 +12,11 @@ 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/use-create-editor.tsx b/apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.ts similarity index 100% rename from apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx rename to apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.ts diff --git a/apps/www/src/registry/default/components/api/uploadthing/route.ts b/apps/www/src/registry/default/components/api/uploadthing/route.ts deleted file mode 100644 index d19e1ed2f3..0000000000 --- a/apps/www/src/registry/default/components/api/uploadthing/route.ts +++ /dev/null @@ -1,36 +0,0 @@ -import type { FileRouter } from 'uploadthing/next'; - -import { createRouteHandler, createUploadthing } from 'uploadthing/next'; - -const f = createUploadthing(); - -// FileRouter for your app, can contain multiple FileRoutes -const ourFileRouter = { - // Define as many FileRoutes as you like, each with a unique routeSlug - imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio']) - // Set permissions and file types for this FileRoute - // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/require-await - .middleware(async ({ req }) => { - // This code runs on your server before upload - - // Whatever is returned here is accessible in onUploadComplete as `metadata` - return {}; - }) - // eslint-disable-next-line @typescript-eslint/no-unused-vars - .onUploadComplete(({ file, metadata }) => { - // This code RUNS ON YOUR SERVER after upload - - // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback - return { file }; - }), -} satisfies FileRouter; - -export type OurFileRouter = typeof ourFileRouter; - -// Export routes for Next App Router -export const { GET, POST } = createRouteHandler({ - router: ourFileRouter, - - // Apply an (optional) custom config: - // config: { ... }, -}); diff --git a/apps/www/src/registry/default/components/editor/plugins/delete-plugins.ts b/apps/www/src/registry/default/components/editor/plugins/delete-plugins.ts index 947137bc50..ff384acbcd 100644 --- a/apps/www/src/registry/default/components/editor/plugins/delete-plugins.ts +++ b/apps/www/src/registry/default/components/editor/plugins/delete-plugins.ts @@ -1,7 +1,13 @@ 'use client'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; -import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; +import { + AudioPlugin, + FilePlugin, + ImagePlugin, + MediaEmbedPlugin, + VideoPlugin, +} from '@udecode/plate-media/react'; import { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select'; export const deletePlugins = [ @@ -10,6 +16,9 @@ export const deletePlugins = [ query: { allow: [ ImagePlugin.key, + VideoPlugin.key, + AudioPlugin.key, + FilePlugin.key, MediaEmbedPlugin.key, HorizontalRulePlugin.key, ], diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx index c7dc1469b4..66d57045d2 100644 --- a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx +++ b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx @@ -23,7 +23,15 @@ export const mediaPlugins = [ AudioPlugin, FilePlugin, CaptionPlugin.configure({ - options: { plugins: [ImagePlugin, MediaEmbedPlugin] }, + options: { + plugins: [ + ImagePlugin, + VideoPlugin, + AudioPlugin, + FilePlugin, + MediaEmbedPlugin, + ], + }, }), PlaceholderPlugin.configure({ options: { disableEmptyPlaceholder: true }, diff --git a/apps/www/src/registry/default/components/editor/settings.tsx b/apps/www/src/registry/default/components/editor/settings.tsx new file mode 100644 index 0000000000..6442c1c4d3 --- /dev/null +++ b/apps/www/src/registry/default/components/editor/settings.tsx @@ -0,0 +1,322 @@ +'use client'; + +import { type ReactNode, createContext, useContext, useState } from 'react'; + +import { cn } from '@udecode/cn'; +import { CopilotPlugin } from '@udecode/plate-ai/react'; +import { useEditorPlugin } from '@udecode/plate-common/react'; +import { + Check, + ChevronsUpDown, + ExternalLinkIcon, + Eye, + EyeOff, + Settings, + Wand2Icon, +} from 'lucide-react'; + +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'; + +interface Model { + label: string; + value: string; +} + +interface SettingsContextType { + keys: Record; + model: Model; + setKey: (service: string, 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 SettingsContext = createContext( + undefined +); + +export function SettingsProvider({ children }: { children: ReactNode }) { + const [keys, setKeys] = useState({ + openai: '', + uploadthing: '', + }); + const [model, setModel] = useState(models[0]); + + const setKey = (service: string, key: string) => { + setKeys((prev) => ({ ...prev, [service]: key })); + }; + + return ( + + {children} + + ); +} + +export function useSettings() { + const context = useContext(SettingsContext); + + return ( + context ?? { + keys: { + openai: '', + uploadthing: '', + }, + model: models[0], + setKey: () => {}, + setModel: () => {}, + } + ); +} + +export function SettingsDialog() { + const { keys, model, setKey, setModel } = useSettings(); + const [tempKeys, setTempKeys] = useState(keys); + const [showKey, setShowKey] = useState>({}); + const [open, setOpen] = useState(false); + const [openModel, setOpenModel] = useState(false); + + const { getOptions, setOption } = useEditorPlugin(CopilotPlugin); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + Object.entries(tempKeys).forEach(([service, key]) => { + setKey(service, key); + }); + setOpen(false); + + // Update AI options if needed + const completeOptions = getOptions().completeOptions ?? {}; + setOption('completeOptions', { + ...completeOptions, + body: { + ...completeOptions.body, + apiKey: tempKeys.openai, + model: model.value, + }, + }); + }; + + const toggleKeyVisibility = (key: string) => { + setShowKey((prev) => ({ ...prev, [key]: !prev[key] })); + }; + + const renderApiKeyInput = (service: string, label: string) => ( +
+
+ + +
+ + + setTempKeys((prev) => ({ ...prev, [service]: e.target.value })) + } + placeholder="" + data-1p-ignore + type={showKey[service] ? 'text' : 'password'} + /> + +
+ ); + + return ( + + + + + + + Settings + + Configure your API keys and preferences. + + + +
+ {/* AI Settings Group */} +
+
+
+ +
+

AI

+
+ +
+ {renderApiKeyInput('openai', 'OpenAI API key')} + +
+ + + + + + + + + No model found. + + + {models.map((m) => ( + { + setModel(m); + setOpenModel(false); + }} + > + + {m.label} + + ))} + + + + + +
+
+
+ + {/* Upload Settings Group */} + {/*
+
+
+ +
+

Upload

+
+ +
+ {renderApiKeyInput('uploadthing', 'Uploadthing API key')} +
+
*/} + + +
+ +

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

+ + + ); +} diff --git a/apps/www/src/registry/default/components/editor/use-chat.ts b/apps/www/src/registry/default/components/editor/use-chat.ts new file mode 100644 index 0000000000..ff25738d24 --- /dev/null +++ b/apps/www/src/registry/default/components/editor/use-chat.ts @@ -0,0 +1,78 @@ +'use client'; + +import { faker } from '@faker-js/faker'; +import { useChat as useBaseChat } from 'ai/react'; + +import { useSettings } from '@/registry/default/components/editor/settings'; + +export const useChat = () => { + const { keys, model } = useSettings(); + + return useBaseChat({ + id: 'editor', + api: '/api/ai/command', + body: { + // !!! DEMO ONLY: don't use API keys client-side + apiKey: keys.openai, + model: model.value, + }, + fetch: async (input, init) => { + const res = await fetch(input, init); + + if (!res.ok) { + // Mock the API response. Remove it when you implement the route /api/ai/command + await new Promise((resolve) => setTimeout(resolve, 400)); + + const stream = fakeStreamText(); + + return new Response(stream, { + headers: { + Connection: 'keep-alive', + 'Content-Type': 'text/plain', + }, + }); + } + + return res; + }, + }); +}; + +// 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/components/editor/use-chat.tsx b/apps/www/src/registry/default/components/editor/use-chat.tsx deleted file mode 100644 index 4d019c1f60..0000000000 --- a/apps/www/src/registry/default/components/editor/use-chat.tsx +++ /dev/null @@ -1,315 +0,0 @@ -'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) => { - const res = await fetch(input, init); - - if (!res.ok) { - // Mock the API response. Remove it when you implement the route /api/ai/command - await new Promise((resolve) => setTimeout(resolve, 400)); - - const stream = fakeStreamText(); - - return new Response(stream, { - headers: { - Connection: 'keep-alive', - 'Content-Type': 'text/plain', - }, - }); - } - - return res; - }, - }); -}; - -// 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/components/editor/use-create-editor.tsx b/apps/www/src/registry/default/components/editor/use-create-editor.ts similarity index 100% rename from apps/www/src/registry/default/components/editor/use-create-editor.tsx rename to apps/www/src/registry/default/components/editor/use-create-editor.ts diff --git a/apps/www/src/registry/default/lib/uploadthing.ts b/apps/www/src/registry/default/lib/uploadthing.ts index 2240fd4b49..375e37a167 100644 --- a/apps/www/src/registry/default/lib/uploadthing.ts +++ b/apps/www/src/registry/default/lib/uploadthing.ts @@ -1,13 +1,12 @@ import * as React from 'react'; -import type { OurFileRouter } from '@/registry/default/components/api/uploadthing/route'; +import type { OurFileRouter } from '@/registry/default/app/api/uploadthing/route'; import type { ClientUploadedFileData, UploadFilesOptions, } from 'uploadthing/types'; import { generateReactHelpers } from '@uploadthing/react'; -import { isRedirectError } from 'next/dist/client/components/redirect'; import { toast } from 'sonner'; import { z } from 'zod'; @@ -22,10 +21,11 @@ interface UseUploadFileProps onUploadError?: (error: unknown) => void; } -export function useUploadFile( - endpoint: keyof OurFileRouter, - { onUploadComplete, onUploadError, ...props }: UseUploadFileProps = {} -) { +export function useUploadFile({ + onUploadComplete, + onUploadError, + ...props +}: UseUploadFileProps = {}) { const [uploadedFile, setUploadedFile] = React.useState(); const [uploadingFile, setUploadingFile] = React.useState(); const [progress, setProgress] = React.useState(0); @@ -36,7 +36,7 @@ export function useUploadFile( setUploadingFile(file); try { - const res = await uploadFiles(endpoint, { + const res = await uploadFiles('editorUploader', { ...props, files: [file], onUploadProgress: ({ progress }) => { @@ -118,8 +118,6 @@ export function getErrorMessage(err: unknown) { return errors.join('\n'); } else if (err instanceof Error) { return err.message; - } else if (isRedirectError(err)) { - throw err; } else { return unknownError; } diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx index 812c9790f3..1d7afa8d96 100644 --- a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx +++ b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx @@ -73,7 +73,7 @@ export const MediaPlaceholderElement = withHOC( const { api } = useEditorPlugin(PlaceholderPlugin); const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } = - useUploadFile('imageUploader'); + useUploadFile(); const loading = isUploading && uploadingFile; @@ -134,6 +134,7 @@ export const MediaPlaceholderElement = withHOC( // React dev mode will call useEffect twice const isReplaced = useRef(false); + /** Paste and drop */ useEffect(() => { if (isReplaced.current) return; diff --git a/apps/www/src/registry/registry-app.ts b/apps/www/src/registry/registry-app.ts new file mode 100644 index 0000000000..7efdf71960 --- /dev/null +++ b/apps/www/src/registry/registry-app.ts @@ -0,0 +1,35 @@ +import type { Registry } from './schema'; + +export const registryApp: Registry = [ + { + dependencies: ['@ai-sdk/openai', 'ai'], + files: [ + { + path: 'app/api/ai/command/route.ts', + target: 'app/api/ai/command/route.ts', + type: 'registry:lib', + }, + { + path: 'app/api/ai/copilot/route.ts', + target: 'app/api/ai/copilot/route.ts', + type: 'registry:lib', + }, + ], + name: 'api-ai', + registryDependencies: ['use-chat'], + type: 'registry:lib', + }, + { + dependencies: ['uploadthing@7.2.0'], + files: [ + { + path: 'app/api/uploadthing/route.ts', + target: 'app/api/uploadthing/route.ts', + type: 'registry:lib', + }, + ], + name: 'api-uploadthing', + registryDependencies: [], + type: 'registry:lib', + }, +]; diff --git a/apps/www/src/registry/registry-blocks.ts b/apps/www/src/registry/registry-blocks.ts index 5cf71caa2c..f8b42780d8 100644 --- a/apps/www/src/registry/registry-blocks.ts +++ b/apps/www/src/registry/registry-blocks.ts @@ -39,14 +39,20 @@ export const blocks: Registry = [ type: 'registry:component', }, { - path: 'block/editor-ai/components/editor/use-create-editor.tsx', - target: 'components/editor/use-create-editor.tsx', + path: 'block/editor-ai/components/editor/use-create-editor.ts', + target: 'components/editor/use-create-editor.ts', + type: 'registry:component', + }, + { + path: 'components/editor/settings.tsx', + target: 'components/editor/settings.tsx', type: 'registry:component', }, ], name: 'editor-ai', registryDependencies: [ 'api-ai', + 'api-uploadthing', 'plate-types', 'editor-plugins', @@ -80,7 +86,11 @@ export const blocks: Registry = [ 'image-element', 'kbd-leaf', 'link-element', + 'media-audio-element', 'media-embed-element', + 'media-file-element', + 'media-placeholder-element', + 'media-video-element', 'mention-element', 'mention-input-element', 'paragraph-element', @@ -112,8 +122,8 @@ export const blocks: Registry = [ type: 'registry:component', }, { - path: 'block/editor-basic/components/editor/use-create-editor.tsx', - target: 'components/editor/use-create-editor.tsx', + path: 'block/editor-basic/components/editor/use-create-editor.ts', + target: 'components/editor/use-create-editor.ts', type: 'registry:component', }, ], diff --git a/apps/www/src/registry/registry-components.ts b/apps/www/src/registry/registry-components.ts index 4a8495c47a..34713323b3 100644 --- a/apps/www/src/registry/registry-components.ts +++ b/apps/www/src/registry/registry-components.ts @@ -311,7 +311,7 @@ export const components: Registry = [ dependencies: ['@udecode/plate-ai', 'ai', '@faker-js/faker'], files: [ { - path: 'components/editor/use-chat.tsx', + path: 'components/editor/use-chat.ts', type: 'registry:component', }, ], @@ -319,37 +319,6 @@ export const components: Registry = [ 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: ['uploadthing@7.2.0'], - files: [ - { - path: 'components/api/uploadthing/route.ts', - target: 'app/api/uploadthing/route.ts', - type: 'registry:page', - }, - ], - name: 'api-uploadthing', - registryDependencies: ['media-placeholder-element', 'uploadthing'], - type: 'registry:component', - }, { dependencies: [ '@udecode/plate-callout', diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts index cb8c0d4a8a..bffe6c56bd 100644 --- a/apps/www/src/registry/registry-examples.ts +++ b/apps/www/src/registry/registry-examples.ts @@ -276,7 +276,7 @@ export const docExamples: Registry = [ 'example/demo.tsx', 'components/editor/plugins/ai-plugins.tsx', 'example/values/ai-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'ai-demo', @@ -295,7 +295,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/align-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'align-demo', @@ -311,7 +311,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/autoformat-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'autoformat-demo', @@ -332,7 +332,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/basic-elements-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'basic-elements-demo', @@ -353,7 +353,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/basic-marks-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'basic-marks-demo', @@ -376,7 +376,7 @@ export const docExamples: Registry = [ 'example/values/basic-nodes-value.tsx', 'example/values/basic-elements-value.tsx', 'example/values/basic-marks-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'basic-nodes-demo', @@ -396,7 +396,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/block-menu-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'block-menu-demo', @@ -410,7 +410,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/block-selection-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'block-selection-demo', @@ -430,7 +430,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/column-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'column-demo', @@ -450,7 +450,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/comments-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'comments-demo', @@ -471,7 +471,7 @@ export const docExamples: Registry = [ files: [ 'example/copilot-demo.tsx', 'example/values/copilot-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'copilot-demo', @@ -486,7 +486,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/cursor-overlay-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'cursor-overlay-demo', @@ -524,7 +524,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/date-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'date-demo', @@ -546,7 +546,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/dnd-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'dnd-demo', @@ -566,7 +566,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/emoji-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'emoji-demo', @@ -581,7 +581,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/exit-break-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'exit-break-demo', @@ -596,7 +596,7 @@ export const docExamples: Registry = [ files: [ 'example/excalidraw-demo.tsx', 'example/values/excalidraw-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'excalidraw-demo', @@ -629,7 +629,7 @@ export const docExamples: Registry = [ files: [ 'example/find-replace-demo.tsx', 'example/values/find-replace-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'find-replace-demo', @@ -650,7 +650,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/floating-toolbar-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'floating-toolbar-demo', @@ -664,7 +664,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/font-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'font-demo', @@ -678,7 +678,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/highlight-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'highlight-demo', @@ -698,7 +698,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/horizontal-rule-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'horizontal-rule-demo', @@ -718,7 +718,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/indent-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'indent-demo', @@ -742,7 +742,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/indent-list-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'indent-list-demo', @@ -753,7 +753,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/kbd-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'kbd-demo', @@ -767,7 +767,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/line-height-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'line-height-demo', @@ -787,7 +787,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/link-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'link-demo', @@ -803,7 +803,7 @@ export const docExamples: Registry = [ 'example/values/list-value.tsx', 'components/editor/plugins/fixed-toolbar-list-plugin.tsx', 'plate-ui/fixed-toolbar-list-buttons.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'list-demo', @@ -821,7 +821,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/media-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'media-demo', @@ -841,7 +841,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/mention-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'mention-demo', @@ -854,7 +854,7 @@ export const docExamples: Registry = [ // }, // files: [ // 'example/demo.tsx', - // 'components/editor/use-create-editor.tsx', + // 'components/editor/use-create-editor.ts', // 'components/editor/plugins/editor-plugins.tsx', // ], // name: 'placeholder-demo', @@ -865,7 +865,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/basic-elements-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'reset-node-demo', @@ -880,7 +880,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/deserialize-csv-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'csv-demo', @@ -894,7 +894,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/deserialize-docx-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'docx-demo', @@ -908,7 +908,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/deserialize-html-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'html-demo', @@ -922,7 +922,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/deserialize-md-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'markdown-demo', @@ -936,7 +936,7 @@ export const docExamples: Registry = [ files: [ 'example/single-line-demo.tsx', 'example/values/single-line-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'single-line-demo', @@ -956,7 +956,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/slash-command-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'slash-command-demo', @@ -972,7 +972,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/soft-break-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'soft-break-demo', @@ -983,7 +983,7 @@ export const docExamples: Registry = [ files: [ 'example/tabbable-demo.tsx', 'example/values/tabbable-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'tabbable-demo', @@ -1003,7 +1003,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/table-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'table-demo', @@ -1014,7 +1014,7 @@ export const docExamples: Registry = [ files: [ 'example/table-nomerge-demo.tsx', 'example/values/table-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'table-nomerge-demo', @@ -1034,7 +1034,7 @@ export const docExamples: Registry = [ files: [ 'example/demo.tsx', 'example/values/toc-value.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'toc-demo', @@ -1047,7 +1047,7 @@ export const docExamples: Registry = [ }, files: [ 'example/demo.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'toggle-demo', @@ -1062,7 +1062,7 @@ export const examples: Registry = [ { files: [ 'example/demo.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'demo', @@ -1193,7 +1193,7 @@ export const examples: Registry = [ { files: [ 'example/demo.tsx', - 'components/editor/use-create-editor.tsx', + 'components/editor/use-create-editor.ts', 'components/editor/plugins/editor-plugins.tsx', ], name: 'playground-demo', diff --git a/apps/www/src/registry/registry-lib.ts b/apps/www/src/registry/registry-lib.ts index 216e62c2c0..68cb67649b 100644 --- a/apps/www/src/registry/registry-lib.ts +++ b/apps/www/src/registry/registry-lib.ts @@ -13,7 +13,12 @@ export const lib: Registry = [ type: 'registry:lib', }, { - dependencies: ['uploadthing@7.2.0', 'sonner'], + dependencies: [ + 'uploadthing@7.2.0', + '@uploadthing/react@7.1.0', + 'sonner', + 'zod', + ], files: [ { path: 'lib/uploadthing.ts', diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts index cff3933725..5a87df3bf6 100644 --- a/apps/www/src/registry/registry-ui.ts +++ b/apps/www/src/registry/registry-ui.ts @@ -700,7 +700,7 @@ import { withDraggables } from './withDraggables';`, dependencies: ['@udecode/plate-media', 'sonner'], doc: { description: 'Show toast notifications for media uploads.', - docs: [{ route: '/docs/media-placeholder', title: 'Media Placeholder' }], + docs: [{ route: '/docs/media', title: 'Media Placeholder' }], examples: ['media-demo', 'upload-pro'], }, files: ['plate-ui/media-upload-toast.tsx'], @@ -1247,12 +1247,7 @@ export const uiNodes: Registry = [ type: 'registry:ui', }, { - dependencies: [ - '@udecode/plate-media', - 'use-file-picker', - '@uploadthing/react@7.1.0', - 'uploadthing@7.2.0', - ], + dependencies: ['@udecode/plate-media', 'use-file-picker'], doc: { description: 'A placeholder for media upload progress indication.', docs: [ @@ -1265,9 +1260,9 @@ export const uiNodes: Registry = [ ], examples: ['media-demo', 'upload-pro'], }, - files: ['plate-ui/media-placeholder-element.tsx', 'lib/uploadthing.ts'], + files: ['plate-ui/media-placeholder-element.tsx'], name: 'media-placeholder-element', - registryDependencies: ['plate-element', 'spinner'], + registryDependencies: ['plate-element', 'spinner', 'uploadthing'], type: 'registry:ui', }, { diff --git a/apps/www/src/registry/registry.ts b/apps/www/src/registry/registry.ts index b5f0527253..e0b0c158d5 100644 --- a/apps/www/src/registry/registry.ts +++ b/apps/www/src/registry/registry.ts @@ -1,5 +1,6 @@ import type { Registry } from './schema'; +import { registryApp } from './registry-app'; import { blocks } from './registry-blocks'; import { components } from './registry-components'; import { examples } from './registry-examples'; @@ -12,6 +13,7 @@ export const registry: Registry = [ ...ui, ...components, ...examples, + ...registryApp, ...blocks, ...lib, ...hooks, diff --git a/apps/www/src/styles/globals.css b/apps/www/src/styles/globals.css index 327cc3a620..fe6d3183e3 100644 --- a/apps/www/src/styles/globals.css +++ b/apps/www/src/styles/globals.css @@ -30,6 +30,8 @@ .prose { --tw-prose-body: var(--foreground); + --tw-prose-bold: inherit; + --tw-prose-links: inherit; --tw-prose-bullets: var(--foreground); } } diff --git a/package.json b/package.json index 19a5d7f923..05c25d4f6a 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,9 @@ "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", + "cli:basic": "sh ./scripts/pre-basic.sh && npx shadcx@latest add plate/editor-basic -o -c templates/plate-template && sh ./scripts/post-basic.sh", + "cli:sync": "sh ./scripts/pre-ai.sh && npx shadcx@latest add plate/editor-ai -o -c templates/plate-playground-template && sh ./scripts/post-ai.sh", + "cli:test": "sh ./scripts/pre-basic.sh && npx shadcx@latest add plate/editor-ai -o -c templates/plate-template && sh ./scripts/post-basic.sh", "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", @@ -108,7 +110,7 @@ "cross-env": "^7.0.3", "dotenv": "^16.4.5", "eslint": "^8.57.0", - "eslint-config-next": "14.2.11", + "eslint-config-next": "15.0.3", "eslint-config-prettier": "^9.1.0", "eslint-config-turbo": "^2.1.2", "eslint-import-resolver-typescript": "^3.6.3", diff --git a/scripts/add-ai.sh b/scripts/add-ai.sh index 2a160ca0dd..248ec58cdf 100644 --- a/scripts/add-ai.sh +++ b/scripts/add-ai.sh @@ -1,4 +1,6 @@ #!/bin/sh # add editor-ai -node ./packages/cli/dist/index.js add plate/editor-ai -c ./templates/plate-template +# node ./packages/cli/dist/index.js add plate/editor-ai -c ./templates/plate-template + +./pre-registry.sh && npx shadcx@latest add plate/editor-ai -o && ./post-registry.sh \ No newline at end of file diff --git a/scripts/post-ai.sh b/scripts/post-ai.sh new file mode 100644 index 0000000000..3a530e27a6 --- /dev/null +++ b/scripts/post-ai.sh @@ -0,0 +1 @@ +sed -i '' 's|"url": "http://localhost:3000/r"|"url": "https://platejs.org/r"|' templates/plate-playground-template/components.json \ No newline at end of file diff --git a/scripts/post-basic.sh b/scripts/post-basic.sh new file mode 100644 index 0000000000..d8347f0fcc --- /dev/null +++ b/scripts/post-basic.sh @@ -0,0 +1 @@ +sed -i '' 's|"url": "http://localhost:3000/r"|"url": "https://platejs.org/r"|' templates/plate-template/components.json \ No newline at end of file diff --git a/scripts/pre-ai.sh b/scripts/pre-ai.sh new file mode 100644 index 0000000000..145d9cd6b8 --- /dev/null +++ b/scripts/pre-ai.sh @@ -0,0 +1 @@ +sed -i '' 's|"url": "https://platejs.org/r"|"url": "http://localhost:3000/r"|' templates/plate-playground-template/components.json \ No newline at end of file diff --git a/scripts/pre-basic.sh b/scripts/pre-basic.sh new file mode 100644 index 0000000000..6e80693a17 --- /dev/null +++ b/scripts/pre-basic.sh @@ -0,0 +1 @@ +sed -i '' 's|"url": "https://platejs.org/r"|"url": "http://localhost:3000/r"|' templates/plate-template/components.json \ No newline at end of file diff --git a/templates/plate-playground-template/.eslintrc.js b/templates/plate-playground-template/.eslintrc.js index 12e2acda04..462dd3d4a9 100644 --- a/templates/plate-playground-template/.eslintrc.js +++ b/templates/plate-playground-template/.eslintrc.js @@ -24,7 +24,7 @@ module.exports = { 'react/display-name': 'off', 'react/jsx-key': 'off', 'react/no-unescaped-entities': 'off', - 'tailwindcss/classnames-order': 'warn', + 'tailwindcss/classnames-order': 'off', 'tailwindcss/no-custom-classname': 'off', 'unused-imports/no-unused-imports': 'warn', 'unused-imports/no-unused-vars': [ diff --git a/templates/plate-playground-template/README.md b/templates/plate-playground-template/README.md index 508e72eb4e..f3aecddb8a 100644 --- a/templates/plate-playground-template/README.md +++ b/templates/plate-playground-template/README.md @@ -24,7 +24,7 @@ npx shadcx@latest add editor-ai -r plate ### 2. Using Template -[Use this template](https://github.com/plate-editor/plate-template/generate), then install dependencies: +[Use this template](https://github.com/udecode/plate-playground-template/generate), then install dependencies: ```bash pnpm install @@ -41,7 +41,7 @@ cp .env.example .env.local Configure `.env.local`: - `OPENAI_API_KEY` – OpenAI API key ([get one here](https://platform.openai.com/account/api-keys)) -- `UPLOADTHING_TOKEN` – UploadThing API key ([get one here](https://uploadthing.com/dashboard)) You can also using your own backend +- `UPLOADTHING_TOKEN` – UploadThing API key ([get one here](https://uploadthing.com/dashboard)) Start the development server: diff --git a/templates/plate-playground-template/package.json b/templates/plate-playground-template/package.json index 4cea2810d7..6f7930a8f6 100644 --- a/templates/plate-playground-template/package.json +++ b/templates/plate-playground-template/package.json @@ -16,11 +16,11 @@ "@ai-sdk/openai": "^0.0.72", "@ariakit/react": "^0.4.13", "@faker-js/faker": "^9.2.0", + "@radix-ui/react-alert-dialog": "^1.1.2", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.1.2", - "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-separator": "^1.1.0", @@ -28,7 +28,7 @@ "@radix-ui/react-toolbar": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", "@udecode/cn": "^39.0.0", - "@udecode/plate-ai": "40.1.0", + "@udecode/plate-ai": "40.2.2", "@udecode/plate-alignment": "^40.0.0", "@udecode/plate-autoformat": "^40.0.0", "@udecode/plate-basic-elements": "^40.0.2", @@ -44,7 +44,7 @@ "@udecode/plate-cursor": "^40.0.0", "@udecode/plate-date": "^40.0.0", "@udecode/plate-dnd": "40.0.0", - "@udecode/plate-docx": "40.2.0", + "@udecode/plate-docx": "40.2.3", "@udecode/plate-emoji": "^40.0.0", "@udecode/plate-excalidraw": "^40.0.0", "@udecode/plate-floating": "^40.0.0", @@ -59,9 +59,9 @@ "@udecode/plate-layout": "^40.0.0", "@udecode/plate-line-height": "^40.0.0", "@udecode/plate-link": "^40.0.0", - "@udecode/plate-markdown": "40.0.5", + "@udecode/plate-markdown": "40.2.2", "@udecode/plate-math": "^40.0.0", - "@udecode/plate-media": "40.2.0", + "@udecode/plate-media": "40.2.3", "@udecode/plate-mention": "40.0.0", "@udecode/plate-node-id": "^40.0.0", "@udecode/plate-reset-node": "^40.0.0", @@ -74,11 +74,6 @@ "@udecode/plate-toggle": "^40.0.0", "@udecode/plate-trailing-block": "^40.0.0", "@uploadthing/react": "7.1.0", - "uploadthing": "7.2.0", - "zod": "^3.23.8", - "react-player": "^2.16.0", - "sonner": "^1.5.0", - "use-file-picker": "^2.1.2", "ai": "^3.4.33", "class-variance-authority": "0.7.0", "clsx": "^2.1.1", @@ -93,6 +88,7 @@ "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.3.1", "react-lite-youtube-embed": "^2.4.0", + "react-player": "^2.16.0", "react-resizable-panels": "^2.1.6", "react-tweet": "^3.2.1", "slate": "^0.110.2", @@ -100,12 +96,15 @@ "slate-history": "^0.110.3", "slate-hyperscript": "^0.100.0", "slate-react": "^0.111.0", + "sonner": "^1.7.0", "tailwind-merge": "2.5.4", "tailwind-scrollbar-hide": "^1.1.7", - "tailwindcss-animate": "1.0.7" + "tailwindcss-animate": "1.0.7", + "uploadthing": "7.2.0", + "use-file-picker": "^2.1.2", + "zod": "^3.23.8" }, "devDependencies": { - "eslint-plugin-prettier": "^5.2.1", "@types/node": "^22.9.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", @@ -116,6 +115,7 @@ "eslint-config-next": "15.0.3", "eslint-config-prettier": "^9.1.0", "eslint-plugin-perfectionist": "3.9.1", + "eslint-plugin-prettier": "^5.2.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 d46fd5d769..94d988fd30 100644 --- a/templates/plate-playground-template/pnpm-lock.yaml +++ b/templates/plate-playground-template/pnpm-lock.yaml @@ -18,7 +18,7 @@ importers: specifier: ^9.2.0 version: 9.2.0 '@radix-ui/react-alert-dialog': - specifier: ^1.1.1 + 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-avatar': specifier: ^1.1.1 @@ -54,8 +54,8 @@ 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: 40.1.0 - version: 40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) + specifier: 40.2.2 + version: 40.2.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-alignment': specifier: ^40.0.0 version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) @@ -102,8 +102,8 @@ importers: specifier: 40.0.0 version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dnd-html5-backend@16.0.1)(react-dnd@16.0.1(@types/node@22.9.0)(@types/react@18.3.12)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-docx': - specifier: 40.2.0 - version: 40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) + specifier: 40.2.3 + version: 40.2.3(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-emoji': specifier: ^40.0.0 version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) @@ -147,14 +147,14 @@ importers: specifier: ^40.0.0 version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-markdown': - specifier: 40.0.5 - version: 40.0.5(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) + specifier: 40.2.2 + version: 40.2.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-math': specifier: ^40.0.0 version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-media': - specifier: 40.2.0 - version: 40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) + specifier: 40.2.3 + version: 40.2.3(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-mention': specifier: 40.0.0 version: 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) @@ -193,7 +193,7 @@ importers: version: 7.1.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(uploadthing@7.2.0(next@15.0.3(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(tailwindcss@3.4.14)) ai: specifier: ^3.4.33 - version: 3.4.33(react@18.3.1)(sswr@2.1.0(svelte@5.2.0))(svelte@5.2.0)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8) + version: 3.4.33(react@18.3.1)(sswr@2.1.0(svelte@5.2.4))(svelte@5.2.4)(vue@3.5.13(typescript@5.6.3))(zod@3.23.8) class-variance-authority: specifier: 0.7.0 version: 0.7.0 @@ -258,7 +258,7 @@ importers: 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) sonner: - specifier: ^1.5.0 + specifier: ^1.7.0 version: 1.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tailwind-merge: specifier: 2.5.4 @@ -308,7 +308,7 @@ importers: version: 9.1.0(eslint@8.57.1) eslint-plugin-perfectionist: specifier: 3.9.1 - version: 3.9.1(eslint@8.57.1)(svelte@5.2.0)(typescript@5.6.3) + version: 3.9.1(eslint@8.57.1)(svelte@5.2.4)(typescript@5.6.3) 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) @@ -320,7 +320,7 @@ importers: version: 3.17.5(tailwindcss@3.4.14) eslint-plugin-unused-imports: specifier: ^4.1.3 - version: 4.1.4(@typescript-eslint/eslint-plugin@8.14.0(@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1) + version: 4.1.4(@typescript-eslint/eslint-plugin@8.15.0(@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1) postcss: specifier: ^8.4.49 version: 8.4.49 @@ -1388,6 +1388,17 @@ packages: typescript: optional: true + '@typescript-eslint/eslint-plugin@8.15.0': + resolution: {integrity: sha512-+zkm9AR1Ds9uLWN3fkoeXgFppaQ+uEVtfOV62dDmsy9QCNqlRHWNEck4yarvRNrvRcHQLGfqBNui3cimoz8XAg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0 + eslint: ^8.57.0 || ^9.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/parser@8.14.0': resolution: {integrity: sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1406,6 +1417,10 @@ packages: resolution: {integrity: sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/scope-manager@8.15.0': + resolution: {integrity: sha512-QRGy8ADi4J7ii95xz4UoiymmmMd/zuy9azCaamnZ3FM8T5fZcex8UfJcjkiEZjJSztKfEBe3dZ5T/5RHAmw2mA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/type-utils@8.14.0': resolution: {integrity: sha512-Xcz9qOtZuGusVOH5Uk07NGs39wrKkf3AxlkK79RBK6aJC1l03CobXjJbwBPSidetAOV+5rEVuiT1VSBUOAsanQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1415,6 +1430,16 @@ packages: typescript: optional: true + '@typescript-eslint/type-utils@8.15.0': + resolution: {integrity: sha512-UU6uwXDoI3JGSXmcdnP5d8Fffa2KayOhUUqr/AiBnG1Gl7+7ut/oyagVeSkh7bxQ0zSXV9ptRh/4N15nkCqnpw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/types@8.12.2': resolution: {integrity: sha512-VwDwMF1SZ7wPBUZwmMdnDJ6sIFk4K4s+ALKLP6aIQsISkPv8jhiw65sAK6SuWODN/ix+m+HgbYDkH+zLjrzvOA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1423,6 +1448,10 @@ packages: resolution: {integrity: sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/types@8.15.0': + resolution: {integrity: sha512-n3Gt8Y/KyJNe0S3yDCD2RVKrHBC4gTUcLTebVBXacPy091E6tNspFLKRXlk3hwT4G55nfr1n2AdFqi/XMxzmPQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/typescript-estree@8.12.2': resolution: {integrity: sha512-mME5MDwGe30Pq9zKPvyduyU86PH7aixwqYR2grTglAdB+AN8xXQ1vFGpYaUSJ5o5P/5znsSBeNcs5g5/2aQwow==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1441,6 +1470,15 @@ packages: typescript: optional: true + '@typescript-eslint/typescript-estree@8.15.0': + resolution: {integrity: sha512-1eMp2JgNec/niZsR7ioFBlsh/Fk0oJbhaqO0jRyQBMgkz7RrFfkqF9lYYmBoGBaSiLnu8TAPQTwoTUiSTUW9dg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/utils@8.12.2': resolution: {integrity: sha512-UTTuDIX3fkfAz6iSVa5rTuSfWIYZ6ATtEocQ/umkRSyC9O919lbZ8dcH7mysshrCdrAM03skJOEYaBugxN+M6A==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1453,6 +1491,16 @@ packages: peerDependencies: eslint: ^8.57.0 || ^9.0.0 + '@typescript-eslint/utils@8.15.0': + resolution: {integrity: sha512-k82RI9yGhr0QM3Dnq+egEpz9qB6Un+WLYhmoNcvl8ltMEededhh7otBVVIDDsEEttauwdY/hQoSsOv13lxrFzQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/visitor-keys@8.12.2': resolution: {integrity: sha512-PChz8UaKQAVNHghsHcPyx1OMHoFRUEA7rJSK/mDhdq85bk+PLsUHUBqTQTFt18VJZbmxBovM65fezlheQRsSDA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1461,6 +1509,10 @@ packages: resolution: {integrity: sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/visitor-keys@8.15.0': + resolution: {integrity: sha512-h8vYOulWec9LhpwfAdZf2bjr8xIp0KNKnpgqSz0qqYYKAW/QZKw3ktRndbiAtUz4acH4QLQavwZBYCc0wulA/Q==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@udecode/cn@39.0.0': resolution: {integrity: sha512-8dpu2gS/weqSbhMNOIHYz0mvUOiliD97tZUkdsODm6dvwZPCrOMM5pF3Ll8vzI6ONbVsVYT3rBs8lCtSnjJbeA==} peerDependencies: @@ -1469,8 +1521,8 @@ packages: react-dom: '>=16.8.0' tailwind-merge: '>=2.2.0' - '@udecode/plate-ai@40.1.0': - resolution: {integrity: sha512-sIYeEcUyxYOcHTcISlEWCWRoX6XODEltPGsBPgU8pFKuWNMIt34g06Q9YB2f211RLIVSikzGhKrhB/ARsL82fg==} + '@udecode/plate-ai@40.2.2': + resolution: {integrity: sha512-KwDch4ESGqfuX51NDnf6OxeJiEeW7ebs9i2M6EX+L2DJHSfAwUMop0G8AH/bqSwM/bIfrk58Sqqmvo36XvbYIw==} peerDependencies: '@udecode/plate-common': '>=40.0.0' react: '>=16.8.0' @@ -1672,8 +1724,8 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.111.0' - '@udecode/plate-docx@40.2.0': - resolution: {integrity: sha512-bS4b4OjfnMwUvu+EKc89DbQWIMnTx3bXwt+DypWXaf0WqAUYDyj0WAN/KXshRuyBjju29UE5nL1RjLQNO3Jumw==} + '@udecode/plate-docx@40.2.3': + resolution: {integrity: sha512-QuIWZnO6/BWrn0VAOpYna/xocaxjVZ20nTsuNlzqvQg7ngKi5Sv6y0YVKF2pwx/zMGU6DfC62fOOSuMqkXRDxg==} peerDependencies: '@udecode/plate-common': '>=40.0.3' react: '>=16.8.0' @@ -1864,8 +1916,8 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.111.0' - '@udecode/plate-markdown@40.0.5': - resolution: {integrity: sha512-Slbwurt3ltrH1Vru+RvBl4WbwtAC9BUgLbcIBiYLU8HDfd7Yr2+uJ568a3BeeT+QiRLONYuC5H2qIOZ38FFwlA==} + '@udecode/plate-markdown@40.2.2': + resolution: {integrity: sha512-SvAF6WFustu/4R2/DMe4RzcDhQlwLSZNaPA9V6oZ/Yn10EPkbprkd47zSF81HYF4qOcEyUw33VbFoTGEibyheg==} peerDependencies: '@udecode/plate-common': '>=40.0.3' react: '>=16.8.0' @@ -1888,8 +1940,8 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.111.0' - '@udecode/plate-media@40.2.0': - resolution: {integrity: sha512-7J+qMHVD2CzZ1xxoKl5MtnSFz81Y/6rfHIO5v8S2iBdUa5EDuEh7xmI44kNdQ1XCSeZVlkFhqiK1w74v2DzUnw==} + '@udecode/plate-media@40.2.3': + resolution: {integrity: sha512-5NZUrBstMSOf+CywZX5khX9A/eseyNKqyx7y7V5n9agDZwX1IvuBOdFoURTCZu8qX7VCvt3UNXyy8KMyEDW1Qg==} peerDependencies: '@udecode/plate-common': '>=40.0.3' react: '>=16.8.0' @@ -2108,34 +2160,34 @@ packages: '@uploadthing/shared@7.1.0': resolution: {integrity: sha512-6cdS2hq9jUJFU/tqRKHs5XsDIwc6HdaVI4ka0vRy+IwjPnQBR0iXHwqyCtNNssCCAq4zQxrZr3iNEDPNqc0dqw==} - '@vue/compiler-core@3.5.12': - resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==} + '@vue/compiler-core@3.5.13': + resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==} - '@vue/compiler-dom@3.5.12': - resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==} + '@vue/compiler-dom@3.5.13': + resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==} - '@vue/compiler-sfc@3.5.12': - resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==} + '@vue/compiler-sfc@3.5.13': + resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==} - '@vue/compiler-ssr@3.5.12': - resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==} + '@vue/compiler-ssr@3.5.13': + resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==} - '@vue/reactivity@3.5.12': - resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==} + '@vue/reactivity@3.5.13': + resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==} - '@vue/runtime-core@3.5.12': - resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==} + '@vue/runtime-core@3.5.13': + resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==} - '@vue/runtime-dom@3.5.12': - resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==} + '@vue/runtime-dom@3.5.13': + resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==} - '@vue/server-renderer@3.5.12': - resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==} + '@vue/server-renderer@3.5.13': + resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==} peerDependencies: - vue: 3.5.12 + vue: 3.5.13 - '@vue/shared@3.5.12': - resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==} + '@vue/shared@3.5.13': + resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==} acorn-jsx@5.3.2: resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} @@ -2762,6 +2814,10 @@ packages: resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + eslint-visitor-keys@4.2.0: + resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + eslint@8.57.1: resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -3294,8 +3350,8 @@ packages: peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc - magic-string@0.30.12: - resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==} + magic-string@0.30.13: + resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==} markdown-table@3.0.4: resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} @@ -3415,8 +3471,8 @@ packages: micromark-util-sanitize-uri@2.0.1: resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==} - micromark-util-subtokenize@2.0.2: - resolution: {integrity: sha512-xKxhkB62vwHUuuxHe9Xqty3UaAsizV2YKq5OV344u3hFBbf8zIYrhYOWhAQb94MtMPkjTOzzjJ/hid9/dR5vFA==} + micromark-util-subtokenize@2.0.3: + resolution: {integrity: sha512-VXJJuNxYWSoYL6AJ6OQECCFGhIU2GGHMw8tahogePBrjkG8aCCas3ibkp7RnVOSTClg2is05/R7maAhF1XyQMg==} micromark-util-symbol@2.0.1: resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==} @@ -4080,8 +4136,8 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - svelte@5.2.0: - resolution: {integrity: sha512-LOowFhMB0CoTzDsa90snaICFMftrxKlYsOhH4YP1AamjCSDBZvtDq0yB5QY8LJA1tFftcmpAhmLCK/gAOFNrtw==} + svelte@5.2.4: + resolution: {integrity: sha512-hsab3Inx/HKV6Y/FUwtX8yCkt+nl6n46zC7Z6y7VWoDFhJWEQ453vP0KmDL42cLm9Q92nZyOE+izANqjss61/A==} engines: {node: '>=18'} swr@2.2.5: @@ -4346,8 +4402,8 @@ packages: vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} - vue@3.5.12: - resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==} + vue@3.5.13: + resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==} peerDependencies: typescript: '*' peerDependenciesMeta: @@ -4480,13 +4536,13 @@ snapshots: transitivePeerDependencies: - zod - '@ai-sdk/svelte@0.0.57(svelte@5.2.0)(zod@3.23.8)': + '@ai-sdk/svelte@0.0.57(svelte@5.2.4)(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) - sswr: 2.1.0(svelte@5.2.0) + sswr: 2.1.0(svelte@5.2.4) optionalDependencies: - svelte: 5.2.0 + svelte: 5.2.4 transitivePeerDependencies: - zod @@ -4500,13 +4556,13 @@ snapshots: optionalDependencies: zod: 3.23.8 - '@ai-sdk/vue@0.0.59(vue@3.5.12(typescript@5.6.3))(zod@3.23.8)': + '@ai-sdk/vue@0.0.59(vue@3.5.13(typescript@5.6.3))(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) - swrv: 1.0.4(vue@3.5.12(typescript@5.6.3)) + swrv: 1.0.4(vue@3.5.13(typescript@5.6.3)) optionalDependencies: - vue: 3.5.12(typescript@5.6.3) + vue: 3.5.13(typescript@5.6.3) transitivePeerDependencies: - zod @@ -5354,6 +5410,25 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/eslint-plugin@8.15.0(@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)': + dependencies: + '@eslint-community/regexpp': 4.12.1 + '@typescript-eslint/parser': 8.14.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/scope-manager': 8.15.0 + '@typescript-eslint/type-utils': 8.15.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/utils': 8.15.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 8.15.0 + eslint: 8.57.1 + graphemer: 1.4.0 + ignore: 5.3.2 + natural-compare: 1.4.0 + ts-api-utils: 1.4.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + optional: true + '@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3)': dependencies: '@typescript-eslint/scope-manager': 8.14.0 @@ -5377,6 +5452,12 @@ snapshots: '@typescript-eslint/types': 8.14.0 '@typescript-eslint/visitor-keys': 8.14.0 + '@typescript-eslint/scope-manager@8.15.0': + dependencies: + '@typescript-eslint/types': 8.15.0 + '@typescript-eslint/visitor-keys': 8.15.0 + optional: true + '@typescript-eslint/type-utils@8.14.0(eslint@8.57.1)(typescript@5.6.3)': dependencies: '@typescript-eslint/typescript-estree': 8.14.0(typescript@5.6.3) @@ -5389,10 +5470,26 @@ snapshots: - eslint - supports-color + '@typescript-eslint/type-utils@8.15.0(eslint@8.57.1)(typescript@5.6.3)': + dependencies: + '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3) + '@typescript-eslint/utils': 8.15.0(eslint@8.57.1)(typescript@5.6.3) + debug: 4.3.7 + eslint: 8.57.1 + ts-api-utils: 1.4.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + optional: true + '@typescript-eslint/types@8.12.2': {} '@typescript-eslint/types@8.14.0': {} + '@typescript-eslint/types@8.15.0': + optional: true + '@typescript-eslint/typescript-estree@8.12.2(typescript@5.6.3)': dependencies: '@typescript-eslint/types': 8.12.2 @@ -5423,6 +5520,22 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/typescript-estree@8.15.0(typescript@5.6.3)': + dependencies: + '@typescript-eslint/types': 8.15.0 + '@typescript-eslint/visitor-keys': 8.15.0 + debug: 4.3.7 + fast-glob: 3.3.2 + is-glob: 4.0.3 + minimatch: 9.0.5 + semver: 7.6.3 + ts-api-utils: 1.4.0(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + optional: true + '@typescript-eslint/utils@8.12.2(eslint@8.57.1)(typescript@5.6.3)': dependencies: '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) @@ -5445,6 +5558,19 @@ snapshots: - supports-color - typescript + '@typescript-eslint/utils@8.15.0(eslint@8.57.1)(typescript@5.6.3)': + dependencies: + '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1) + '@typescript-eslint/scope-manager': 8.15.0 + '@typescript-eslint/types': 8.15.0 + '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3) + eslint: 8.57.1 + optionalDependencies: + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + optional: true + '@typescript-eslint/visitor-keys@8.12.2': dependencies: '@typescript-eslint/types': 8.12.2 @@ -5455,6 +5581,12 @@ snapshots: '@typescript-eslint/types': 8.14.0 eslint-visitor-keys: 3.4.3 + '@typescript-eslint/visitor-keys@8.15.0': + dependencies: + '@typescript-eslint/types': 8.15.0 + eslint-visitor-keys: 4.2.0 + optional: true + '@udecode/cn@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)': 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) @@ -5465,10 +5597,10 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@udecode/plate-ai@40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': + '@udecode/plate-ai@40.2.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': dependencies: '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2) - '@udecode/plate-markdown': 40.0.5(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) + '@udecode/plate-markdown': 40.2.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-selection': 40.1.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) lodash: 4.17.21 react: 18.3.1 @@ -5701,13 +5833,13 @@ snapshots: slate-hyperscript: 0.100.0(slate@0.110.2) slate-react: 0.111.0(react-dom@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@40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': + '@udecode/plate-docx@40.2.3(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': dependencies: '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-heading': 40.0.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-indent': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-indent-list': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) - '@udecode/plate-media': 40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) + '@udecode/plate-media': 40.2.3(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) '@udecode/plate-table': 40.0.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -5899,7 +6031,7 @@ snapshots: slate-hyperscript: 0.100.0(slate@0.110.2) slate-react: 0.111.0(react-dom@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@40.0.5(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': + '@udecode/plate-markdown@40.2.2(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': dependencies: '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2) lodash: 4.17.21 @@ -5928,7 +6060,7 @@ snapshots: slate-hyperscript: 0.100.0(slate@0.110.2) slate-react: 0.111.0(react-dom@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@40.2.0(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': + '@udecode/plate-media@40.2.3(@udecode/plate-common@40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(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))(slate@0.110.2)': dependencies: '@udecode/plate-common': 40.0.3(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-dom@0.111.0(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))(slate@0.110.2) js-video-url-parser: 0.5.1 @@ -6171,59 +6303,59 @@ snapshots: effect: 3.10.3 sqids: 0.3.0 - '@vue/compiler-core@3.5.12': + '@vue/compiler-core@3.5.13': dependencies: '@babel/parser': 7.26.2 - '@vue/shared': 3.5.12 + '@vue/shared': 3.5.13 entities: 4.5.0 estree-walker: 2.0.2 source-map-js: 1.2.1 - '@vue/compiler-dom@3.5.12': + '@vue/compiler-dom@3.5.13': dependencies: - '@vue/compiler-core': 3.5.12 - '@vue/shared': 3.5.12 + '@vue/compiler-core': 3.5.13 + '@vue/shared': 3.5.13 - '@vue/compiler-sfc@3.5.12': + '@vue/compiler-sfc@3.5.13': dependencies: '@babel/parser': 7.26.2 - '@vue/compiler-core': 3.5.12 - '@vue/compiler-dom': 3.5.12 - '@vue/compiler-ssr': 3.5.12 - '@vue/shared': 3.5.12 + '@vue/compiler-core': 3.5.13 + '@vue/compiler-dom': 3.5.13 + '@vue/compiler-ssr': 3.5.13 + '@vue/shared': 3.5.13 estree-walker: 2.0.2 - magic-string: 0.30.12 + magic-string: 0.30.13 postcss: 8.4.49 source-map-js: 1.2.1 - '@vue/compiler-ssr@3.5.12': + '@vue/compiler-ssr@3.5.13': dependencies: - '@vue/compiler-dom': 3.5.12 - '@vue/shared': 3.5.12 + '@vue/compiler-dom': 3.5.13 + '@vue/shared': 3.5.13 - '@vue/reactivity@3.5.12': + '@vue/reactivity@3.5.13': dependencies: - '@vue/shared': 3.5.12 + '@vue/shared': 3.5.13 - '@vue/runtime-core@3.5.12': + '@vue/runtime-core@3.5.13': dependencies: - '@vue/reactivity': 3.5.12 - '@vue/shared': 3.5.12 + '@vue/reactivity': 3.5.13 + '@vue/shared': 3.5.13 - '@vue/runtime-dom@3.5.12': + '@vue/runtime-dom@3.5.13': dependencies: - '@vue/reactivity': 3.5.12 - '@vue/runtime-core': 3.5.12 - '@vue/shared': 3.5.12 + '@vue/reactivity': 3.5.13 + '@vue/runtime-core': 3.5.13 + '@vue/shared': 3.5.13 csstype: 3.1.3 - '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.3))': + '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.6.3))': dependencies: - '@vue/compiler-ssr': 3.5.12 - '@vue/shared': 3.5.12 - vue: 3.5.12(typescript@5.6.3) + '@vue/compiler-ssr': 3.5.13 + '@vue/shared': 3.5.13 + vue: 3.5.13(typescript@5.6.3) - '@vue/shared@3.5.12': {} + '@vue/shared@3.5.13': {} acorn-jsx@5.3.2(acorn@8.12.1): dependencies: @@ -6237,15 +6369,15 @@ snapshots: acorn@8.14.0: {} - ai@3.4.33(react@18.3.1)(sswr@2.1.0(svelte@5.2.0))(svelte@5.2.0)(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.2.4))(svelte@5.2.4)(vue@3.5.13(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.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.2.0)(zod@3.23.8) + '@ai-sdk/svelte': 0.0.57(svelte@5.2.4)(zod@3.23.8) '@ai-sdk/ui-utils': 0.0.50(zod@3.23.8) - '@ai-sdk/vue': 0.0.59(vue@3.5.12(typescript@5.6.3))(zod@3.23.8) + '@ai-sdk/vue': 0.0.59(vue@3.5.13(typescript@5.6.3))(zod@3.23.8) '@opentelemetry/api': 1.9.0 eventsource-parser: 1.1.2 json-schema: 0.4.0 @@ -6254,8 +6386,8 @@ snapshots: zod-to-json-schema: 3.23.5(zod@3.23.8) optionalDependencies: react: 18.3.1 - sswr: 2.1.0(svelte@5.2.0) - svelte: 5.2.0 + sswr: 2.1.0(svelte@5.2.4) + svelte: 5.2.4 zod: 3.23.8 transitivePeerDependencies: - solid-js @@ -6920,7 +7052,7 @@ snapshots: safe-regex-test: 1.0.3 string.prototype.includes: 2.0.1 - eslint-plugin-perfectionist@3.9.1(eslint@8.57.1)(svelte@5.2.0)(typescript@5.6.3): + eslint-plugin-perfectionist@3.9.1(eslint@8.57.1)(svelte@5.2.4)(typescript@5.6.3): dependencies: '@typescript-eslint/types': 8.12.2 '@typescript-eslint/utils': 8.12.2(eslint@8.57.1)(typescript@5.6.3) @@ -6928,7 +7060,7 @@ snapshots: minimatch: 9.0.5 natural-compare-lite: 1.4.0 optionalDependencies: - svelte: 5.2.0 + svelte: 5.2.4 transitivePeerDependencies: - supports-color - typescript @@ -6974,11 +7106,11 @@ snapshots: postcss: 8.4.49 tailwindcss: 3.4.14 - eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.14.0(@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1): + eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.15.0(@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1): dependencies: eslint: 8.57.1 optionalDependencies: - '@typescript-eslint/eslint-plugin': 8.14.0(@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/eslint-plugin': 8.15.0(@typescript-eslint/parser@8.14.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3) eslint-scope@7.2.2: dependencies: @@ -6987,6 +7119,9 @@ snapshots: eslint-visitor-keys@3.4.3: {} + eslint-visitor-keys@4.2.0: + optional: true + eslint@8.57.1: dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.1) @@ -7542,7 +7677,7 @@ snapshots: dependencies: react: 18.3.1 - magic-string@0.30.12: + magic-string@0.30.13: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 @@ -7671,7 +7806,7 @@ snapshots: micromark-util-html-tag-name: 2.0.1 micromark-util-normalize-identifier: 2.0.1 micromark-util-resolve-all: 2.0.1 - micromark-util-subtokenize: 2.0.2 + micromark-util-subtokenize: 2.0.3 micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.1 @@ -7814,7 +7949,7 @@ snapshots: micromark-util-encode: 2.0.1 micromark-util-symbol: 2.0.1 - micromark-util-subtokenize@2.0.2: + micromark-util-subtokenize@2.0.3: dependencies: devlop: 1.1.0 micromark-util-chunked: 2.0.1 @@ -7841,7 +7976,7 @@ snapshots: micromark-util-normalize-identifier: 2.0.1 micromark-util-resolve-all: 2.0.1 micromark-util-sanitize-uri: 2.0.1 - micromark-util-subtokenize: 2.0.2 + micromark-util-subtokenize: 2.0.3 micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.1 transitivePeerDependencies: @@ -8456,9 +8591,9 @@ snapshots: sqids@0.3.0: {} - sswr@2.1.0(svelte@5.2.0): + sswr@2.1.0(svelte@5.2.4): dependencies: - svelte: 5.2.0 + svelte: 5.2.4 swrev: 4.0.0 streamsearch@1.1.0: {} @@ -8553,7 +8688,7 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - svelte@5.2.0: + svelte@5.2.4: dependencies: '@ampproject/remapping': 2.3.0 '@jridgewell/sourcemap-codec': 1.5.0 @@ -8566,7 +8701,7 @@ snapshots: esrap: 1.2.2 is-reference: 3.0.3 locate-character: 3.0.0 - magic-string: 0.30.12 + magic-string: 0.30.13 zimmerframe: 1.1.2 swr@2.2.5(react@18.3.1): @@ -8577,9 +8712,9 @@ snapshots: swrev@4.0.0: {} - swrv@1.0.4(vue@3.5.12(typescript@5.6.3)): + swrv@1.0.4(vue@3.5.13(typescript@5.6.3)): dependencies: - vue: 3.5.12(typescript@5.6.3) + vue: 3.5.13(typescript@5.6.3) synckit@0.9.2: dependencies: @@ -8840,13 +8975,13 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 - vue@3.5.12(typescript@5.6.3): + vue@3.5.13(typescript@5.6.3): dependencies: - '@vue/compiler-dom': 3.5.12 - '@vue/compiler-sfc': 3.5.12 - '@vue/runtime-dom': 3.5.12 - '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.3)) - '@vue/shared': 3.5.12 + '@vue/compiler-dom': 3.5.13 + '@vue/compiler-sfc': 3.5.13 + '@vue/runtime-dom': 3.5.13 + '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.6.3)) + '@vue/shared': 3.5.13 optionalDependencies: typescript: 5.6.3 diff --git a/templates/plate-playground-template/src/app/api/uploadthing/route.ts b/templates/plate-playground-template/src/app/api/uploadthing/route.ts index 1a20e0732b..f3d0c2d5b3 100644 --- a/templates/plate-playground-template/src/app/api/uploadthing/route.ts +++ b/templates/plate-playground-template/src/app/api/uploadthing/route.ts @@ -4,31 +4,18 @@ import { createRouteHandler, createUploadthing } from 'uploadthing/next'; const f = createUploadthing(); -// FileRouter for your app, can contain multiple FileRoutes const ourFileRouter = { - // Define as many FileRoutes as you like, each with a unique routeSlug - imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio']) - // Set permissions and file types for this FileRoute - .middleware(async ({ req }) => { - // This code runs on your server before upload - - // Whatever is returned here is accessible in onUploadComplete as `metadata` + editorUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio']) + .middleware(() => { return {}; }) - .onUploadComplete(({ file, metadata }) => { - // This code RUNS ON YOUR SERVER after upload - - // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback + .onUploadComplete(({ file }) => { return { file }; }), } satisfies FileRouter; export type OurFileRouter = typeof ourFileRouter; -// Export routes for Next App Router export const { GET, POST } = createRouteHandler({ router: ourFileRouter, - - // Apply an (optional) custom config: - // config: { ... }, }); diff --git a/templates/plate-playground-template/src/app/editor/page.tsx b/templates/plate-playground-template/src/app/editor/page.tsx index 6f6314dc11..9f48689e67 100644 --- a/templates/plate-playground-template/src/app/editor/page.tsx +++ b/templates/plate-playground-template/src/app/editor/page.tsx @@ -1,15 +1,16 @@ import { Toaster } from 'sonner'; import { PlateEditor } from '@/components/editor/plate-editor'; -import { OpenAIProvider } from '@/components/editor/use-chat'; +import { SettingsProvider } from '@/components/editor/settings'; export default function Page() { return (
- + - - + + +
); } diff --git a/templates/plate-playground-template/src/components/editor/plate-editor.tsx b/templates/plate-playground-template/src/components/editor/plate-editor.tsx index 85c96457ba..f33241b04b 100644 --- a/templates/plate-playground-template/src/components/editor/plate-editor.tsx +++ b/templates/plate-playground-template/src/components/editor/plate-editor.tsx @@ -6,8 +6,8 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import { Plate } from '@udecode/plate-common/react'; -import { SettingsDialog } from '@/components/editor/use-chat'; import { useCreateEditor } from '@/components/editor/use-create-editor'; +import { SettingsDialog } from '@/components/editor/settings'; import { Editor, EditorContainer } from '@/components/plate-ui/editor'; export function PlateEditor() { diff --git a/templates/plate-playground-template/src/components/editor/plugins/ai-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/ai-plugins.tsx index bb4f6098c6..29cb89691f 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/ai-plugins.tsx +++ b/templates/plate-playground-template/src/components/editor/plugins/ai-plugins.tsx @@ -26,8 +26,8 @@ import { HEADING_KEYS } from '@udecode/plate-heading'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; import { LinkPlugin } from '@udecode/plate-link/react'; import { MarkdownPlugin } from '@udecode/plate-markdown'; -import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; +import { cursorOverlayPlugin } from '@/components/editor/plugins/cursor-overlay-plugin'; 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'; @@ -40,6 +40,7 @@ import { LinkElement } from '@/components/plate-ui/link-element'; import { ParagraphElement } from '@/components/plate-ui/paragraph-element'; import { basicNodesPlugins } from './basic-nodes-plugins'; +import { blockSelectionReadOnlyPlugin } from './block-selection-plugins'; import { indentListPlugins } from './indent-list-plugins'; import { linkPlugin } from './link-plugin'; @@ -66,23 +67,13 @@ const createAIEditor = () => { }, }, plugins: [ - ParagraphPlugin, ...basicNodesPlugins, + ...indentListPlugins, HorizontalRulePlugin, linkPlugin, - ...indentListPlugins, MarkdownPlugin.configure({ options: { indentList: true } }), - // FIXME - BlockSelectionPlugin.configure({ - api: {}, - extendEditor: null, - options: {}, - render: {}, - useHooks: null, - handlers: {}, - }), + blockSelectionReadOnlyPlugin, ], - value: [{ children: [{ text: '' }], type: 'p' }], }); return editor; @@ -170,6 +161,7 @@ export const PROMPT_TEMPLATES = { }; export const aiPlugins = [ + cursorOverlayPlugin, MarkdownPlugin.configure({ options: { indentList: true } }), AIPlugin, AIChatPlugin.configure({ diff --git a/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts b/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts index 35edf1fd42..246efe37b7 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts +++ b/templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.ts @@ -13,3 +13,12 @@ export const blockSelectionPlugins = [ }, }), ] as const; + +export const blockSelectionReadOnlyPlugin = BlockSelectionPlugin.configure({ + api: {}, + extendEditor: null, + options: {}, + render: {}, + useHooks: null, + handlers: {}, +}); diff --git a/templates/plate-playground-template/src/components/editor/plugins/copilot-plugins.ts b/templates/plate-playground-template/src/components/editor/plugins/copilot-plugins.tsx similarity index 100% rename from templates/plate-playground-template/src/components/editor/plugins/copilot-plugins.ts rename to templates/plate-playground-template/src/components/editor/plugins/copilot-plugins.tsx diff --git a/templates/plate-playground-template/src/components/editor/plugins/cursor-overlay-plugin.tsx b/templates/plate-playground-template/src/components/editor/plugins/cursor-overlay-plugin.tsx new file mode 100644 index 0000000000..dd94e47358 --- /dev/null +++ b/templates/plate-playground-template/src/components/editor/plugins/cursor-overlay-plugin.tsx @@ -0,0 +1,11 @@ +'use client'; + +import { CursorOverlayPlugin } from '@udecode/plate-selection/react'; + +import { CursorOverlay } from '@/components/plate-ui/cursor-overlay'; + +export const cursorOverlayPlugin = CursorOverlayPlugin.configure({ + render: { + afterEditable: () => , + }, +}); diff --git a/templates/plate-playground-template/src/components/editor/plugins/delete-plugins.ts b/templates/plate-playground-template/src/components/editor/plugins/delete-plugins.ts index 947137bc50..ff384acbcd 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/delete-plugins.ts +++ b/templates/plate-playground-template/src/components/editor/plugins/delete-plugins.ts @@ -1,7 +1,13 @@ 'use client'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; -import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; +import { + AudioPlugin, + FilePlugin, + ImagePlugin, + MediaEmbedPlugin, + VideoPlugin, +} from '@udecode/plate-media/react'; import { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select'; export const deletePlugins = [ @@ -10,6 +16,9 @@ export const deletePlugins = [ query: { allow: [ ImagePlugin.key, + VideoPlugin.key, + AudioPlugin.key, + FilePlugin.key, MediaEmbedPlugin.key, HorizontalRulePlugin.key, ], diff --git a/templates/plate-playground-template/src/components/editor/plugins/editor-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/editor-plugins.tsx index adfbbddd95..7dca88d29d 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/editor-plugins.tsx +++ b/templates/plate-playground-template/src/components/editor/plugins/editor-plugins.tsx @@ -20,12 +20,12 @@ import { EquationPlugin, InlineEquationPlugin, } from '@udecode/plate-math/react'; -import { CursorOverlayPlugin } from '@udecode/plate-selection/react'; import { SlashPlugin } from '@udecode/plate-slash-command/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; import { TrailingBlockPlugin } from '@udecode/plate-trailing-block'; -import { CursorOverlay } from '@/components/plate-ui/cursor-overlay'; +import { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin'; +import { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin'; import { aiPlugins } from './ai-plugins'; import { alignPlugin } from './align-plugin'; @@ -33,6 +33,7 @@ import { autoformatPlugin } from './autoformat-plugin'; import { basicNodesPlugins } from './basic-nodes-plugins'; import { blockMenuPlugins } from './block-menu-plugins'; import { commentsPlugin } from './comments-plugin'; +import { cursorOverlayPlugin } from './cursor-overlay-plugin'; import { deletePlugins } from './delete-plugins'; import { dndPlugins } from './dnd-plugins'; import { exitBreakPlugin } from './exit-break-plugin'; @@ -46,17 +47,12 @@ import { softBreakPlugin } from './soft-break-plugin'; import { tablePlugin } from './table-plugin'; import { tocPlugin } from './toc-plugin'; -export const editorPlugins = [ - // AI - ...aiPlugins, - - // Nodes +export const viewPlugins = [ ...basicNodesPlugins, HorizontalRulePlugin, linkPlugin, DatePlugin, mentionPlugin, - SlashPlugin, tablePlugin, TogglePlugin, tocPlugin, @@ -78,11 +74,21 @@ export const editorPlugins = [ ...indentListPlugins, lineHeightPlugin, + // Collaboration + commentsPlugin, +] as const; + +export const editorPlugins = [ + // AI + ...aiPlugins, + + // Nodes + ...viewPlugins, + // Functionality + SlashPlugin, autoformatPlugin, - CursorOverlayPlugin.configure({ - render: { afterEditable: () => }, - }), + cursorOverlayPlugin, ...blockMenuPlugins, ...dndPlugins, EmojiPlugin, @@ -92,11 +98,12 @@ export const editorPlugins = [ softBreakPlugin, TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }), - // Collaboration - commentsPlugin, - // Deserialization DocxPlugin, MarkdownPlugin.configure({ options: { indentList: true } }), JuicePlugin, + + // UI + FixedToolbarPlugin, + FloatingToolbarPlugin, ]; diff --git a/templates/plate-playground-template/src/components/editor/plugins/indent-list-plugins.ts b/templates/plate-playground-template/src/components/editor/plugins/indent-list-plugins.ts index f760cfca80..4f677e544b 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/indent-list-plugins.ts +++ b/templates/plate-playground-template/src/components/editor/plugins/indent-list-plugins.ts @@ -12,7 +12,10 @@ import { FireLiComponent, FireMarker, } from '@/components/plate-ui/indent-fire-marker'; -import { TodoLi, TodoMarker } from '@/components/plate-ui/indent-todo-marker'; +import { + TodoLi, + TodoMarker, +} from '@/components/plate-ui/indent-todo-marker'; export const indentListPlugins = [ IndentPlugin.extend({ diff --git a/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx index 2bd9e43722..430f803ab2 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx +++ b/templates/plate-playground-template/src/components/editor/plugins/media-plugins.tsx @@ -15,9 +15,7 @@ import { MediaUploadToast } from '@/components/plate-ui/media-upload-toast'; export const mediaPlugins = [ ImagePlugin.extend({ - options: { - disableUploadInsert: true, - }, + options: { disableUploadInsert: true }, render: { afterEditable: ImagePreview }, }), MediaEmbedPlugin, @@ -25,14 +23,18 @@ export const mediaPlugins = [ AudioPlugin, FilePlugin, CaptionPlugin.configure({ - options: { plugins: [ImagePlugin, MediaEmbedPlugin] }, - }), - PlaceholderPlugin.configure({ options: { - disableEmptyPlaceholder: true, - }, - render: { - afterEditable: () => , + plugins: [ + ImagePlugin, + VideoPlugin, + AudioPlugin, + FilePlugin, + MediaEmbedPlugin, + ], }, }), + PlaceholderPlugin.configure({ + options: { disableEmptyPlaceholder: true }, + render: { afterEditable: MediaUploadToast }, + }), ] as const; diff --git a/templates/plate-playground-template/src/components/editor/settings.tsx b/templates/plate-playground-template/src/components/editor/settings.tsx new file mode 100644 index 0000000000..5dceae1c08 --- /dev/null +++ b/templates/plate-playground-template/src/components/editor/settings.tsx @@ -0,0 +1,322 @@ +'use client'; + +import { type ReactNode, createContext, useContext, useState } from 'react'; + +import { cn } from '@udecode/cn'; +import { CopilotPlugin } from '@udecode/plate-ai/react'; +import { useEditorPlugin } from '@udecode/plate-common/react'; +import { + Check, + ChevronsUpDown, + ExternalLinkIcon, + Eye, + EyeOff, + Settings, + Wand2Icon, +} from 'lucide-react'; + +import { Button } from '@/components/plate-ui/button'; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from '@/components/plate-ui/command'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/plate-ui/dialog'; +import { Input } from '@/components/plate-ui/input'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@/components/plate-ui/popover'; + +interface Model { + label: string; + value: string; +} + +interface SettingsContextType { + keys: Record; + model: Model; + setKey: (service: string, 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 SettingsContext = createContext( + undefined +); + +export function SettingsProvider({ children }: { children: ReactNode }) { + const [keys, setKeys] = useState({ + openai: '', + uploadthing: '', + }); + const [model, setModel] = useState(models[0]); + + const setKey = (service: string, key: string) => { + setKeys((prev) => ({ ...prev, [service]: key })); + }; + + return ( + + {children} + + ); +} + +export function useSettings() { + const context = useContext(SettingsContext); + + return ( + context ?? { + keys: { + openai: '', + uploadthing: '', + }, + model: models[0], + setKey: () => {}, + setModel: () => {}, + } + ); +} + +export function SettingsDialog() { + const { keys, model, setKey, setModel } = useSettings(); + const [tempKeys, setTempKeys] = useState(keys); + const [showKey, setShowKey] = useState>({}); + const [open, setOpen] = useState(false); + const [openModel, setOpenModel] = useState(false); + + const { getOptions, setOption } = useEditorPlugin(CopilotPlugin); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + Object.entries(tempKeys).forEach(([service, key]) => { + setKey(service, key); + }); + setOpen(false); + + // Update AI options if needed + const completeOptions = getOptions().completeOptions ?? {}; + setOption('completeOptions', { + ...completeOptions, + body: { + ...completeOptions.body, + apiKey: tempKeys.openai, + model: model.value, + }, + }); + }; + + const toggleKeyVisibility = (key: string) => { + setShowKey((prev) => ({ ...prev, [key]: !prev[key] })); + }; + + const renderApiKeyInput = (service: string, label: string) => ( +
+
+ + +
+ + + setTempKeys((prev) => ({ ...prev, [service]: e.target.value })) + } + placeholder="" + data-1p-ignore + type={showKey[service] ? 'text' : 'password'} + /> + +
+ ); + + return ( + + + + + + + Settings + + Configure your API keys and preferences. + + + +
+ {/* AI Settings Group */} +
+
+
+ +
+

AI

+
+ +
+ {renderApiKeyInput('openai', 'OpenAI API key')} + +
+ + + + + + + + + No model found. + + + {models.map((m) => ( + { + setModel(m); + setOpenModel(false); + }} + > + + {m.label} + + ))} + + + + + +
+
+
+ + {/* Upload Settings Group */} + {/*
+
+
+ +
+

Upload

+
+ +
+ {renderApiKeyInput('uploadthing', 'Uploadthing API key')} +
+
*/} + + +
+ +

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

+ + + ); +} diff --git a/templates/plate-playground-template/src/components/editor/use-chat.ts b/templates/plate-playground-template/src/components/editor/use-chat.ts new file mode 100644 index 0000000000..385bdec4cd --- /dev/null +++ b/templates/plate-playground-template/src/components/editor/use-chat.ts @@ -0,0 +1,78 @@ +'use client'; + +import { faker } from '@faker-js/faker'; +import { useChat as useBaseChat } from 'ai/react'; + +import { useSettings } from '@/components/editor/settings'; + +export const useChat = () => { + const { keys, model } = useSettings(); + + return useBaseChat({ + id: 'editor', + api: '/api/ai/command', + body: { + // !!! DEMO ONLY: don't use API keys client-side + apiKey: keys.openai, + model: model.value, + }, + fetch: async (input, init) => { + const res = await fetch(input, init); + + if (!res.ok) { + // Mock the API response. Remove it when you implement the route /api/ai/command + await new Promise((resolve) => setTimeout(resolve, 400)); + + const stream = fakeStreamText(); + + return new Response(stream, { + headers: { + Connection: 'keep-alive', + 'Content-Type': 'text/plain', + }, + }); + } + + return res; + }, + }); +}; + +// 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/templates/plate-playground-template/src/components/editor/use-chat.tsx b/templates/plate-playground-template/src/components/editor/use-chat.tsx deleted file mode 100644 index d8e54488b4..0000000000 --- a/templates/plate-playground-template/src/components/editor/use-chat.tsx +++ /dev/null @@ -1,315 +0,0 @@ -'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 '@/components/plate-ui/button'; -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from '@/components/plate-ui/command'; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from '@/components/plate-ui/dialog'; -import { Input } from '@/components/plate-ui/input'; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from '@/components/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) => { - const res = await fetch(input, init); - - if (!res.ok) { - // Mock the API response. Remove it when you implement the route /api/ai/command - await new Promise((resolve) => setTimeout(resolve, 400)); - - const stream = fakeStreamText(); - - return new Response(stream, { - headers: { - Connection: 'keep-alive', - 'Content-Type': 'text/plain', - }, - }); - } - - return res; - }, - }); -}; - -// 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/templates/plate-playground-template/src/components/editor/use-create-editor.tsx b/templates/plate-playground-template/src/components/editor/use-create-editor.ts similarity index 95% rename from templates/plate-playground-template/src/components/editor/use-create-editor.tsx rename to templates/plate-playground-template/src/components/editor/use-create-editor.ts index d9c3cf6737..eced477bea 100644 --- a/templates/plate-playground-template/src/components/editor/use-create-editor.tsx +++ b/templates/plate-playground-template/src/components/editor/use-create-editor.ts @@ -74,7 +74,11 @@ import { HrElement } from '@/components/plate-ui/hr-element'; import { ImageElement } from '@/components/plate-ui/image-element'; import { KbdLeaf } from '@/components/plate-ui/kbd-leaf'; import { LinkElement } from '@/components/plate-ui/link-element'; +import { MediaAudioElement } from '@/components/plate-ui/media-audio-element'; import { MediaEmbedElement } from '@/components/plate-ui/media-embed-element'; +import { MediaFileElement } from '@/components/plate-ui/media-file-element'; +import { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element'; +import { MediaVideoElement } from '@/components/plate-ui/media-video-element'; 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'; @@ -90,11 +94,6 @@ 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 { MediaAudioElement } from '../plate-ui/media-audio-element'; -import { MediaFileElement } from '../plate-ui/media-file-element'; -import { MediaPlaceholderElement } from '../plate-ui/media-placeholder-element'; -import { MediaVideoElement } from '../plate-ui/media-video-element'; - export const useCreateEditor = () => { return usePlateEditor({ override: { 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 3fc74a21f7..7afbe5948e 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 @@ -127,14 +127,14 @@ export function AIMenu() { )} {isLoading ? ( -
+
{messages.length > 1 ? 'Editing...' : 'Thinking...'}
) : ( { if (isHotkey('backspace')(e) && input.length === 0) { diff --git a/templates/plate-playground-template/src/components/plate-ui/alert-dialog.tsx b/templates/plate-playground-template/src/components/plate-ui/alert-dialog.tsx index fd3f90a273..c98b9845cc 100644 --- a/templates/plate-playground-template/src/components/plate-ui/alert-dialog.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/alert-dialog.tsx @@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef< >(({ className, ...props }, ref) => ( (({ className, ...props }, ref) => ( )); @@ -105,7 +105,7 @@ const AlertDialogAction = React.forwardRef< >(({ className, ...props }, ref) => ( )); @@ -118,7 +118,7 @@ const AlertDialogCancel = React.forwardRef< ( ( className={cn('relative py-1', state.className, className)} {...props} > - 
+        
           {children}
         

 
diff --git a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx
index a1b24f1ced..dd0c48a2fd 100644
--- a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx
@@ -12,7 +12,7 @@ export const CodeLeaf = withRef(
         ref={ref}
         asChild
         className={cn(
-          'bg-muted whitespace-pre-wrap rounded-md px-[0.3em] py-[0.2em] font-mono text-sm',
+          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',
           className
         )}
         {...props}
diff --git a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx
index f68a0a9926..8714bdd987 100644
--- a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx
@@ -47,7 +47,7 @@ export function ColorDropdownMenuItem({
           size: 'icon',
           variant: 'outline',
         }),
-        'border-muted my-1 flex size-6 items-center justify-center rounded-full border border-solid p-0 transition-all hover:scale-125',
+        'my-1 flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0 transition-all hover:scale-125',
         !isBrightColor && 'border-transparent text-white hover:!text-white',
         className
       )}
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 5aec9a0ec3..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
@@ -60,7 +60,7 @@ export function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {
         side="top"
         sideOffset={10}
       >
-        

+        

           
diff --git a/templates/plate-playground-template/src/components/plate-ui/command.tsx b/templates/plate-playground-template/src/components/plate-ui/command.tsx
index 3395a99a64..0a4b9dc120 100644
--- a/templates/plate-playground-template/src/components/plate-ui/command.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/command.tsx
@@ -19,7 +19,7 @@ import { inputVariants } from './input';
 
 export const Command = withCn(
   CommandPrimitive,
-  'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md'
+  'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'
 );
 
 export function CommandDialog({ children, ...props }: DialogProps) {
@@ -27,7 +27,7 @@ export function CommandDialog({ children, ...props }: DialogProps) {
     
       
         Command Dialog
-        
+        
           {children}
         
       
@@ -42,7 +42,7 @@ export const CommandInput = withRef(
       {user?.name}
 
-        

+        

           {formatDistance(comment.createdAt, Date.now())} ago
         

 
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 6c8c748a71..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
@@ -34,7 +34,7 @@ export function CommentLeaf({
     
       
-        
       
diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx
index 165a973708..239a59ac27 100644
--- a/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx
@@ -18,7 +18,7 @@ export function CommentResolveButton() {
     
       {comment.isResolved ? (
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 7749b6c0a2..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
@@ -56,7 +56,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   (({ className, ...props }, ref) => (
   
 ));
@@ -201,7 +201,7 @@ const ContextMenuShortcut = ({
   return (
     
diff --git a/templates/plate-playground-template/src/components/plate-ui/date-element.tsx b/templates/plate-playground-template/src/components/plate-ui/date-element.tsx
index 54ceeafb50..a9b12737fb 100644
--- a/templates/plate-playground-template/src/components/plate-ui/date-element.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/date-element.tsx
@@ -23,7 +23,7 @@ export const DateElement = withRef(
           
             (
@@ -26,13 +26,13 @@ export const DialogContent = withRef(
       
         {children}
-        
+        
           
           Close
         
@@ -58,5 +58,5 @@ export const DialogTitle = withCn(
 
 export const DialogDescription = withCn(
   DialogPrimitive.Description,
-  'text-muted-foreground text-sm'
+  'text-sm text-muted-foreground'
 );
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 30ce35d65c..1b06eeef2b 100644
--- a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx
@@ -25,8 +25,6 @@ import { BlockSelectionPlugin } from '@udecode/plate-selection/react';
 import { GripVertical } from 'lucide-react';
 import { useSelected } from 'slate-react';
 
-import { useMounted } from '@/hooks/use-mounted';
-
 import {
   Tooltip,
   TooltipContent,
@@ -61,7 +59,6 @@ export const Draggable = withHOC(
       const state = useDraggableState({ element, onDropHandler });
       const { isDragging } = state;
       const { previewRef, handleRef } = useDraggable(state);
-      const mounted = useMounted();
 
       return (
         

-                

+                

                   
                 

               

@@ -117,7 +110,7 @@ const Gutter = React.forwardRef<
       ref={ref}
       className={cn(
         'slate-gutterLeft',
-        'main-hover:group-hover:opacity-100 absolute -top-px z-50 flex h-full -translate-x-full cursor-text hover:opacity-100 sm:opacity-0',
+        'absolute -top-px z-50 flex h-full -translate-x-full cursor-text hover:opacity-100 sm:opacity-0 main-hover:group-hover:opacity-100',
         isSelectionAreaVisible && 'hidden',
         !selected && 'opacity-0',
         className
@@ -138,7 +131,7 @@ const DragHandle = React.memo(() => {
       
         
            {
               event.stopPropagation();
               event.preventDefault();
diff --git a/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx
index 2ce862da31..2f4eb47a5f 100644
--- a/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx
@@ -94,7 +94,7 @@ export const DropdownMenuSubTrigger = withRef<
   
-            

+            

               {i18n.categories[categoryId]}
             

             
 {
     return (
       

-        

+        

           {i18n.searchResult}
         

         

@@ -186,8 +186,8 @@ export function EmojiPickerContent({
         'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',
         '[&::-webkit-scrollbar]:w-4',
         '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',
-        '[&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25 [&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full',
-        '[&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:bg-clip-padding'
+        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',
+        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'
       )}
       data-id="scroll"
     >
diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx
index 6fb89d4a3a..2549c8ca6e 100644
--- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx
@@ -53,7 +53,7 @@ export function EmojiPickerNavigation({