docs

udecode · Dec 20, 2024 · 30b6812 · 30b6812
1 parent 8c126c6
commit 30b6812
Show file tree

Hide file tree

Showing 17 changed files with 295 additions and 370 deletions.
diff --git a/apps/www/src/app/(app)/_components/installation-tab.tsx b/apps/www/src/app/(app)/_components/installation-tab.tsx
@@ -309,7 +309,6 @@ export default function InstallationTab() {
     pluginsCode.push(formattedPlugin + ',');
   });
 
-  const hasDraggable = components.some((comp) => comp.id === 'draggable');
   const hasPlaceholder = components.some((comp) => comp.id === 'placeholder');
 
   const usageCode = [
@@ -318,11 +317,11 @@ export default function InstallationTab() {
     pluginsCode.join('\n'),
     '  ],',
     '  override: {',
-    `    components: ${hasDraggable ? 'withDraggables(' : ''}${hasPlaceholder ? 'withPlaceholders(' : ''}({`,
+    `    components: ${hasPlaceholder ? 'withPlaceholders(' : ''}({`,
     ...componentsWithPluginKey.map(
       ({ pluginKey, usage }) => `      [${pluginKey}]: ${usage},`
     ),
-    `    })${hasPlaceholder ? ')' : ''}${hasDraggable ? ')' : ''},`,
+    `    })${hasPlaceholder ? ')' : ''},`,
     '  },',
     '  value: [',
     '    {',

diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts
@@ -417,16 +417,16 @@ export const customizerItems: Record<string, SettingPlugin> = {
   [DndPlugin.key]: {
     id: DndPlugin.key,
     badges: [customizerBadges.handler, customizerBadges.ui],
-    components: [
-      {
-        id: 'draggable',
-        filename: 'with-draggables',
-        label: 'Draggable',
-        registry: 'draggable',
-        route: getComponentNavItem('draggable').href,
-        usage: 'withDraggables',
-      },
-    ],
+    // components: [
+    //   {
+    //     id: 'draggable',
+    //     filename: 'with-draggables',
+    //     label: 'Draggable',
+    //     registry: 'draggable',
+    //     route: getComponentNavItem('draggable').href,
+    //     usage: 'withDraggables',
+    //   },
+    // ],
     customImports: [
       `import { DndProvider } from 'react-dnd';`,
       `import { HTML5Backend } from 'react-dnd-html5-backend';`,

diff --git a/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.ts b/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.ts
@@ -92,59 +92,56 @@ import { TableElement } from '@/registry/default/plate-ui/table-element';
 import { TableRowElement } from '@/registry/default/plate-ui/table-row-element';
 import { TocElement } from '@/registry/default/plate-ui/toc-element';
 import { ToggleElement } from '@/registry/default/plate-ui/toggle-element';
-import { withDraggables } from '@/registry/default/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/apps/www/src/registry/default/components/editor/plugins/dnd-plugins.tsx b/apps/www/src/registry/default/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 '@/registry/default/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/apps/www/src/registry/default/components/editor/transforms.ts b/apps/www/src/registry/default/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/apps/www/src/registry/default/components/editor/use-create-editor-list.ts b/apps/www/src/registry/default/components/editor/use-create-editor-list.ts
@@ -88,58 +88,55 @@ import { TableElement } from '@/registry/default/plate-ui/table-element';
 import { TableRowElement } from '@/registry/default/plate-ui/table-row-element';
 import { TocElement } from '@/registry/default/plate-ui/toc-element';
 import { ToggleElement } from '@/registry/default/plate-ui/toggle-element';
-import { withDraggables } from '@/registry/default/plate-ui/with-draggables';
 
 export const useCreateEditor = () => {
   return usePlateEditor({
     override: {
-      components: withDraggables(
-        withPlaceholders({
-          [AIPlugin.key]: AILeaf,
-          [BlockquotePlugin.key]: BlockquoteElement,
-          [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
-          [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }),
-          [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,
-          [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,
-          [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }),
-          [MediaEmbedPlugin.key]: MediaEmbedElement,
-          [MentionInputPlugin.key]: MentionInputElement,
-          [MentionPlugin.key]: MentionElement,
-          [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),
-          [ParagraphPlugin.key]: ParagraphElement,
-          [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' }),
-        })
-      ),
+      components: withPlaceholders({
+        [AIPlugin.key]: AILeaf,
+        [BlockquotePlugin.key]: BlockquoteElement,
+        [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
+        [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }),
+        [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,
+        [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,
+        [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }),
+        [MediaEmbedPlugin.key]: MediaEmbedElement,
+        [MentionInputPlugin.key]: MentionInputElement,
+        [MentionPlugin.key]: MentionElement,
+        [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }),
+        [ParagraphPlugin.key]: ParagraphElement,
+        [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' }),
+      }),
     },
     plugins: [
       ...copilotPlugins,

diff --git a/apps/www/src/registry/default/components/editor/use-create-editor.ts b/apps/www/src/registry/default/components/editor/use-create-editor.ts
@@ -91,7 +91,6 @@ import { TableElement } from '@/registry/default/plate-ui/table-element';
 import { TableRowElement } from '@/registry/default/plate-ui/table-row-element';
 import { TocElement } from '@/registry/default/plate-ui/toc-element';
 import { ToggleElement } from '@/registry/default/plate-ui/toggle-element';
-import { withDraggables } from '@/registry/default/plate-ui/with-draggables';
 
 import { editorPlugins, viewPlugins } from './plugins/editor-plugins';
 
@@ -162,9 +161,7 @@ export const useCreateEditor = (
     {
       override: {
         components: {
-          ...(readOnly
-            ? viewComponents
-            : withPlaceholders(withDraggables(editorComponents))),
+          ...(readOnly ? viewComponents : withPlaceholders(editorComponents)),
           ...components,
         },
         ...override,

diff --git a/apps/www/src/registry/default/plate-ui/column-element.tsx b/apps/www/src/registry/default/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
       )}