sync

udecode · Dec 20, 2024 · 93b202a · 93b202a
1 parent 876f0f4
commit 93b202a
Show file tree

Hide file tree

Showing 11 changed files with 404 additions and 111 deletions.
diff --git a/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx
@@ -4,6 +4,8 @@ import { DndPlugin } from '@udecode/plate-dnd';
 import { PlaceholderPlugin } from '@udecode/plate-media/react';
 import { NodeIdPlugin } from '@udecode/plate-node-id';
 
+import { DraggableAboveNodes } from '@/components/plate-ui/draggable';
+
 export const dndPlugins = [
   NodeIdPlugin,
   DndPlugin.configure({
@@ -15,5 +17,8 @@ export const dndPlugins = [
           .insert.media(dragItem.files, { at: target, nextBlock: false });
       },
     },
+    render: {
+      aboveNodes: DraggableAboveNodes,
+    },
   }),
 ] as const;
diff --git a/templates/plate-playground-template/src/components/editor/transforms.ts b/templates/plate-playground-template/src/components/editor/transforms.ts
@@ -53,7 +53,7 @@ import {
 } from '@udecode/plate-table/react';
 import { Path } from 'slate';
 
-export const STRUCTURAL_TYPES = [
+export const STRUCTURAL_TYPES: string[] = [
   ColumnPlugin.key,
   ColumnItemPlugin.key,
   TablePlugin.key,
@@ -79,7 +79,7 @@ const insertBlockMap: Record<
   (editor: PlateEditor, type: string) => void
 > = {
   [ACTION_THREE_COLUMNS]: (editor) =>
-    insertColumnGroup(editor, { layout: 3, select: true }),
+    insertColumnGroup(editor, { columns: 3, select: true }),
   [AudioPlugin.key]: (editor) =>
     insertAudioPlaceholder(editor, { select: true }),
   [CalloutPlugin.key]: (editor) => insertCallout(editor, { select: true }),
@@ -163,7 +163,7 @@ const setBlockMap: Record<
   string,
   (editor: PlateEditor, type: string, entry: TNodeEntry<TElement>) => void
 > = {
-  [ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { layout: 3 }),
+  [ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { columns: 3 }),
   [INDENT_LIST_KEYS.todo]: setList,
   [ListStyleType.Decimal]: setList,
   [ListStyleType.Disc]: setList,

diff --git a/templates/plate-playground-template/src/components/editor/use-create-editor.ts b/templates/plate-playground-template/src/components/editor/use-create-editor.ts
@@ -92,59 +92,56 @@ import { TableElement } from '@/components/plate-ui/table-element';
 import { TableRowElement } from '@/components/plate-ui/table-row-element';
 import { TocElement } from '@/components/plate-ui/toc-element';
 import { ToggleElement } from '@/components/plate-ui/toggle-element';
-import { withDraggables } from '@/components/plate-ui/with-draggables';
 
 export const useCreateEditor = () => {
   return usePlateEditor({
     override: {
-      components: withDraggables(
-        withPlaceholders({
-          [AIPlugin.key]: AILeaf,
-          [AudioPlugin.key]: MediaAudioElement,
-          [BlockquotePlugin.key]: BlockquoteElement,
-          [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
-          [CodeBlockPlugin.key]: CodeBlockElement,
-          [CodeLinePlugin.key]: CodeLineElement,
-          [CodePlugin.key]: CodeLeaf,
-          [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
-          [ColumnItemPlugin.key]: ColumnElement,
-          [ColumnPlugin.key]: ColumnGroupElement,
-          [CommentsPlugin.key]: CommentLeaf,
-          [DatePlugin.key]: DateElement,
-          [EmojiInputPlugin.key]: EmojiInputElement,
-          [ExcalidrawPlugin.key]: ExcalidrawElement,
-          [FilePlugin.key]: MediaFileElement,
-          [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),
-          [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),
-          [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),
-          [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }),
-          [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }),
-          [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }),
-          [HighlightPlugin.key]: HighlightLeaf,
-          [HorizontalRulePlugin.key]: HrElement,
-          [ImagePlugin.key]: ImageElement,
-          [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),
-          [KbdPlugin.key]: KbdLeaf,
-          [LinkPlugin.key]: LinkElement,
-          [MediaEmbedPlugin.key]: MediaEmbedElement,
-          [MentionInputPlugin.key]: MentionInputElement,
-          [MentionPlugin.key]: MentionElement,
-          [ParagraphPlugin.key]: ParagraphElement,
-          [PlaceholderPlugin.key]: MediaPlaceholderElement,
-          [SlashInputPlugin.key]: SlashInputElement,
-          [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),
-          [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),
-          [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }),
-          [TableCellHeaderPlugin.key]: TableCellHeaderElement,
-          [TableCellPlugin.key]: TableCellElement,
-          [TablePlugin.key]: TableElement,
-          [TableRowPlugin.key]: TableRowElement,
-          [TocPlugin.key]: TocElement,
-          [TogglePlugin.key]: ToggleElement,
-          [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),
-          [VideoPlugin.key]: MediaVideoElement,
-        })
-      ),
+      components: withPlaceholders({
+        [AIPlugin.key]: AILeaf,
+        [AudioPlugin.key]: MediaAudioElement,
+        [BlockquotePlugin.key]: BlockquoteElement,
+        [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
+        [CodeBlockPlugin.key]: CodeBlockElement,
+        [CodeLinePlugin.key]: CodeLineElement,
+        [CodePlugin.key]: CodeLeaf,
+        [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
+        [ColumnItemPlugin.key]: ColumnElement,
+        [ColumnPlugin.key]: ColumnGroupElement,
+        [CommentsPlugin.key]: CommentLeaf,
+        [DatePlugin.key]: DateElement,
+        [EmojiInputPlugin.key]: EmojiInputElement,
+        [ExcalidrawPlugin.key]: ExcalidrawElement,
+        [FilePlugin.key]: MediaFileElement,
+        [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),
+        [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),
+        [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),
+        [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }),
+        [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }),
+        [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }),
+        [HighlightPlugin.key]: HighlightLeaf,
+        [HorizontalRulePlugin.key]: HrElement,
+        [ImagePlugin.key]: ImageElement,
+        [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),
+        [KbdPlugin.key]: KbdLeaf,
+        [LinkPlugin.key]: LinkElement,
+        [MediaEmbedPlugin.key]: MediaEmbedElement,
+        [MentionInputPlugin.key]: MentionInputElement,
+        [MentionPlugin.key]: MentionElement,
+        [ParagraphPlugin.key]: ParagraphElement,
+        [PlaceholderPlugin.key]: MediaPlaceholderElement,
+        [SlashInputPlugin.key]: SlashInputElement,
+        [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),
+        [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),
+        [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }),
+        [TableCellHeaderPlugin.key]: TableCellHeaderElement,
+        [TableCellPlugin.key]: TableCellElement,
+        [TablePlugin.key]: TableElement,
+        [TableRowPlugin.key]: TableRowElement,
+        [TocPlugin.key]: TocElement,
+        [TogglePlugin.key]: ToggleElement,
+        [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),
+        [VideoPlugin.key]: MediaVideoElement,
+      }),
     },
     plugins: [
       ...copilotPlugins,

diff --git a/templates/plate-playground-template/src/components/plate-ui/column-element.tsx b/templates/plate-playground-template/src/components/plate-ui/column-element.tsx
@@ -6,11 +6,7 @@ import type { TColumnElement } from '@udecode/plate-layout';
 
 import { cn, useComposedRef, withRef } from '@udecode/cn';
 import { useElement, withHOC } from '@udecode/plate-common/react';
-import {
-  useDraggable,
-  useDraggableState,
-  useDropLine,
-} from '@udecode/plate-dnd';
+import { useDraggable, useDropLine } from '@udecode/plate-dnd';
 import { ResizableProvider } from '@udecode/plate-resizable';
 import { GripHorizontal } from 'lucide-react';
 import { Path } from 'slate';
@@ -26,24 +22,20 @@ import {
   TooltipTrigger,
 } from './tooltip';
 
-const DRAG_ITEM_COLUMN = 'column';
-
 export const ColumnElement = withHOC(
   ResizableProvider,
   withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {
     const readOnly = useReadOnly();
     const { width } = useElement<TColumnElement>();
 
-    const state = useDraggableState({
+    const { isDragging, previewRef, handleRef } = useDraggable({
       canDropNode: ({ dragEntry, dropEntry }) =>
         Path.equals(Path.parent(dragEntry[1]), Path.parent(dropEntry[1])),
       element: props.element,
       orientation: 'horizontal',
-      type: DRAG_ITEM_COLUMN,
+      type: 'column',
     });
 
-    const { previewRef, handleRef } = useDraggable(state);
-
     return (
       <div className="group/column relative" style={{ width: width ?? '100%' }}>
         <div
@@ -69,7 +61,7 @@ export const ColumnElement = withHOC(
             className={cn(
               'relative h-full border border-transparent p-1.5',
               !readOnly && 'rounded-lg border-dashed border-border',
-              state.isDragging && 'opacity-50'
+              isDragging && 'opacity-50'
             )}
           >
             {children}
@@ -108,9 +100,9 @@ const DropLine = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const state = useDropLine({ orientation: 'horizontal' });
+  const { dropLine } = useDropLine({ orientation: 'horizontal' });
 
-  if (!state.dropLine) return null;
+  if (!dropLine) return null;
 
   return (
     <div
@@ -120,9 +112,9 @@ const DropLine = React.forwardRef<
       className={cn(
         'slate-dropLine',
         'absolute bg-brand/50',
-        state.dropLine === 'left' &&
+        dropLine === 'left' &&
           'inset-y-0 left-[-10.5px] w-1 group-first/column:-left-1',
-        state.dropLine === 'right' &&
+        dropLine === 'right' &&
           'inset-y-0 right-[-11px] w-1 group-last/column:-right-1',
         className
       )}

diff --git a/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx b/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx
@@ -2,15 +2,23 @@
 
 import React from 'react';
 
-import type { TColumnElement } from '@udecode/plate-layout';
-
 import { cn, withRef } from '@udecode/cn';
-import { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';
+import {
+  useEditorRef,
+  useElement,
+  useRemoveNodeButton,
+} from '@udecode/plate-common/react';
+import {
+  type TColumnElement,
+  type TColumnGroupElement,
+  setColumns,
+} from '@udecode/plate-layout';
 import {
   ColumnItemPlugin,
-  useColumnState,
+  ColumnPlugin,
   useDebouncePopoverOpen,
 } from '@udecode/plate-layout/react';
+import { findNodePath } from '@udecode/slate';
 import { type LucideProps, Trash2Icon } from 'lucide-react';
 import { useReadOnly } from 'slate-react';
 
@@ -32,22 +40,23 @@ export const ColumnGroupElement = withRef<typeof PlateElement>(
 );
 
 export function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {
+  const editor = useEditorRef();
   const readOnly = useReadOnly();
 
-  const {
-    setDoubleColumn,
-    setDoubleSideDoubleColumn,
-    setLeftSideDoubleColumn,
-    setRightSideDoubleColumn,
-    setThreeColumn,
-  } = useColumnState();
-
   const element = useElement<TColumnElement>(ColumnItemPlugin.key);
+  const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);
 
   const { props: buttonProps } = useRemoveNodeButton({ element });
 
   const isOpen = useDebouncePopoverOpen();
 
+  const onColumnChange = (widths: string[]) => {
+    setColumns(editor, {
+      at: findNodePath(editor, columnGroupElement),
+      widths,
+    });
+  };
+
   if (readOnly) return <>{children}</>;
 
   return (
@@ -61,26 +70,38 @@ export function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {
         sideOffset={10}
       >
         <div className="box-content flex items-center [&_svg]:size-4 [&_svg]:text-muted-foreground">
-          <Button size="icon" variant="ghost" onClick={setDoubleColumn}>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => onColumnChange(['50%', '50%'])}
+          >
             <DoubleColumnOutlined />
           </Button>
-          <Button size="icon" variant="ghost" onClick={setThreeColumn}>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => onColumnChange(['33%', '33%', '33%'])}
+          >
             <ThreeColumnOutlined />
           </Button>
           <Button
             size="icon"
             variant="ghost"
-            onClick={setRightSideDoubleColumn}
+            onClick={() => onColumnChange(['70%', '30%'])}
           >
             <RightSideDoubleColumnOutlined />
           </Button>
-          <Button size="icon" variant="ghost" onClick={setLeftSideDoubleColumn}>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => onColumnChange(['30%', '70%'])}
+          >
             <LeftSideDoubleColumnOutlined />
           </Button>
           <Button
             size="icon"
             variant="ghost"
-            onClick={setDoubleSideDoubleColumn}
+            onClick={() => onColumnChange(['25%', '50%', '25%'])}
           >
             <DoubleSideDoubleColumnOutlined />
           </Button>

diff --git a/templates/plate-playground-template/src/components/plate-ui/date-element.tsx b/templates/plate-playground-template/src/components/plate-ui/date-element.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { cn, withRef } from '@udecode/cn';
-import { setNodes } from '@udecode/plate-common';
-import { findPath } from '@udecode/plate-common/react';
+import { setNode } from '@udecode/plate-common/react';
 import { useReadOnly } from 'slate-react';
 
 import { Calendar } from './calendar';
@@ -74,11 +73,7 @@ export const DateElement = withRef<typeof PlateElement>(
               onSelect={(date) => {
                 if (!date) return;
 
-                setNodes(
-                  editor,
-                  { date: date.toDateString() },
-                  { at: findPath(editor, element) }
-                );
+                setNode(editor, element, { date: date.toDateString() });
               }}
               mode="single"
               initialFocus