Merge pull request #4097 from udecode/templates/45

Author: felixfeng33

templates/plate-playground-template/package.json

@@ -30,23 +30,23 @@
     "@radix-ui/react-tooltip": "^1.1.8",
     "@udecode/cmdk": "^0.2.0",
     "@udecode/cn": "44.0.1",
-    "@udecode/plate": "44.0.1",
-    "@udecode/plate-ai": "44.0.0",
+    "@udecode/plate": "45.0.2",
+    "@udecode/plate-ai": "44.0.3",
     "@udecode/plate-alignment": "44.0.0",
     "@udecode/plate-autoformat": "44.0.0",
     "@udecode/plate-basic-elements": "44.0.0",
-    "@udecode/plate-basic-marks": "44.0.0",
+    "@udecode/plate-basic-marks": "45.0.0",
     "@udecode/plate-block-quote": "44.0.0",
     "@udecode/plate-break": "44.0.0",
     "@udecode/plate-callout": "44.0.0",
     "@udecode/plate-caption": "44.0.0",
     "@udecode/plate-code-block": "44.0.0",
     "@udecode/plate-combobox": "44.0.0",
-    "@udecode/plate-comments": "44.0.0",
+    "@udecode/plate-comments": "45.0.0",
     "@udecode/plate-cursor": "44.0.0",
     "@udecode/plate-date": "44.0.0",
     "@udecode/plate-dnd": "44.0.0",
-    "@udecode/plate-docx": "44.0.0",
+    "@udecode/plate-docx": "45.0.0",
     "@udecode/plate-emoji": "44.0.0",
     "@udecode/plate-excalidraw": "44.0.0",
     "@udecode/plate-floating": "44.0.0",
@@ -55,24 +55,25 @@
     "@udecode/plate-highlight": "44.0.0",
     "@udecode/plate-horizontal-rule": "44.0.0",
     "@udecode/plate-indent": "44.0.0",
-    "@udecode/plate-indent-list": "44.0.0",
+    "@udecode/plate-indent-list": "44.0.5",
     "@udecode/plate-juice": "44.0.0",
     "@udecode/plate-kbd": "44.0.0",
     "@udecode/plate-layout": "44.0.0",
     "@udecode/plate-line-height": "44.0.0",
-    "@udecode/plate-link": "44.0.0",
+    "@udecode/plate-link": "44.0.4",
     "@udecode/plate-markdown": "44.0.0",
     "@udecode/plate-math": "44.0.0",
-    "@udecode/plate-media": "44.0.0",
+    "@udecode/plate-media": "44.0.6",
     "@udecode/plate-mention": "44.0.0",
     "@udecode/plate-node-id": "44.0.0",
     "@udecode/plate-reset-node": "44.0.0",
     "@udecode/plate-resizable": "44.0.0",
     "@udecode/plate-select": "44.0.0",
     "@udecode/plate-selection": "44.0.0",
     "@udecode/plate-slash-command": "44.0.0",
+    "@udecode/plate-suggestion": "^45.0.0",
     "@udecode/plate-tabbable": "44.0.0",
-    "@udecode/plate-table": "44.0.0",
+    "@udecode/plate-table": "45.0.0",
     "@udecode/plate-toggle": "44.0.0",
     "@udecode/plate-trailing-block": "44.0.0",
     "@uploadthing/react": "7.1.0",

templates/plate-playground-template/pnpm-lock.yaml

@@ -6,8 +6,8 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import { Plate } from '@udecode/plate/react';
 
-import { SettingsDialog } from '@/components/editor/settings';
 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() {

templates/plate-playground-template/src/components/editor/plate-editor.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { BlockSelectionPlugin } from '@udecode/plate-selection/react';
+
+import { BlockSelection } from '@/components/plate-ui/block-selection';
+
+export const blockSelectionPlugins = [
+  BlockSelectionPlugin.configure(({ editor }) => ({
+    options: {
+      enableContextMenu: true,
+      isSelectable: (element, path) => {
+        return (
+          !['code_line', 'column', 'td'].includes(element.type) &&
+          !editor.api.block({ above: true, at: path, match: { type: 'tr' } })
+        );
+      },
+    },
+    render: {
+      belowRootNodes: (props) => {
+        if (!props.className?.includes('slate-selectable')) return null;
+
+        return <BlockSelection />;
+      },
+    },
+  })),
+] as const;
+
+export const blockSelectionReadOnlyPlugin = BlockSelectionPlugin.configure({
+  api: {},
+  extendEditor: null,
+  handlers: {},
+  options: {},
+  render: {},
+  useHooks: null,
+});

templates/plate-playground-template/src/components/editor/plugins/block-selection-plugins.tsx

@@ -1,65 +1,86 @@
 'use client';
 
-import type { TComment } from '@udecode/plate-comments';
-
-import { CommentsPlugin } from '@udecode/plate-comments/react';
-
-import { CommentsPopover } from '@/components/plate-ui/comments-popover';
-
-const commentsData: Record<string, TComment> = {
-  1: {
-    id: '1',
-    createdAt: 1_663_453_625_129,
-    userId: '1',
-    value: [{ children: [{ text: 'This is a comment.' }], type: 'p' }],
-  },
-  2: {
-    id: '2',
-    createdAt: 1_663_453_729_191,
-    userId: '1',
-    value: [
-      { children: [{ text: 'Can you review this one @12joan?' }], type: 'p' },
-    ],
-  },
-  3: {
-    id: '3',
-    createdAt: 1_663_453_740_180,
-    isResolved: true,
-    userId: '1',
-    value: [{ children: [{ text: 'This is a resolved comment.' }], type: 'p' }],
-  },
-  4: {
-    id: '4',
-    createdAt: 1_663_453_740_181,
-    parentId: '2',
-    userId: '2',
-    value: [{ children: [{ text: 'LGTM.' }], type: 'p' }],
-  },
-  5: {
-    id: '4',
-    createdAt: 1_663_453_740_182,
-    parentId: '2',
-    userId: '1',
-    value: [{ children: [{ text: 'Thanks!' }], type: 'p' }],
-  },
-};
-
-export const commentsPlugin = CommentsPlugin.configure({
-  options: {
-    comments: commentsData,
-    myUserId: '1',
-    users: {
-      1: {
-        id: '1',
-        avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',
-        name: 'zbeyens',
-      },
-      2: {
-        id: '2',
-        avatarUrl: 'https://avatars.githubusercontent.com/u/4272090?v=4',
-        name: '12joan',
+import type { ExtendConfig, Path } from '@udecode/plate';
+
+import { isSlateString } from '@udecode/plate';
+import {
+  type BaseCommentsConfig,
+  BaseCommentsPlugin,
+} from '@udecode/plate-comments';
+import { toTPlatePlugin, useHotkeys } from '@udecode/plate/react';
+
+export type CommentsConfig = ExtendConfig<
+  BaseCommentsConfig,
+  {
+    activeId: string | null;
+    commentingBlock: Path | null;
+    hotkey: string[];
+    hoverId: string | null;
+    uniquePathMap: Map<string, Path>;
+  }
+>;
+
+export const commentsPlugin = toTPlatePlugin<CommentsConfig>(
+  BaseCommentsPlugin,
+  {
+    handlers: {
+      onClick: ({ api, event, setOption, type }) => {
+        let leaf = event.target as HTMLElement;
+        let isSet = false;
+
+        const unsetActiveSuggestion = () => {
+          setOption('activeId', null);
+          isSet = true;
+        };
+
+        if (!isSlateString(leaf)) unsetActiveSuggestion();
+
+        while (leaf.parentElement) {
+          if (leaf.classList.contains(`slate-${type}`)) {
+            const commentsEntry = api.comment!.node();
+
+            if (!commentsEntry) {
+              unsetActiveSuggestion();
+
+              break;
+            }
+
+            const id = api.comment!.nodeId(commentsEntry[0]);
+
+            setOption('activeId', id ?? null);
+            isSet = true;
+
+            break;
+          }
+
+          leaf = leaf.parentElement;
+        }
+
+        if (!isSet) unsetActiveSuggestion();
       },
     },
-  },
-  render: { afterEditable: () => <CommentsPopover /> },
-});
+    options: {
+      activeId: null,
+      commentingBlock: null,
+      hotkey: ['meta+shift+m', 'ctrl+shift+m'],
+      hoverId: null,
+      uniquePathMap: new Map(),
+    },
+    useHooks: ({ editor, getOptions }) => {
+      const { hotkey } = getOptions();
+      useHotkeys(
+        hotkey!,
+        (e) => {
+          if (!editor.selection) return;
+
+          e.preventDefault();
+
+          if (!editor.api.isExpanded()) return;
+        },
+        {
+          enableOnContentEditable: true,
+        }
+      );
+    },
+  }
+);

templates/plate-playground-template/src/components/editor/plugins/comments-plugin.tsx

@@ -22,6 +22,8 @@ import { TrailingBlockPlugin } from '@udecode/plate-trailing-block';
 
 import { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';
 import { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';
+import { BlockDiscussion } from '@/components/plate-ui/block-discussion';
+import { SuggestionBelowNodes } from '@/components/plate-ui/suggestion-line-break';
 
 import { aiPlugins } from './ai-plugins';
 import { alignPlugin } from './align-plugin';
@@ -40,7 +42,9 @@ import { linkPlugin } from './link-plugin';
 import { mediaPlugins } from './media-plugins';
 import { mentionPlugin } from './mention-plugin';
 import { resetBlockTypePlugin } from './reset-block-type-plugin';
+import { skipMarkPlugin } from './skip-mark-plugin';
 import { softBreakPlugin } from './soft-break-plugin';
+import { suggestionPlugin } from './suggestion-plugin';
 import { tablePlugin } from './table-plugin';
 import { tocPlugin } from './toc-plugin';
 
@@ -64,14 +68,20 @@ export const viewPlugins = [
   FontSizePlugin,
   HighlightPlugin,
   KbdPlugin,
+  skipMarkPlugin,
 
   // Block Style
   alignPlugin,
   ...indentListPlugins,
   lineHeightPlugin,
 
   // Collaboration
-  commentsPlugin,
+  commentsPlugin.configure({
+    render: { aboveNodes: BlockDiscussion as any },
+  }),
+  suggestionPlugin.configure({
+    render: { belowNodes: SuggestionBelowNodes as any },
+  }),
 ] as const;
 
 export const editorPlugins = [

templates/plate-playground-template/src/components/editor/plugins/editor-plugins.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { CodePlugin, SkipMarkPlugin } from '@udecode/plate-basic-marks/react';
+import { CommentsPlugin } from '@udecode/plate-comments/react';
+import { SuggestionPlugin } from '@udecode/plate-suggestion/react';
+
+export const skipMarkPlugin = SkipMarkPlugin.configure({
+  options: {
+    query: {
+      allow: [SuggestionPlugin.key, CodePlugin.key, CommentsPlugin.key],
+    },
+  },
+});

templates/plate-playground-template/src/components/editor/plugins/skip-mark-plugin.ts

@@ -0,0 +1,90 @@
+'use client';
+
+import {
+  type ExtendConfig,
+  type Path,
+  isSlateEditor,
+  isSlateElement,
+  isSlateString,
+} from '@udecode/plate';
+import {
+  type BaseSuggestionConfig,
+  BaseSuggestionPlugin,
+} from '@udecode/plate-suggestion';
+import { toTPlatePlugin } from '@udecode/plate/react';
+
+import { BlockSuggestion } from '@/components/plate-ui/block-suggestion';
+
+export type SuggestionConfig = ExtendConfig<
+  BaseSuggestionConfig,
+  {
+    activeId: string | null;
+    currentUserId: string;
+    hoverId: string | null;
+    uniquePathMap: Map<string, Path>;
+  }
+>;
+
+export const suggestionPlugin = toTPlatePlugin<SuggestionConfig>(
+  BaseSuggestionPlugin,
+  {
+    handlers: {
+      // unset active suggestion when clicking outside of suggestion
+      onClick: ({ api, event, setOption, type }) => {
+        let leaf = event.target as HTMLElement;
+        let isSet = false;
+
+        const unsetActiveSuggestion = () => {
+          setOption('activeId', null);
+          isSet = true;
+        };
+
+        if (!isSlateString(leaf)) unsetActiveSuggestion();
+
+        while (
+          leaf.parentElement &&
+          !isSlateElement(leaf.parentElement) &&
+          !isSlateEditor(leaf.parentElement)
+        ) {
+          if (leaf.classList.contains(`slate-${type}`)) {
+            const suggestionEntry = api.suggestion!.node({
+              isText: true,
+            });
+
+            if (!suggestionEntry) {
+              unsetActiveSuggestion();
+
+              break;
+            }
+
+            const id = api.suggestion!.nodeId(suggestionEntry[0]);
+
+            setOption('activeId', id ?? null);
+            isSet = true;
+
+            break;
+          }
+
+          leaf = leaf.parentElement;
+        }
+
+        if (!isSet) unsetActiveSuggestion();
+      },
+    },
+    options: {
+      activeId: null,
+      currentUserId: 'user3',
+      hoverId: null,
+      uniquePathMap: new Map(),
+    },
+    render: {
+      belowRootNodes: ({ api, element }) => {
+        if (!api.suggestion!.isBlockSuggestion(element)) {
+          return null;
+        }
+
+        return <BlockSuggestion element={element} />;
+      },
+    },
+  }
+);