Merge branch 'main' into sync-shadcn

apps/www/content/docs/block-selection.mdx

@@ -104,22 +104,21 @@ You can style the selection area by adding this class to the container(.slate-se
 You can style the selected element by adding this class to the container
 
 ```js
-'[&]:!bg-primary/20'
+'[&_.slate-selected]:!bg-primary/20 '
 ```
 
-
-
-
 ### Disable browser default scroll behavior
 If we select some text and then move(keep pressed) the cursor to the very bottom of the page, the page will start scrolling to the bottom.
 
-This scroll is so fast and confilicts with `BlockSelectionPlugin` scroll behavior(After the selection area appears, move the mouse to the bottom of the scroll container).
+Sometimes this scroll is so fast and confilicts with `BlockSelectionPlugin` scroll behavior(After the selection area appears, move the mouse to the bottom of the scroll container).
+
+I don't find any way to disable this scroll behavior of browser.(if you find the way to disable it, please tell me that will so appreciate it)
 
-I don't find any way to disable this scroll behavior of browser.(if you find the way to disable it, please tell me that will so appreciate it)So the solution is add an empty `div` above the editer's right side(The right side is the easiest place to trigger this behavior.) and set `user-select: none` to it .
+So the solution is add an empty `div` above the editer's right side(The right side is the easiest place to trigger this behavior.) and set `user-select: none` to it .
 
-If you find this issue occurring in your editor, please check the width of this div. You can use the option `editorPaddingRight` to set the width of this div or the class `rightSelectionAreaClassName` to style it.
+This will make configuration and maintenance cumbersome so we remove this div from plate.
 
-Make sure the width is the same with the editor's padding-right.
+If you encounter this issue, you might consider disabling it in this way.
 
 ## Plugins
 

apps/www/src/registry/default/example/playground-demo.tsx

@@ -370,7 +370,7 @@ export default function PlaygroundDemo({
                 variant="ghost"
                 className={cn(
                   editableProps.className,
-                  ' overflow-x-hidden rounded-none px-[var(--editor-px)]',
+                  'overflow-x-auto rounded-none px-[var(--editor-px)]',
                   !id && 'pb-[20vh] pt-4',
                   id && 'pb-8 pt-2'
                 )}

apps/www/src/registry/default/plate-ui/indent-todo-toolbar-button.tsx

@@ -1,8 +1,8 @@
+import { withRef } from '@udecode/cn';
 import {
   useIndentTodoToolBarButton,
   useIndentTodoToolBarButtonState,
 } from '@udecode/plate-indent-list/react';
-import { withRef } from '@udecode/react-utils';
 
 import { Icons } from '@/components/icons';
 

packages/csv/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @udecode/plate-serializer-csv
 
+## 38.0.8
+
 ## 38.0.6
 
 ## 38.0.5

packages/csv/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udecode/plate-csv",
-  "version": "38.0.6",
+  "version": "38.0.8",
   "description": "CSV serializer plugin for Plate",
   "keywords": [
     "csv",
@@ -46,7 +46,7 @@
     "typecheck": "yarn p:typecheck"
   },
   "dependencies": {
-    "@udecode/plate-table": "38.0.6",
+    "@udecode/plate-table": "38.0.8",
     "papaparse": "^5.4.1"
   },
   "devDependencies": {

packages/docx/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @udecode/plate-docx-serializer
 
+## 38.0.8
+
 ## 38.0.6
 
 ## 38.0.5

packages/docx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udecode/plate-docx",
-  "version": "38.0.6",
+  "version": "38.0.8",
   "description": "Docx serializer plugin for Plate",
   "keywords": [
     "docx",
@@ -50,7 +50,7 @@
     "@udecode/plate-indent": "38.0.1",
     "@udecode/plate-indent-list": "38.0.1",
     "@udecode/plate-media": "38.0.6",
-    "@udecode/plate-table": "38.0.6",
+    "@udecode/plate-table": "38.0.8",
     "validator": "^13.12.0"
   },
   "devDependencies": {

packages/plate/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @udecode/plate
 
+## 38.0.9
+
+## 38.0.8
+
+## 38.0.7
+
 ## 38.0.6
 
 ## 38.0.5

packages/plate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udecode/plate",
-  "version": "38.0.6",
+  "version": "38.0.9",
   "description": "Plate – a plugin system for slate",
   "keywords": [
     "contentEditable",
@@ -66,9 +66,9 @@
     "@udecode/plate-combobox": "38.0.1",
     "@udecode/plate-comments": "38.0.1",
     "@udecode/plate-common": "38.0.6",
-    "@udecode/plate-csv": "38.0.6",
+    "@udecode/plate-csv": "38.0.8",
     "@udecode/plate-diff": "38.0.0",
-    "@udecode/plate-docx": "38.0.6",
+    "@udecode/plate-docx": "38.0.8",
     "@udecode/plate-find-replace": "38.0.0",
     "@udecode/plate-floating": "38.0.1",
     "@udecode/plate-font": "38.0.1",
@@ -91,11 +91,11 @@
     "@udecode/plate-reset-node": "38.0.1",
     "@udecode/plate-resizable": "38.0.0",
     "@udecode/plate-select": "38.0.1",
-    "@udecode/plate-selection": "38.0.0",
+    "@udecode/plate-selection": "38.0.9",
     "@udecode/plate-slash-command": "38.0.1",
     "@udecode/plate-suggestion": "38.0.1",
     "@udecode/plate-tabbable": "38.0.1",
-    "@udecode/plate-table": "38.0.6",
+    "@udecode/plate-table": "38.0.8",
     "@udecode/plate-toggle": "38.0.1",
     "@udecode/plate-trailing-block": "38.0.1"
   },

packages/selection/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @udecode/plate-selection
 
+## 38.0.9
+
+### Patch Changes
+
+- [#3569](https://github.com/udecode/plate/pull/3569) by [@felixfeng33](https://github.com/felixfeng33) – Remove the Div rendered above the editor.
+
+  This div is to solve the issue of the browser's default scrolling behavior being too fast.
+
+  However, it caused some other issues and complicated configurations, such as being unable to focus on the editor when clicking the padding-right area.
+
+  If you think this issue is more important, you refer to the flowing code.
+
+  ```tsx
+    BlockSelectionPlugin.configure({
+      render: {
+        aboveEditable: ({ children }) => {
+      return ( <div style={{ position: 'relative', width: '100%' }}>
+        {/*
+         *select text then move cursor to the very bottom will trigger the default browser behavior
+         *this div is a workaround to prevent the default browser behavior (set userSelect: none)
+         *Make sure the div with is the same with the editor's padding-right
+         */}
+
+        {/* TODO: click to focus the node */}
+        <div
+          style={{
+            height: '100%',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            userSelect: 'none',
+            width: editorPaddingRight ?? 'max(5%, 24px)',
+            zIndex: 1,
+          }}
+          data-plate-selectable
+        />
+        {children}
+        </div>)
+    },
+      },
+    }),
+  ```
+
+## 38.0.7
+
+### Patch Changes
+
+- [#3566](https://github.com/udecode/plate/pull/3566) by [@felixfeng33](https://github.com/felixfeng33) – Fix width issues caused by hover scrollbars.
+
 ## 38.0.0
 
 ## 37.0.6

packages/selection/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udecode/plate-selection",
-  "version": "38.0.0",
+  "version": "38.0.9",
   "description": "Plate React plugin to add a visual way of selecting blocks",
   "keywords": [
     "plate",

packages/selection/src/internal/SelectionArea.ts

@@ -102,16 +102,16 @@ export class SelectionArea extends EventTarget<SelectionEvents> {
           speedDivider: 10,
           ...opt.behaviour?.scrolling,
           startScrollMargins: {
-            x: 0,
-            y: 0,
+            x: 20,
+            y: 20,
             ...opt.behaviour?.scrolling?.startScrollMargins,
           },
         },
         startThreshold: opt.behaviour?.startThreshold
           ? typeof opt.behaviour.startThreshold === 'number'
             ? opt.behaviour.startThreshold
-            : { x: 10, y: 10, ...opt.behaviour.startThreshold }
-          : { x: 10, y: 10 },
+            : { x: 20, y: 20, ...opt.behaviour.startThreshold }
+          : { x: 20, y: 20 },
       },
 
       features: {

packages/selection/src/react/BlockSelectionPlugin.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import {
   type PluginConfig,
@@ -13,7 +13,6 @@ import type { ChangedElements, PartialSelectionOptions } from '../internal';
 import { getAllSelectableDomNode, getSelectedDomNode } from '../lib';
 import { extractSelectableIds } from '../lib/extractSelectableIds';
 import { BlockContextMenuPlugin } from './BlockContextMenuPlugin';
-import { BlockSelection } from './components';
 import { BlockSelectable } from './components/BlockSelectable';
 import { onKeyDownSelection } from './onKeyDownSelection';
 import { useHooksBlockSelection } from './useHooksBlockSelection';
@@ -75,7 +74,6 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
     query: {
       maxLevel: 1,
     },
-    rightSelectionAreaClassName: 'slate-right-selection-area',
     selectedIds: new Set(),
   },
   plugins: [BlockContextMenuPlugin],
@@ -154,11 +152,4 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
         });
       },
     })
-  )
-  .extend(() => ({
-    render: {
-      aboveEditable: ({ children }) => (
-        <BlockSelection>{children}</BlockSelection>
-      ),
-    },
-  }));
+  );

packages/selection/src/react/components/index.ts

@@ -3,4 +3,3 @@
  */
 
 export * from './BlockSelectable';
-export * from './BlockSelection';

packages/table/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @udecode/plate-table
 
+## 38.0.8
+
+### Patch Changes
+
+- [#3550](https://github.com/udecode/plate/pull/3550) by [@oleg-orlov-quantori](https://github.com/oleg-orlov-quantori) – Fix table attributes disappear during copying
+
 ## 38.0.6
 
 ### Patch Changes

packages/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udecode/plate-table",
-  "version": "38.0.6",
+  "version": "38.0.8",
   "description": "Table plugin for Plate",
   "keywords": [
     "plate",

packages/table/src/react/withSetFragmentDataTable.ts

@@ -1,5 +1,6 @@
 import {
   type TElement,
+  findNode,
   getEndPoint,
   getStartPoint,
   select,
@@ -9,15 +10,17 @@ import { type ExtendEditor, findNodePath } from '@udecode/plate-common/react';
 
 import {
   type TTableCellElement,
+  type TTableElement,
   type TableConfig,
   getColSpan,
   getRowSpan,
 } from '../lib';
-import { TableCellHeaderPlugin } from './TablePlugin';
+import { TableCellHeaderPlugin, TablePlugin } from './TablePlugin';
 import { getTableGridAbove } from './queries';
 
 export const withSetFragmentDataTable: ExtendEditor<TableConfig> = ({
   editor,
+  plugin,
 }) => {
   const { setFragmentData } = editor;
 
@@ -40,7 +43,7 @@ export const withSetFragmentDataTable: ExtendEditor<TableConfig> = ({
       return;
     }
 
-    const [tableNode] = tableEntry;
+    const [tableNode, tablePath] = tableEntry;
     const tableRows = tableNode.children as TElement[];
     tableNode.children = tableNode.children.filter(
       (v) => (v as TTableCellElement).children.length > 0
@@ -112,6 +115,26 @@ export const withSetFragmentDataTable: ExtendEditor<TableConfig> = ({
         textTsv += `${cellStrings.join('\t')}\n`;
       });
 
+      const _tableEntry = findNode<TTableElement>(editor, {
+        at: tablePath,
+        match: { type: TablePlugin.key },
+      });
+
+      if (_tableEntry != null && _tableEntry.length > 0) {
+        const realTable = _tableEntry[0];
+
+        if (realTable.attributes != null) {
+          Object.entries(realTable.attributes).forEach(([key, value]) => {
+            if (
+              value != null &&
+              plugin.node.dangerouslyAllowAttributes?.includes(key)
+            ) {
+              tableElement.setAttribute(key, String(value));
+            }
+          });
+        }
+      }
+
       // select back original cells
       select(editor, initialSelection!);