editor-ai.json

{
  "dependencies": [
    "@udecode/cn",
    "@udecode/plate-ai",
    "@udecode/plate-basic-marks",
    "@udecode/plate-block-quote",
    "@udecode/plate-code-block",
    "@udecode/plate-comments",
    "@udecode/plate-common",
    "@udecode/plate-date",
    "@udecode/plate-emoji",
    "@udecode/plate-excalidraw",
    "@udecode/plate-heading",
    "@udecode/plate-highlight",
    "@udecode/plate-horizontal-rule",
    "@udecode/plate-kbd",
    "@udecode/plate-layout",
    "@udecode/plate-link",
    "@udecode/plate-media",
    "@udecode/plate-mention",
    "@udecode/plate-slash-command",
    "@udecode/plate-table",
    "@udecode/plate-toggle",
    "sonner"
  ],
  "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    <div className=\"h-screen w-full\" data-registry=\"plate\">\n      <OpenAIProvider>\n        <PlateEditor />\n      </OpenAIProvider>\n    </div>\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    <DndProvider backend={HTML5Backend}>\n      <Plate editor={editor}>\n        <EditorContainer>\n          <Editor variant=\"demo\" />\n        </EditorContainer>\n\n        <SettingsDialog />\n      </Plate>\n    </DndProvider>\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",
      "type": "registry:component"
    }
  ],
  "name": "editor-ai",
  "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"
  ],
  "type": "registry:block"
}