Merge pull request #4135 from udecode/md/suggestion

Add static version suggestion leaf

Author: felixfeng33

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

@@ -13,6 +13,7 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 ### March 2 #20.2
 
 - `block-suggestion`: fix styles
+- `suggestion-leaf-static`: add static versions
 
 ### March 1 #20.1
 

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { cn } from '@udecode/cn';
+import { type SlateLeafProps, SlateLeaf } from '@udecode/plate';
+import {
+  type TSuggestionText,
+  BaseSuggestionPlugin,
+} from '@udecode/plate-suggestion';
+import { useEditorPlugin } from '@udecode/plate/react';
+
+export function SuggestionLeafStatic(props: SlateLeafProps) {
+  const { children, className, leaf } = props;
+
+  const { api } = useEditorPlugin(BaseSuggestionPlugin);
+
+  const dataList = api.suggestion.dataList(leaf as TSuggestionText);
+
+  const hasRemove = dataList.some((data) => data.type === 'remove');
+
+  const diffOperation = {
+    type: hasRemove ? 'delete' : 'insert',
+  } as const;
+
+  const Component = (
+    {
+      delete: 'del',
+      insert: 'ins',
+      update: 'span',
+    } as const
+  )[diffOperation.type];
+
+  return (
+    <SlateLeaf
+      {...props}
+      as={Component}
+      className={cn(
+        'border-b-2 border-b-brand/[.24] bg-brand/[.08] text-brand/80 no-underline transition-colors duration-200',
+        hasRemove &&
+          'border-b-gray-300 bg-gray-300/25 text-gray-400 line-through',
+        className
+      )}
+    >
+      {children}
+    </SlateLeaf>
+  );
+}

apps/www/src/registry/registry-ui.ts

@@ -1099,7 +1099,10 @@ export const uiNodes: Registry['items'] = [
       docs: [{ route: '/docs/suggestion' }],
       examples: ['comments-demo', 'comments-pro'],
     },
-    files: [{ path: 'plate-ui/suggestion-leaf.tsx', type: 'registry:ui' }],
+    files: [
+      { path: 'plate-ui/suggestion-leaf.tsx', type: 'registry:ui' },
+      { path: 'plate-ui/suggestion-leaf-static.tsx', type: 'registry:ui' },
+    ],
     name: 'suggestion-leaf',
     registryDependencies: ['suggestion-plugin'],
     type: 'registry:ui',