(
className={cn(
'relative',
isDragging && 'opacity-50',
- 'group',
+ STRUCTURAL_TYPES.includes(element.type)
+ ? 'group/structural'
+ : 'group',
className
)}
>
-
+
@@ -95,23 +157,52 @@ const Gutter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes
>(({ children, className, ...props }, ref) => {
- const { useOption } = useEditorPlugin(BlockSelectionPlugin);
+ const { editor, useOption } = useEditorPlugin(BlockSelectionPlugin);
+ const element = useElement();
+ const path = usePath();
const isSelectionAreaVisible = useOption('isSelectionAreaVisible');
- const gutter = useDraggableGutter();
const selected = useSelected();
+ const isNodeType = (keys: string[] | string) => isType(editor, element, keys);
+
+ const isInColumn = path?.length === 3;
+ const isInTable = path?.length === 4;
+
return (
{children}
@@ -149,21 +240,20 @@ const DragHandle = React.memo(() => {
const DropLine = React.memo(
React.forwardRef>(
({ className, ...props }, ref) => {
- const state = useDropLine();
+ const { dropLine } = useDropLine();
- if (!state.dropLine) return null;
+ if (!dropLine) return null;
return (
diff --git a/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx
index 589997c8ea..67a89cbd6d 100644
--- a/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx
@@ -115,6 +115,8 @@ import {
import { EditorStatic } from './editor-static';
import { ToolbarButton } from './toolbar';
+const siteUrl = 'https://platejs.org';
+
export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
const editor = useEditorRef();
const openState = useOpenState();
@@ -318,13 +320,8 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } },
});
- console.log(process.env.NEXT_PUBLIC_URL, 'fj');
-
- const prismCss = ``;
- const tailwindCss = `
-
-
- `;
+ const prismCss = ``;
+ const tailwindCss = ``;
const html = `
diff --git a/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx b/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx
deleted file mode 100644
index 85f455a705..0000000000
--- a/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-'use client';
-
-import type { FC } from 'react';
-
-import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
-import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
-import {
- ParagraphPlugin,
- createNodesWithHOC,
-} from '@udecode/plate-common/react';
-import {
- type WithDraggableOptions,
- withDraggable as withDraggablePrimitive,
-} from '@udecode/plate-dnd';
-import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';
-import { HEADING_KEYS } from '@udecode/plate-heading';
-import { ColumnPlugin } from '@udecode/plate-layout/react';
-import {
- ImagePlugin,
- MediaEmbedPlugin,
- PlaceholderPlugin,
-} from '@udecode/plate-media/react';
-import { TablePlugin } from '@udecode/plate-table/react';
-import { TogglePlugin } from '@udecode/plate-toggle/react';
-
-import { type DraggableProps, Draggable } from './draggable';
-
-export const withDraggable = (
- Component: FC,
- options?: WithDraggableOptions<
- Partial>
- >
-) =>
- withDraggablePrimitive(Draggable, Component, options as any);
-
-export const withDraggablesPrimitive = createNodesWithHOC(withDraggable);
-
-export const withDraggables = (components: any) => {
- return withDraggablesPrimitive(components, [
- {
- keys: [ParagraphPlugin.key, 'ul', 'ol'],
- level: 0,
- },
- {
- key: HEADING_KEYS.h1,
- draggableProps: {
- className:
- '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.875em]',
- },
- },
- {
- key: HEADING_KEYS.h2,
- draggableProps: {
- className:
- '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.5em]',
- },
- },
- {
- key: HEADING_KEYS.h3,
- draggableProps: {
- className:
- '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:pt-[2px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.25em]',
- },
- },
- {
- keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],
- draggableProps: {
- className:
- '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:pt-[3px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0 [&_.slate-gutterLeft]:text-[1.1em]',
- },
- },
- {
- keys: [ParagraphPlugin.key],
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-[3px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- keys: [HEADING_KEYS.h6, 'ul', 'ol'],
- draggableProps: {
- className: '[&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: BlockquotePlugin.key,
- draggableProps: {
- className: '[&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: CodeBlockPlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-6 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: ImagePlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: MediaEmbedPlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: ExcalidrawPlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: TogglePlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: ColumnPlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: PlaceholderPlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-3 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- {
- key: TablePlugin.key,
- draggableProps: {
- className:
- '[&_.slate-gutterLeft]:pt-3 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',
- },
- },
- ]);
-};