docs

udecode · Nov 6, 2024 · 31ff04e · 31ff04e
1 parent 57a691f
commit 31ff04e
Show file tree

Hide file tree

Showing 33 changed files with 608 additions and 627 deletions.
diff --git a/components.json b/components.json
@@ -12,7 +12,7 @@
       "aliases": {
         "ui": "@/components/plate-ui"
       },
-      "url": "https://platejs.org/r"
+      "url": "http://localhost:3000/r"
     }
   },
   "rsc": true,

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "@radix-ui/react-toolbar": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@udecode/cn": "^39.0.0",
-    "@udecode/plate-ai": "^39.2.19",
+    "@udecode/plate-ai": "39.3.0",
     "@udecode/plate-alignment": "^39.0.0",
     "@udecode/plate-autoformat": "^39.0.0",
     "@udecode/plate-basic-elements": "^39.0.0",
@@ -42,8 +42,8 @@
     "@udecode/plate-common": "^39.2.21",
     "@udecode/plate-cursor": "^39.2.11",
     "@udecode/plate-date": "^39.0.0",
-    "@udecode/plate-dnd": "^39.0.0",
-    "@udecode/plate-docx": "^39.2.13",
+    "@udecode/plate-dnd": "39.3.0",
+    "@udecode/plate-docx": "39.3.3",
     "@udecode/plate-emoji": "^39.0.0",
     "@udecode/plate-excalidraw": "^39.0.0",
     "@udecode/plate-floating": "^39.1.6",
@@ -58,11 +58,10 @@
     "@udecode/plate-layout": "^39.0.0",
     "@udecode/plate-line-height": "^39.0.0",
     "@udecode/plate-link": "^39.1.9",
-    "@udecode/plate-list": "^39.0.0",
     "@udecode/plate-markdown": "^39.2.0",
     "@udecode/plate-math": "^39.2.0",
-    "@udecode/plate-media": "^39.2.13",
-    "@udecode/plate-mention": "^39.0.0",
+    "@udecode/plate-media": "39.3.3",
+    "@udecode/plate-mention": "39.3.4",
     "@udecode/plate-node-id": "^39.0.0",
     "@udecode/plate-reset-node": "^39.0.0",
     "@udecode/plate-resizable": "^39.1.6",
@@ -129,4 +128,4 @@
       ]
     }
   }
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/editor/plate-types.ts b/src/components/editor/plate-types.ts
@@ -16,13 +16,6 @@ import type { HEADING_KEYS } from '@udecode/plate-heading';
 import type { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
 import type { TLinkElement } from '@udecode/plate-link';
 import type { LinkPlugin } from '@udecode/plate-link/react';
-import type { TTodoListItemElement } from '@udecode/plate-list';
-import type {
-  BulletedListPlugin,
-  ListItemPlugin,
-  NumberedListPlugin,
-  TodoListPlugin,
-} from '@udecode/plate-list/react';
 import type { TImageElement, TMediaEmbedElement } from '@udecode/plate-media';
 import type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
 import type {
@@ -142,21 +135,6 @@ export interface MyH3Element extends MyBlockElement {
   type: typeof HEADING_KEYS.h3;
 }
 
-export interface MyH4Element extends MyBlockElement {
-  children: MyInlineChildren;
-  type: typeof HEADING_KEYS.h4;
-}
-
-export interface MyH5Element extends MyBlockElement {
-  children: MyInlineChildren;
-  type: typeof HEADING_KEYS.h5;
-}
-
-export interface MyH6Element extends MyBlockElement {
-  children: MyInlineChildren;
-  type: typeof HEADING_KEYS.h6;
-}
-
 export interface MyBlockquoteElement extends MyBlockElement {
   children: MyInlineChildren;
   type: typeof BlockquotePlugin.key;
@@ -187,28 +165,6 @@ export interface MyTableCellElement extends TElement {
   type: typeof TableCellPlugin.key;
 }
 
-export interface MyBulletedListElement extends TElement, MyBlockElement {
-  children: MyListItemElement[];
-  type: typeof BulletedListPlugin.key;
-}
-
-export interface MyNumberedListElement extends TElement, MyBlockElement {
-  children: MyListItemElement[];
-  type: typeof NumberedListPlugin.key;
-}
-
-export interface MyListItemElement extends TElement, MyBlockElement {
-  children: MyInlineChildren;
-  type: typeof ListItemPlugin.key;
-}
-
-export interface MyTodoListElement
-  extends TTodoListItemElement,
-    MyBlockElement {
-  children: MyInlineChildren;
-  type: typeof TodoListPlugin.key;
-}
-
 export interface MyToggleElement extends TToggleElement, MyBlockElement {
   children: MyInlineChildren;
   type: typeof TogglePlugin.key;
@@ -242,22 +198,16 @@ export type MyNestableBlock = MyParagraphElement;
 
 export type MyRootBlock =
   | MyBlockquoteElement
-  | MyBulletedListElement
   | MyCodeBlockElement
   | MyExcalidrawElement
   | MyH1Element
   | MyH2Element
   | MyH3Element
-  | MyH4Element
-  | MyH5Element
-  | MyH6Element
   | MyHrElement
   | MyImageElement
   | MyMediaEmbedElement
-  | MyNumberedListElement
   | MyParagraphElement
   | MyTableElement
-  | MyTodoListElement
   | MyToggleElement;
 
 export type MyValue = MyRootBlock[];

diff --git a/src/components/editor/plugins/ai-plugins.tsx b/src/components/editor/plugins/ai-plugins.tsx
@@ -22,19 +22,11 @@ import {
   PlateLeaf,
   createPlateEditor,
 } from '@udecode/plate-common/react';
-import {
-  FontBackgroundColorPlugin,
-  FontColorPlugin,
-} from '@udecode/plate-font/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
-import { HeadingPlugin } from '@udecode/plate-heading/react';
 import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
-import { IndentPlugin } from '@udecode/plate-indent/react';
-import { IndentListPlugin } from '@udecode/plate-indent-list/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
 import { MarkdownPlugin } from '@udecode/plate-markdown';
 import { BlockSelectionPlugin } from '@udecode/plate-selection/react';
-import Prism from 'prismjs';
 
 import { AIMenu } from '@/components/plate-ui/ai-menu';
 import { BlockquoteElement } from '@/components/plate-ui/blockquote-element';
@@ -46,9 +38,12 @@ import { SelectionOverlayPlugin } from '@/components/plate-ui/cursor-overlay';
 import { HeadingElement } from '@/components/plate-ui/heading-element';
 import { HrElement } from '@/components/plate-ui/hr-element';
 import { LinkElement } from '@/components/plate-ui/link-element';
-import { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';
 import { ParagraphElement } from '@/components/plate-ui/paragraph-element';
 
+import { basicNodesPlugins } from './basic-nodes-plugins';
+import { indentListPlugins } from './indent-list-plugins';
+import { linkPlugin } from './link-plugin';
+
 const createAIEditor = () => {
   const editor = createPlateEditor({
     id: 'ai',
@@ -73,39 +68,12 @@ const createAIEditor = () => {
     },
     plugins: [
       ParagraphPlugin,
-      IndentPlugin.configure({
-        inject: {
-          targetPlugins: [
-            ParagraphPlugin.key,
-            HEADING_KEYS.h1,
-            HEADING_KEYS.h2,
-            HEADING_KEYS.h3,
-            BlockquotePlugin.key,
-            CodeBlockPlugin.key,
-          ],
-        },
-      }),
-      IndentListPlugin.configure({
-        inject: {
-          targetPlugins: [
-            ParagraphPlugin.key,
-            HEADING_KEYS.h1,
-            HEADING_KEYS.h2,
-            HEADING_KEYS.h3,
-            BlockquotePlugin.key,
-            CodeBlockPlugin.key,
-          ],
-        },
-      }),
-      HeadingPlugin.configure({ options: { levels: 3 } }),
-      BlockquotePlugin,
-      CodeBlockPlugin.configure({ options: { prism: Prism } }),
+      ...basicNodesPlugins,
       HorizontalRulePlugin,
-      LinkPlugin.configure({
-        render: { afterEditable: () => <LinkFloatingToolbar /> },
-      }),
+      linkPlugin,
+      ...indentListPlugins,
       MarkdownPlugin.configure({ options: { indentList: true } }),
-      // FIXME: Fixed the throw error: BlockSelectionPlugin is missing. readonly editor need'nt this plugin so using an empty plugin instead
+      // FIXME
       BlockSelectionPlugin.configure({
         api: {},
         extendEditor: null,
@@ -114,13 +82,6 @@ const createAIEditor = () => {
         useHooks: null,
         handlers: {},
       }),
-      BoldPlugin,
-      ItalicPlugin,
-      UnderlinePlugin,
-      StrikethroughPlugin,
-      CodePlugin,
-      FontColorPlugin,
-      FontBackgroundColorPlugin,
     ],
     value: [{ children: [{ text: '' }], type: 'p' }],
   });

diff --git a/src/components/editor/plugins/align-plugin.ts b/src/components/editor/plugins/align-plugin.ts
@@ -0,0 +1,17 @@
+'use client';
+
+import { AlignPlugin } from '@udecode/plate-alignment/react';
+import { ParagraphPlugin } from '@udecode/plate-common/react';
+import { HEADING_LEVELS } from '@udecode/plate-heading';
+import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
+
+export const alignPlugin = AlignPlugin.extend({
+  inject: {
+    targetPlugins: [
+      ParagraphPlugin.key,
+      ...HEADING_LEVELS,
+      MediaEmbedPlugin.key,
+      ImagePlugin.key,
+    ],
+  },
+});