Merge pull request #4124 from udecode/fix/suggestionc

Fix diffToSuggestions

.changeset/rotten-mugs-joke.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-suggestion': patch
+---
+
+Fix `diffToSuggestions` to adapt to the new suggestion structure.

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

@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## March 2025 #20
 
+### March 2 #20.2
+
+- `block-suggestion`: fix styles
+
 ### March 1 #20.1
 
 Plate 46 - new code block

apps/www/src/registry/default/plate-ui/block-suggestion.tsx

@@ -202,7 +202,7 @@ export const BlockSuggestionCard = ({
                     <React.Fragment key={index}>
                       <div
                         key={index}
-                        className="flex items-center text-brand/80"
+                        className="flex items-start gap-2 text-brand/80"
                       >
                         <span className="text-sm">with:</span>
                         <span className="text-sm">{text || 'line breaks'}</span>
@@ -213,7 +213,7 @@ export const BlockSuggestionCard = ({
 
                 {suggestionText2Array(suggestion.text!).map((text, index) => (
                   <React.Fragment key={index}>
-                    <div key={index} className="flex items-center">
+                    <div key={index} className="flex items-start gap-2">
                       <span className="text-sm text-muted-foreground">
                         {index === 0 ? 'Replace:' : 'Delete:'}
                       </span>

packages/suggestion/src/lib/diffToSuggestions.ts

@@ -2,13 +2,16 @@ import {
   type Descendant,
   type SlateEditor,
   type ValueOf,
+  ElementApi,
   nanoid,
+  TextApi,
 } from '@udecode/plate';
 import { type ComputeDiffOptions, computeDiff } from '@udecode/plate-diff';
 
+import { BaseSuggestionPlugin } from './BaseSuggestionPlugin';
 import { getSuggestionProps } from './transforms';
+import { getSuggestionKey } from './utils';
 
-// TODO: refactor
 export function diffToSuggestions<E extends SlateEditor>(
   editor: E,
   doc0: Descendant[],
@@ -27,11 +30,64 @@ export function diffToSuggestions<E extends SlateEditor>(
     ...options
   }: Partial<ComputeDiffOptions> = {}
 ): ValueOf<E> {
-  return computeDiff(doc0, doc1, {
+  const values = computeDiff(doc0, doc1, {
     getDeleteProps,
     getInsertProps,
     getUpdateProps,
     isInline,
     ...options,
   }) as ValueOf<E>;
+
+  // Recursively traverse all nodes to process elements and their children
+  const traverseNodes = (nodes: Descendant[]): Descendant[] => {
+    return nodes.map((node, index) => {
+      if (ElementApi.isElement(node) && 'children' in node) {
+        // If the node is an element with children, recursively process its children
+        return {
+          ...node,
+          children: traverseNodes(node.children),
+        };
+      }
+
+      if (TextApi.isText(node) && node[BaseSuggestionPlugin.key]) {
+        const api = editor.getApi(BaseSuggestionPlugin);
+        const currentNodeData = api.suggestion.suggestionData(node as any);
+
+        if (currentNodeData?.type === 'insert') {
+          // Get the previous node if it exists
+          const previousNode = index > 0 ? nodes[index - 1] : null;
+
+          if (previousNode && previousNode[BaseSuggestionPlugin.key]) {
+            const previousData = api.suggestion.suggestionData(
+              previousNode as any
+            );
+
+            if (previousData?.type === 'remove') {
+              // Create a new node with the updated suggestion data
+              const updatedNode = {
+                ...node,
+                [getSuggestionKey(previousData.id)]: {
+                  ...currentNodeData,
+                  id: previousData.id,
+                  createdAt: previousData.createdAt,
+                },
+              };
+
+              // Return the updated node instead of modifying the original
+
+              const key = getSuggestionKey(currentNodeData.id);
+              delete updatedNode[key];
+
+              return updatedNode;
+            }
+          }
+        }
+
+        return node;
+      }
+      return node;
+    });
+  };
+
+  return traverseNodes(values) as ValueOf<E>;
 }

packages/suggestion/src/lib/transforms/getSuggestionProps.ts

@@ -1,20 +1,13 @@
 import type { SlateEditor } from '@udecode/plate';
 
-import { BaseSuggestionPlugin, SUGGESTION_KEYS } from '../BaseSuggestionPlugin';
+import { BaseSuggestionPlugin } from '../BaseSuggestionPlugin';
 import { getSuggestionKey } from '../utils/index';
 
-// DEPRECATED
-export const getSuggestionCurrentUserKey = (editor: SlateEditor) => {
-  const { currentUserId } = editor.getOptions(BaseSuggestionPlugin);
-
-  return getSuggestionKey(currentUserId!);
-};
-
 export const getSuggestionProps = (
   editor: SlateEditor,
   id: string,
   {
-    createdAt,
+    createdAt = Date.now(),
     suggestionDeletion,
     suggestionUpdate,
   }: {
@@ -23,19 +16,21 @@ export const getSuggestionProps = (
     suggestionUpdate?: any;
   } = {}
 ) => {
+  const type = suggestionDeletion
+    ? 'remove'
+    : suggestionUpdate
+      ? 'update'
+      : 'insert';
+
   const res = {
     [BaseSuggestionPlugin.key]: true,
-    [getSuggestionCurrentUserKey(editor)]: true,
-    [SUGGESTION_KEYS.createdAt]: createdAt,
-    [SUGGESTION_KEYS.id]: id,
+    [getSuggestionKey(id)]: {
+      id,
+      createdAt,
+      type,
+      userId: editor.getOptions(BaseSuggestionPlugin).currentUserId!,
+    },
   };
 
-  if (suggestionDeletion) {
-    res.suggestionDeletion = true;
-  }
-  if (suggestionUpdate) {
-    res.suggestionUpdate = suggestionUpdate;
-  }
-
   return res;
 };

yarn.lock

@@ -6383,7 +6383,7 @@ __metadata:
   dependencies:
     "@udecode/plate": "workspace:^"
     "@udecode/plate-block-quote": "npm:44.0.0"
-    "@udecode/plate-code-block": "npm:44.0.0"
+    "@udecode/plate-code-block": "npm:46.0.0"
     "@udecode/plate-heading": "npm:44.0.0"
   peerDependencies:
     "@udecode/plate": ">=45.0.9"
@@ -6453,7 +6453,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-code-block@npm:44.0.0, @udecode/plate-code-block@workspace:^, @udecode/plate-code-block@workspace:packages/code-block":
+"@udecode/plate-code-block@npm:46.0.0, @udecode/plate-code-block@workspace:^, @udecode/plate-code-block@workspace:packages/code-block":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-code-block@workspace:packages/code-block"
   dependencies: