Merge pull request #3905 from udecode/fix/block-remove

Fix block selection remove nodes
udecode · Dec 23, 2024 · e26b885 · e26b885
2 parents 68d3c84 + 1b8f97b
commit e26b885
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 91 deletions.
diff --git a/.changeset/brave-candles-approve.md b/.changeset/brave-candles-approve.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-selection': patch
+---
+
+Fix the BlockSelection.removeNodes issue that incorrectly removes all nodes.
diff --git a/apps/www/content/docs/ai.mdx b/apps/www/content/docs/ai.mdx
@@ -35,44 +35,70 @@ npm install @udecode/plate-ai @udecode/plate-selection @udecode/plate-markdown @
 ### Plugins
 
 ```tsx
-import { withProps } from '@udecode/cn';
 import { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react';
 import {
-  BoldPlugin,
-  CodePlugin,
-  ItalicPlugin,
-  StrikethroughPlugin,
-  UnderlinePlugin,
-} from '@udecode/plate-basic-marks/react';
-import { PlateLeaf, createPlateEditor } from '@udecode/plate-common/react';
-import { LinkPlugin } from '@udecode/plate-link/react';
+  BaseBoldPlugin,
+  BaseCodePlugin,
+  BaseItalicPlugin,
+  BaseStrikethroughPlugin,
+  BaseUnderlinePlugin,
+} from '@udecode/plate-basic-marks';
+import { BaseBlockquotePlugin } from '@udecode/plate-block-quote';
+import {
+  BaseCodeBlockPlugin,
+  BaseCodeLinePlugin,
+  BaseCodeSyntaxPlugin,
+} from '@udecode/plate-code-block';
+import { BaseParagraphPlugin, createSlateEditor } from '@udecode/plate-common';
+import { BaseHeadingPlugin, HEADING_LEVELS } from '@udecode/plate-heading';
+import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';
+import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
+import { BaseLinkPlugin } from '@udecode/plate-link';
 import { MarkdownPlugin } from '@udecode/plate-markdown';
 ```
 
 ```tsx
 export const createAIEditor = () => {
-  const editor = createPlateEditor({
+  const editor = createSlateEditor({
     id: 'ai',
-    override: {
-      components: {
-        [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
-        [CodePlugin.key]: CodeLeaf,
-        [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),
-        [LinkPlugin.key]: LinkElement,
-        [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),
-        [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),
-      },
-    },
     plugins: [
-      BoldPlugin,
-      ItalicPlugin,
-      UnderlinePlugin,
-      StrikethroughPlugin,
-      CodePlugin,
+      BaseBlockquotePlugin,
+      BaseBoldPlugin,
+      BaseCodeBlockPlugin,
+      BaseCodeLinePlugin,
+      BaseCodePlugin,
+      BaseCodeSyntaxPlugin,
+      BaseItalicPlugin,
+      BaseStrikethroughPlugin,
+      BaseUnderlinePlugin,
+      BaseHeadingPlugin,
+      BaseHorizontalRulePlugin,
+      BaseLinkPlugin,
+      BaseParagraphPlugin,
+      BaseIndentListPlugin.extend({
+        inject: {
+          targetPlugins: [
+            BaseParagraphPlugin.key,
+            ...HEADING_LEVELS,
+            BaseBlockquotePlugin.key,
+            BaseCodeBlockPlugin.key,
+          ],
+        },
+        options: {
+          listStyleTypes: {
+            todo: {
+              liComponent: TodoLiStatic,
+              markerComponent: TodoMarkerStatic,
+              type: 'todo',
+            },
+          },
+        },
+      }),
+      MarkdownPlugin.configure({ options: { indentList: true } }),
     ],
-    value: [{ children: [{ text: '' }], type: 'p' }],
   });
 
+
   return editor;
 };
 

diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -10,6 +10,13 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2024 #17
 
+### December 23 #17.5
+
+- `table-element`: fix selection
+- before: `isSelectingCell && '[&_*::selection]:bg-none'`
+- after: `isSelectingCell && '[&_*::selection]:!bg-transparent'`
+
+
 ### December 21 #17.4
 
 Update `tailwind.config.cjs` for better font support in the HTML export:

diff --git a/apps/www/src/registry/default/components/editor/plugins/comments-plugin.tsx b/apps/www/src/registry/default/components/editor/plugins/comments-plugin.tsx
@@ -2,10 +2,12 @@
 
 import { CommentsPlugin } from '@udecode/plate-comments/react';
 
+import { commentsData } from '@/registry/default/example/values/comments-value';
 import { CommentsPopover } from '@/registry/default/plate-ui/comments-popover';
 
 export const commentsPlugin = CommentsPlugin.configure({
   options: {
+    comments: commentsData,
     myUserId: '1',
     users: {
       1: {

diff --git a/apps/www/src/registry/default/plate-ui/table-element.tsx b/apps/www/src/registry/default/plate-ui/table-element.tsx
@@ -217,7 +217,7 @@ export const TableElement = withHOC(
             ref={ref}
             className={cn(
               'my-4 ml-px mr-0 table h-px w-[calc(100%-6px)] table-fixed border-collapse',
-              isSelectingCell && '[&_*::selection]:bg-none'
+              isSelectingCell && '[&_*::selection]:!bg-transparent'
             )}
             {...tableProps}
           >

diff --git a/packages/selection/src/react/transforms/removeBlockSelectionNodes.ts b/packages/selection/src/react/transforms/removeBlockSelectionNodes.ts
@@ -9,6 +9,6 @@ export const removeBlockSelectionNodes = (editor: SlateEditor) => {
 
   editor.removeNodes({
     at: [],
-    match: (n) => selectedIds.has((n as any).id),
+    match: (n: any) => n.id && selectedIds.has((n as any).id),
   });
 };