Merge pull request #3241 from udecode/feat/migrant

feat

.changeset/blue-readers-judge.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-caption': major
+---
+
+- Breaking change: the empty caption textarea is no longer showed on image focus. You can use the caption store to show the caption textarea.

.changeset/breezy-beers-end.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-floating': patch
+---
+
+Fix: only pop up `floating-toolbar` after the selection is complete.

.changeset/four-goats-stare.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-font': minor
+---
+
+Add new transforms `setBlockBackgroundColor`.

.changeset/happy-masks-jump.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-layout': minor
+---
+
+Add `toggleColumns` and fix select all.

.changeset/lazy-poets-buy.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-selection': minor
+---
+
+Add logic for the `block-context-menu` and improved the user experience for `block-selection`, such as interactions related to keyboard shortcuts, bug fixes.

.changeset/long-lobsters-judge.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-heading': minor
+---
+
+Add ToC plugin and sidebar

.changeset/many-pillows-unite.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-math': minor
+---
+
+Add `equation` and `inlineEquation` plugins.

.changeset/ninety-knives-wash.md

@@ -0,0 +1,5 @@
+---
+'@udecode/slate-utils': minor
+---
+
+Add new queries `getAncestorNode` and `getNodesRange`

.changeset/pink-yaks-smoke.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': minor
+---
+
+Add selection after dragging ends.

.changeset/smart-flies-relate.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-callout': minor
+---
+
+Add new plugin `callout`

.changeset/thin-cycles-itch.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-indent-list': patch
+---
+
+Add `toggleIndentListByPath`, add `indentList` options

.changeset/wicked-cheetahs-laugh.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-utils': minor
+---
+
+Add `addSelectedRow` which depends on `blockSelection` plugin

.changeset/wise-pandas-thank.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-link': patch
+---
+
+Fix link button closing the floating toolbar.

.changeset/yellow-gifts-vanish.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+Fix: `toggleNodeType` not working using `at`.

.changeset/young-pigs-behave.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-media': minor
+---
+
+Add plugins: `mediaPlaceholder`, `video`,`audio` and `file`

.changeset/young-sheep-rush.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-code-block': patch
+---
+
+Fix select all

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

@@ -8,6 +8,13 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+## June 2024 #11
+
+### June 6 #11.1
+- feat: `draggable` Add the data-key attribute to facilitate adding selection after the drag-and-drop operation is completed
+- breaking change:  Add `CaptionProvider` on `image-element` and `media-embed-element`. open the caption by using `CaptionButton` or `useCaptionStore().set.showCaption()`
+
+
 ## May 2024 #10
 
 ### May 30 #10.2

apps/www/src/lib/plate/demo/plugins/alignPlugin.ts

@@ -8,6 +8,7 @@ import {
   ELEMENT_H5,
   ELEMENT_H6,
 } from '@udecode/plate-heading';
+import { ELEMENT_IMAGE } from '@udecode/plate-media';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 
 export const alignPlugin: Partial<PlatePlugin> = {
@@ -20,6 +21,7 @@ export const alignPlugin: Partial<PlatePlugin> = {
         ELEMENT_H3,
         ELEMENT_H4,
         ELEMENT_H5,
+        ELEMENT_IMAGE,
         ELEMENT_H6,
       ],
     },

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

@@ -203,7 +203,10 @@ export const usePlaygroundPlugins = ({
           createKbdPlugin({ enabled: !!enabled.kbd }),
 
           // Block Style
-          createAlignPlugin({ ...alignPlugin, enabled: !!enabled.align }),
+          createAlignPlugin({
+            ...alignPlugin,
+            enabled: !!enabled.align,
+          }),
           createIndentPlugin({
             enabled: !!enabled.indent,
             inject: {
@@ -269,6 +272,7 @@ export const usePlaygroundPlugins = ({
           createBlockSelectionPlugin({
             enabled: id === 'blockselection' || !!enabled.blockSelection,
             options: {
+              disableContextMenu: true,
               sizes: {
                 bottom: 0,
                 top: 0,

apps/www/src/registry/default/plate-ui/caption.tsx

@@ -1,10 +1,19 @@
-import { cn, withCn, withVariants } from '@udecode/cn';
+import {
+  cn,
+  createPrimitiveComponent,
+  withCn,
+  withVariants,
+} from '@udecode/cn';
 import {
   Caption as CaptionPrimitive,
   CaptionTextarea as CaptionTextareaPrimitive,
+  useCaptionButton,
+  useCaptionButtonState,
 } from '@udecode/plate-caption';
 import { cva } from 'class-variance-authority';
 
+import { Button } from './button';
+
 const captionVariants = cva('max-w-full', {
   defaultVariants: {
     align: 'center',
@@ -30,3 +39,8 @@ export const CaptionTextarea = withCn(
     'text-center print:placeholder:text-transparent'
   )
 );
+
+export const CaptionButton = createPrimitiveComponent(Button)({
+  propsHook: useCaptionButton,
+  stateHook: useCaptionButtonState,
+});

apps/www/src/registry/default/plate-ui/draggable.tsx

@@ -2,23 +2,32 @@
 
 import React from 'react';
 
-import type {
-  ClassNames,
-  PlateElementProps,
-  TEditor,
-} from '@udecode/plate-common';
 import type { DropTargetMonitor } from 'react-dnd';
 
 import { cn, withRef } from '@udecode/cn';
+import {
+  type ClassNames,
+  type PlateElementProps,
+  type TEditor,
+  type TElement,
+  useEditorRef,
+  useElement,
+} from '@udecode/plate-common';
 import {
   type DragItemNode,
   useDraggable,
   useDraggableState,
 } from '@udecode/plate-dnd';
+import { blockSelectionActions } from '@udecode/plate-selection';
 
 import { Icons } from '@/components/icons';
 
-import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from './tooltip';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from './tooltip';
 
 export interface DraggableProps
   extends PlateElementProps,
@@ -68,16 +77,35 @@ export interface DraggableProps
   ) => boolean;
 }
 
-const dragHandle = (
-  <Tooltip>
-    <TooltipTrigger type="button">
-      <Icons.dragHandle className="size-4 text-muted-foreground" />
-    </TooltipTrigger>
-    <TooltipPortal>
-      <TooltipContent>Drag to move</TooltipContent>
-    </TooltipPortal>
-  </Tooltip>
-);
+const DragHandle = () => {
+  const editor = useEditorRef();
+  const element = useElement<TElement>();
+
+  return (
+    <Tooltip>
+      <TooltipTrigger type="button">
+        <Icons.dragHandle
+          className="size-4 text-muted-foreground"
+          onClick={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            // if (element.id) {
+            //   blockSelectionActions.addSelectedRow(element.id as string);
+            //   blockContextMenuActions.show(editor.id, event as any);
+            // }
+          }}
+          onMouseDown={() => {
+            blockSelectionActions.resetSelectedIds();
+          }}
+        />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>Drag to move</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  );
+};
 
 export const Draggable = withRef<'div', DraggableProps>(
   ({ className, classNames = {}, onDropHandler, ...props }, ref) => {
@@ -106,7 +134,7 @@ export const Draggable = withRef<'div', DraggableProps>(
       >
         <div
           className={cn(
-            'pointer-events-none absolute top-0 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',
+            'pointer-events-none absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',
             classNames.gutterLeft
           )}
           {...gutterLeftProps}
@@ -118,8 +146,12 @@ export const Draggable = withRef<'div', DraggableProps>(
                 classNames.blockToolbar
               )}
             >
-              <div className="size-4" ref={handleRef}>
-                {isHovered && dragHandle}
+              <div
+                className="size-4"
+                data-key={element.id as string}
+                ref={handleRef}
+              >
+                {isHovered && <DragHandle />}
               </div>
             </div>
           </div>

apps/www/src/registry/default/plate-ui/floating-toolbar.tsx

@@ -3,7 +3,12 @@
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
-import { PortalBody, useComposedRef } from '@udecode/plate-common';
+import {
+  PortalBody,
+  useComposedRef,
+  useEventEditorSelectors,
+  usePlateSelectors,
+} from '@udecode/plate-common';
 import {
   type FloatingToolbarState,
   flip,
@@ -20,7 +25,12 @@ export const FloatingToolbar = withRef<
     state?: FloatingToolbarState;
   }
 >(({ children, state, ...props }, componentRef) => {
+  const editorId = usePlateSelectors().id();
+  const focusedEditorId = useEventEditorSelectors.focus();
+
   const floatingToolbarState = useFloatingToolbarState({
+    editorId,
+    focusedEditorId,
     ...state,
     floatingOptions: {
       middleware: [