Merge pull request #3980 from udecode/vendor/42-1

Plate 42.1

.changeset/quiet-yaks-suffer.md

@@ -0,0 +1,10 @@
+---
+'@udecode/plate-ai': minor
+---
+
+- `useAIChatEditor`: add `editor` as first parameter:
+
+```tsx
+const aiEditor = usePlateEditor({ plugins });
+useAIChatEditor(aiEditor, content);
+```

.changeset/wet-monkeys-change.md

@@ -0,0 +1,13 @@
+---
+'@udecode/plate-emoji': minor
+---
+
+Fix / Breaking change:
+
+- Fixes #3978
+- Fixes #3320
+- Add `@emoji-mart/data` to your dependencies, then configure your `EmojiPlugin`:
+
+```ts
+EmojiPlugin.configure({ options: { data: emojiMartData as any } });
+```

apps/www/content/docs/cn/emoji.mdx

@@ -30,10 +30,11 @@ npm install @udecode/plate-emoji
 
 ```tsx
 import { EmojiPlugin } from '@udecode/plate-emoji/react';
+import emojiMartData from '@emoji-mart/data';
 
 const plugins = [
   // ...otherPlugins,
-  EmojiPlugin,
+  EmojiPlugin.configure({ options: { data: emojiMartData } }),
 ];
 ```
 

apps/www/content/docs/en/ai.mdx

@@ -445,9 +445,12 @@ Special undo operation for AI changes:
 
 ### useAIChatEditor
 
-A hook that creates an editor for AI chat responses, registers it in the AI chat plugin, and deserializes markdown content with block-level memoization.
+A hook that registers an editor in the AI chat plugin, and deserializes markdown content with block-level memoization.
 
 <APIParameters>
+<APIItem name="editor" type="PlateEditor">
+The editor to register in the AI chat plugin.
+</APIItem>
 <APIItem name="content" type="string">
 The markdown content to deserialize into the editor.
 </APIItem>
@@ -462,27 +465,21 @@ Options for the markdown token parser. Can filter out specific token types.
 <APISubListItem parent="options" name="processor" type="(processor: Processor) => Processor" optional>
 Function to customize the markdown processor.
 </APISubListItem>
-<APISubListItem parent="options" name="...editorOptions" type="Partial<CreatePlateEditorOptions>" optional>
-Additional options passed to `usePlateEditor`.
-</APISubListItem>
 </APISubList>
 </APIItem>
 </APIParameters>
 
-<APIReturns>
-<APIItem type="PlateEditor">
-The configured editor instance with deserialized content.
-</APIItem>
-</APIReturns>
-
 ```tsx
 const AIChatEditor = ({ content }: { content: string }) => {
-  const aiEditor = useAIChatEditor(content, {
+  const aiEditor = usePlateEditor({
     plugins: [
       // Your editor plugins
       MarkdownPlugin,
       // etc...
     ],
+  });
+
+  useAIChatEditor(aiEditor, content, {
     // Optional markdown parser options
     parser: {
       exclude: ['space'],

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

@@ -15,6 +15,12 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 - `indent-fire-marker.tsx` Add `data-plate-prevent-deserialization` to prevent deserialization of the fire marker. Change the `span` tag to `li`.
 - `indent-todo-marker.tsx` change the `span` tag to `li`.
 - `image-element-static.tsx` and `hr-element-static.tsx`: Fix `nodeProps` not being passed to `SlateElement`.
+- `ai-chat-editor`:
+```tsx
+const aiEditor = usePlateEditor({ plugins });
+useAIChatEditor(aiEditor, content);
+```
+
 
 
 ### January 12 #18.2

apps/www/content/docs/en/emoji.mdx

@@ -23,17 +23,18 @@ docs:
 ## Installation
 
 ```bash
-npm install @udecode/plate-emoji
+npm install @udecode/plate-emoji @emoji-mart/data
 ```
 
 ## Usage
 
 ```tsx
 import { EmojiPlugin } from '@udecode/plate-emoji/react';
+import emojiMartData from '@emoji-mart/data';
 
 const plugins = [
   // ...otherPlugins,
-  EmojiPlugin,
+  EmojiPlugin.configure({ options: { data: emojiMartData } }),
 ];
 ```
 

apps/www/public/r/index.json

@@ -445,7 +445,8 @@
   },
   {
     "dependencies": [
-      "@udecode/plate-emoji"
+      "@udecode/plate-emoji",
+      "@emoji-mart/data@1.2.1"
     ],
     "doc": {
       "description": "An input component for emoji search and insertion.",
@@ -1892,7 +1893,9 @@
     "type": "registry:ui"
   },
   {
-    "dependencies": [],
+    "dependencies": [
+      "use-file-picker"
+    ],
     "doc": {
       "description": "A toolbar button to import editor content from a file.",
       "docs": [
@@ -1915,6 +1918,7 @@
     ],
     "name": "import-toolbar-button",
     "registryDependencies": [
+      "dropdown-menu",
       "toolbar"
     ],
     "type": "registry:ui"
@@ -2266,6 +2270,7 @@
   {
     "dependencies": [
       "@udecode/plate-emoji",
+      "@emoji-mart/data@1.2.1",
       "@radix-ui/react-popover"
     ],
     "doc": {
@@ -2360,6 +2365,7 @@
       "indent-list-toolbar-button",
       "indent-todo-toolbar-button",
       "indent-toolbar-button",
+      "import-toolbar-button",
       "insert-dropdown-menu",
       "line-height-dropdown-menu",
       "link-toolbar-button",

apps/www/public/r/styles/default/ai-demo.json

@@ -35,7 +35,7 @@
       "type": "registry:example"
     },
     {
-      "content": "'use client';\n\nimport { ParagraphPlugin } from '@udecode/plate/react';\nimport { CalloutPlugin } from '@udecode/plate-callout/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 { 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 { equationPlugins } from './equation-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  ...equationPlugins,\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",
+      "content": "'use client';\n\nimport emojiMartData from '@emoji-mart/data';\nimport { ParagraphPlugin } from '@udecode/plate/react';\nimport { CalloutPlugin } from '@udecode/plate-callout/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 { 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 { equationPlugins } from './equation-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  ...equationPlugins,\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.configure({ options: { data: emojiMartData as any } }),\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"

apps/www/public/r/styles/default/ai-menu.json

@@ -39,7 +39,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React, { memo } from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport {\n  type SlatePlugin,\n  BaseParagraphPlugin,\n  SlateLeaf,\n} from '@udecode/plate';\nimport { useAIChatEditor } from '@udecode/plate-ai/react';\nimport {\n  BaseBoldPlugin,\n  BaseCodePlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n} from '@udecode/plate-basic-marks';\nimport { BaseBlockquotePlugin } from '@udecode/plate-block-quote';\nimport {\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodeSyntaxPlugin,\n} from '@udecode/plate-code-block';\nimport { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading';\nimport { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';\nimport { BaseIndentPlugin } from '@udecode/plate-indent';\nimport { BaseIndentListPlugin } from '@udecode/plate-indent-list';\nimport { BaseLinkPlugin } from '@udecode/plate-link';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport {\n  TodoLiStatic,\n  TodoMarkerStatic,\n} from '@/components/plate-ui/indent-todo-marker-static';\n\nimport { BlockquoteElementStatic } from './blockquote-element-static';\nimport { CodeBlockElementStatic } from './code-block-element-static';\nimport { CodeLeafStatic } from './code-leaf-static';\nimport { CodeLineElementStatic } from './code-line-element-static';\nimport { CodeSyntaxLeafStatic } from './code-syntax-leaf-static';\nimport { EditorStatic } from './editor-static';\nimport { HeadingElementStatic } from './heading-element-static';\nimport { HrElementStatic } from './hr-element-static';\nimport { LinkElementStatic } from './link-element-static';\nimport { ParagraphElementStatic } from './paragraph-element-static';\n\nconst components = {\n  [BaseBlockquotePlugin.key]: BlockquoteElementStatic,\n  [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }),\n  [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,\n  [BaseCodeLinePlugin.key]: CodeLineElementStatic,\n  [BaseCodePlugin.key]: CodeLeafStatic,\n  [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,\n  [BaseHorizontalRulePlugin.key]: HrElementStatic,\n  [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),\n  [BaseLinkPlugin.key]: LinkElementStatic,\n  [BaseParagraphPlugin.key]: ParagraphElementStatic,\n  [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 's' }),\n  [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }),\n  [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),\n  [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),\n  [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),\n};\n\nconst plugins = [\n  BaseBlockquotePlugin,\n  BaseBoldPlugin,\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodePlugin,\n  BaseCodeSyntaxPlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n  BaseHeadingPlugin,\n  BaseHorizontalRulePlugin,\n  BaseLinkPlugin,\n  BaseParagraphPlugin,\n  BaseIndentPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n  }),\n  BaseIndentListPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n    options: {\n      listStyleTypes: {\n        todo: {\n          liComponent: TodoLiStatic,\n          markerComponent: TodoMarkerStatic,\n          type: 'todo',\n        },\n      },\n    },\n  }),\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n] as SlatePlugin[];\n\nexport const AIChatEditor = memo(({ content }: { content: string }) => {\n  const aiEditor = useAIChatEditor(content, {\n    plugins,\n  });\n\n  return (\n    <EditorStatic variant=\"aiChat\" components={components} editor={aiEditor} />\n  );\n});\n",
+      "content": "'use client';\n\nimport React, { memo } from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { BaseParagraphPlugin, SlateLeaf } from '@udecode/plate';\nimport { useAIChatEditor } from '@udecode/plate-ai/react';\nimport {\n  BaseBoldPlugin,\n  BaseCodePlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n} from '@udecode/plate-basic-marks';\nimport { BaseBlockquotePlugin } from '@udecode/plate-block-quote';\nimport {\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodeSyntaxPlugin,\n} from '@udecode/plate-code-block';\nimport { usePlateEditor } from '@udecode/plate-core/react';\nimport { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading';\nimport { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';\nimport { BaseIndentPlugin } from '@udecode/plate-indent';\nimport { BaseIndentListPlugin } from '@udecode/plate-indent-list';\nimport { BaseLinkPlugin } from '@udecode/plate-link';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport {\n  TodoLiStatic,\n  TodoMarkerStatic,\n} from '@/components/plate-ui/indent-todo-marker-static';\n\nimport { BlockquoteElementStatic } from './blockquote-element-static';\nimport { CodeBlockElementStatic } from './code-block-element-static';\nimport { CodeLeafStatic } from './code-leaf-static';\nimport { CodeLineElementStatic } from './code-line-element-static';\nimport { CodeSyntaxLeafStatic } from './code-syntax-leaf-static';\nimport { EditorStatic } from './editor-static';\nimport { HeadingElementStatic } from './heading-element-static';\nimport { HrElementStatic } from './hr-element-static';\nimport { LinkElementStatic } from './link-element-static';\nimport { ParagraphElementStatic } from './paragraph-element-static';\n\nconst components = {\n  [BaseBlockquotePlugin.key]: BlockquoteElementStatic,\n  [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }),\n  [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,\n  [BaseCodeLinePlugin.key]: CodeLineElementStatic,\n  [BaseCodePlugin.key]: CodeLeafStatic,\n  [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,\n  [BaseHorizontalRulePlugin.key]: HrElementStatic,\n  [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),\n  [BaseLinkPlugin.key]: LinkElementStatic,\n  [BaseParagraphPlugin.key]: ParagraphElementStatic,\n  [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 's' }),\n  [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }),\n  [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),\n  [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),\n  [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),\n};\n\nconst plugins = [\n  BaseBlockquotePlugin,\n  BaseBoldPlugin,\n  BaseCodeBlockPlugin,\n  BaseCodeLinePlugin,\n  BaseCodePlugin,\n  BaseCodeSyntaxPlugin,\n  BaseItalicPlugin,\n  BaseStrikethroughPlugin,\n  BaseUnderlinePlugin,\n  BaseHeadingPlugin,\n  BaseHorizontalRulePlugin,\n  BaseLinkPlugin,\n  BaseParagraphPlugin,\n  BaseIndentPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n  }),\n  BaseIndentListPlugin.extend({\n    inject: {\n      targetPlugins: [BaseParagraphPlugin.key],\n    },\n    options: {\n      listStyleTypes: {\n        todo: {\n          liComponent: TodoLiStatic,\n          markerComponent: TodoMarkerStatic,\n          type: 'todo',\n        },\n      },\n    },\n  }),\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n];\n\nexport const AIChatEditor = memo(({ content }: { content: string }) => {\n  const aiEditor = usePlateEditor({\n    plugins,\n  });\n\n  useAIChatEditor(aiEditor, content);\n\n  return (\n    <EditorStatic variant=\"aiChat\" components={components} editor={aiEditor} />\n  );\n});\n",
       "path": "plate-ui/ai-chat-editor.tsx",
       "target": "components/plate-ui/ai-chat-editor.tsx",
       "type": "registry:ui"