@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/block-context-menu.mjs

@@ -0,0 +1,130 @@
+"use client";
+
+import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "../../ui/context-menu.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorPlugin, usePlateState, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS } from "platejs";
+import { AIChatPlugin } from "@platejs/ai/react";
+import { BLOCK_CONTEXT_MENU_ID, BlockMenuPlugin, BlockSelectionPlugin } from "@platejs/selection/react";
+
+//#region src/components/editor/ui/block-context-menu.tsx
+function BlockContextMenu({ children }) {
+	const { api, editor } = useEditorPlugin(BlockMenuPlugin);
+	const [value, setValue] = React$1.useState(null);
+	const [readOnly] = usePlateState("readOnly");
+	const openId = usePluginOption(BlockMenuPlugin, "openId");
+	const posRef = React$1.useRef(void 0);
+	const handleTurnInto = (type) => {
+		editor.getApi(BlockSelectionPlugin).blockSelection.getNodes().forEach(([node, path]) => {
+			if (node[KEYS.listType]) editor.tf.unsetNodes([KEYS.listType, "indent"], { at: path });
+			editor.tf.toggleBlock(type, { at: path });
+		});
+	};
+	const handleAlign = (align) => {
+		editor.getTransforms(BlockSelectionPlugin).blockSelection.setNodes({ align });
+	};
+	return /* @__PURE__ */ jsxs(ContextMenu, {
+		open: openId === BLOCK_CONTEXT_MENU_ID,
+		onOpenChange: (open) => {
+			if (!open) api.blockMenu.hide();
+			else api.blockMenu.show(BLOCK_CONTEXT_MENU_ID, posRef.current);
+		},
+		children: [/* @__PURE__ */ jsx(ContextMenuTrigger, {
+			onContextMenu: (event) => {
+				const dataset = event.target.dataset;
+				if (dataset?.slateEditor === "true" || readOnly || dataset?.plateOpenContextMenu === "false") return event.preventDefault();
+				posRef.current = {
+					x: event.clientX,
+					y: event.clientY
+				};
+			},
+			render: /* @__PURE__ */ jsx("div", {
+				className: "w-full",
+				children
+			})
+		}), /* @__PURE__ */ jsxs(ContextMenuContent, {
+			className: "w-64",
+			finalFocus: () => {
+				editor.getApi(BlockSelectionPlugin).blockSelection.focus();
+				if (value === "askAI") editor.getApi(AIChatPlugin).aiChat.show();
+				setValue(null);
+			},
+			children: [/* @__PURE__ */ jsxs(ContextMenuGroup, { children: [
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					onClick: () => {
+						setValue("askAI");
+					},
+					children: "Ask AI"
+				}),
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					onClick: () => {
+						editor.getTransforms(BlockSelectionPlugin).blockSelection.removeNodes();
+						editor.tf.focus();
+					},
+					children: "Delete"
+				}),
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					onClick: () => {
+						editor.getTransforms(BlockSelectionPlugin).blockSelection.duplicate();
+					},
+					children: "Duplicate"
+				}),
+				/* @__PURE__ */ jsxs(ContextMenuSub, { children: [/* @__PURE__ */ jsx(ContextMenuSubTrigger, { children: "Turn into" }), /* @__PURE__ */ jsxs(ContextMenuSubContent, {
+					className: "w-48",
+					children: [
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleTurnInto(KEYS.p),
+							children: "Paragraph"
+						}),
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleTurnInto(KEYS.h1),
+							children: "Heading 1"
+						}),
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleTurnInto(KEYS.h2),
+							children: "Heading 2"
+						}),
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleTurnInto(KEYS.h3),
+							children: "Heading 3"
+						}),
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleTurnInto(KEYS.blockquote),
+							children: "Blockquote"
+						})
+					]
+				})] })
+			] }), /* @__PURE__ */ jsxs(ContextMenuGroup, { children: [
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					onClick: () => editor.getTransforms(BlockSelectionPlugin).blockSelection.setIndent(1),
+					children: "Indent"
+				}),
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					onClick: () => editor.getTransforms(BlockSelectionPlugin).blockSelection.setIndent(-1),
+					children: "Outdent"
+				}),
+				/* @__PURE__ */ jsxs(ContextMenuSub, { children: [/* @__PURE__ */ jsx(ContextMenuSubTrigger, { children: "Align" }), /* @__PURE__ */ jsxs(ContextMenuSubContent, {
+					className: "w-48",
+					children: [
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleAlign("left"),
+							children: "Left"
+						}),
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleAlign("center"),
+							children: "Center"
+						}),
+						/* @__PURE__ */ jsx(ContextMenuItem, {
+							onClick: () => handleAlign("right"),
+							children: "Right"
+						})
+					]
+				})] })
+			] })]
+		})]
+	});
+}
+
+//#endregion
+export { BlockContextMenu };

package/dist/src/components/editor/ui/block-discussion.mjs

@@ -0,0 +1,200 @@
+"use client";
+
+import { Button } from "../../ui/button.mjs";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../ui/popover.mjs";
+import { commentPlugin } from "../plugins/comment-kit.mjs";
+import { suggestionPlugin } from "../plugins/suggestion-kit.mjs";
+import { Comment, CommentCreateForm } from "./comment.mjs";
+import { BlockSuggestionCard, isResolvedSuggestion, useResolveSuggestion } from "./block-suggestion.mjs";
+import { discussionPlugin } from "../plugins/discussion-kit.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorPlugin, useEditorRef, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { PathApi, TextApi } from "platejs";
+import { getDraftCommentKey } from "@platejs/comment";
+import { getTransientSuggestionKey } from "@platejs/suggestion";
+import { MessageSquareTextIcon, MessagesSquareIcon, PencilLineIcon } from "lucide-react";
+import { CommentPlugin } from "@platejs/comment/react";
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+
+//#region src/components/editor/ui/block-discussion.tsx
+const BlockDiscussion = (props) => {
+	const { editor, element } = props;
+	const commentsApi = editor.getApi(CommentPlugin).comment;
+	const blockPath = editor.api.findPath(element);
+	if (!blockPath || blockPath.length > 1) return;
+	const draftCommentNode = commentsApi.node({
+		at: blockPath,
+		isDraft: true
+	});
+	const commentNodes = [...commentsApi.nodes({ at: blockPath })];
+	const suggestionNodes = [...editor.getApi(SuggestionPlugin).suggestion.nodes({ at: blockPath })].filter(([node]) => !node[getTransientSuggestionKey()]);
+	if (commentNodes.length === 0 && suggestionNodes.length === 0 && !draftCommentNode) return;
+	return (props$1) => /* @__PURE__ */ jsx(BlockCommentContent, {
+		blockPath,
+		commentNodes,
+		draftCommentNode,
+		suggestionNodes,
+		...props$1
+	});
+};
+const BlockCommentContent = ({ blockPath, children, commentNodes, draftCommentNode, suggestionNodes }) => {
+	const editor = useEditorRef();
+	const resolvedSuggestions = useResolveSuggestion(suggestionNodes, blockPath);
+	const resolvedDiscussions = useResolvedDiscussion(commentNodes, blockPath);
+	const suggestionsCount = resolvedSuggestions.length;
+	const discussionsCount = resolvedDiscussions.length;
+	const totalCount = suggestionsCount + discussionsCount;
+	const activeSuggestionId = usePluginOption(suggestionPlugin, "activeId");
+	const activeSuggestion = activeSuggestionId && resolvedSuggestions.find((s) => s.suggestionId === activeSuggestionId);
+	const commentingBlock = usePluginOption(commentPlugin, "commentingBlock");
+	const activeCommentId = usePluginOption(commentPlugin, "activeId");
+	const isCommenting = activeCommentId === getDraftCommentKey();
+	const activeDiscussion = activeCommentId && resolvedDiscussions.find((d) => d.id === activeCommentId);
+	const noneActive = !activeSuggestion && !activeDiscussion;
+	const sortedMergedData = [...resolvedDiscussions, ...resolvedSuggestions].sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
+	const selected = resolvedDiscussions.some((d) => d.id === activeCommentId) || resolvedSuggestions.some((s) => s.suggestionId === activeSuggestionId);
+	const [_open, setOpen] = React$1.useState(selected);
+	const commentingCurrent = !!commentingBlock && PathApi.equals(blockPath, commentingBlock);
+	const open = _open || selected || isCommenting && !!draftCommentNode && commentingCurrent;
+	const anchorElement = React$1.useMemo(() => {
+		let activeNode;
+		if (activeSuggestion) activeNode = suggestionNodes.find(([node]) => TextApi.isText(node) && editor.getApi(SuggestionPlugin).suggestion.nodeId(node) === activeSuggestion.suggestionId);
+		if (activeCommentId) if (activeCommentId === getDraftCommentKey()) activeNode = draftCommentNode;
+		else activeNode = commentNodes.find(([node]) => editor.getApi(commentPlugin).comment.nodeId(node) === activeCommentId);
+		if (!activeNode) return null;
+		return editor.api.toDOMNode(activeNode[0]);
+	}, [
+		open,
+		activeSuggestion,
+		activeCommentId,
+		editor.api,
+		suggestionNodes,
+		draftCommentNode,
+		commentNodes
+	]);
+	if (suggestionsCount + resolvedDiscussions.length === 0 && !draftCommentNode) return /* @__PURE__ */ jsx("div", {
+		className: "w-full",
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full justify-between",
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: (_open_) => {
+				if (!_open_ && isCommenting && draftCommentNode) editor.tf.unsetNodes(getDraftCommentKey(), {
+					at: [],
+					mode: "lowest",
+					match: (n) => n[getDraftCommentKey()]
+				});
+				setOpen(_open_);
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "w-full",
+					children
+				}),
+				anchorElement && /* @__PURE__ */ jsx(PopoverAnchor, {
+					asChild: true,
+					className: "w-full",
+					virtualRef: { current: anchorElement }
+				}),
+				/* @__PURE__ */ jsx(PopoverContent, {
+					className: "max-h-[min(50dvh,calc(-24px+var(--radix-popper-available-height)))] w-[380px] min-w-[130px] max-w-[calc(100vw-24px)] overflow-y-auto p-0 data-[state=closed]:opacity-0",
+					onCloseAutoFocus: (e) => e.preventDefault(),
+					onOpenAutoFocus: (e) => e.preventDefault(),
+					align: "center",
+					side: "bottom",
+					children: isCommenting ? /* @__PURE__ */ jsx(CommentCreateForm, {
+						className: "p-4",
+						focusOnMount: true
+					}) : noneActive ? sortedMergedData.map((item, index) => isResolvedSuggestion(item) ? /* @__PURE__ */ jsx(BlockSuggestionCard, {
+						idx: index,
+						isLast: index === sortedMergedData.length - 1,
+						suggestion: item
+					}, item.suggestionId) : /* @__PURE__ */ jsx(BlockComment, {
+						discussion: item,
+						isLast: index === sortedMergedData.length - 1
+					}, item.id)) : /* @__PURE__ */ jsxs(Fragment, { children: [activeSuggestion && /* @__PURE__ */ jsx(BlockSuggestionCard, {
+						idx: 0,
+						isLast: true,
+						suggestion: activeSuggestion
+					}, activeSuggestion.suggestionId), activeDiscussion && /* @__PURE__ */ jsx(BlockComment, {
+						discussion: activeDiscussion,
+						isLast: true
+					})] })
+				}),
+				totalCount > 0 && /* @__PURE__ */ jsx("div", {
+					className: "relative left-0 size-0 select-none",
+					children: /* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							className: "!px-1.5 mt-1 ml-1 flex h-6 gap-1 py-0 text-muted-foreground/80 hover:text-muted-foreground/80 data-[active=true]:bg-muted",
+							"data-active": open,
+							contentEditable: false,
+							children: [
+								suggestionsCount > 0 && discussionsCount === 0 && /* @__PURE__ */ jsx(PencilLineIcon, { className: "size-4 shrink-0" }),
+								suggestionsCount === 0 && discussionsCount > 0 && /* @__PURE__ */ jsx(MessageSquareTextIcon, { className: "size-4 shrink-0" }),
+								suggestionsCount > 0 && discussionsCount > 0 && /* @__PURE__ */ jsx(MessagesSquareIcon, { className: "size-4 shrink-0" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "font-semibold text-xs",
+									children: totalCount
+								})
+							]
+						})
+					})
+				})
+			]
+		})
+	});
+};
+function BlockComment({ discussion, isLast }) {
+	const [editingId, setEditingId] = React$1.useState(null);
+	return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "p-4",
+		children: [discussion.comments.map((comment, index) => /* @__PURE__ */ jsx(Comment, {
+			comment,
+			discussionLength: discussion.comments.length,
+			documentContent: discussion?.documentContent,
+			editingId,
+			index,
+			setEditingId,
+			showDocumentContent: true
+		}, comment.id ?? index)), /* @__PURE__ */ jsx(CommentCreateForm, { discussionId: discussion.id })]
+	}), !isLast && /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-muted" })] }, discussion.id);
+}
+const useResolvedDiscussion = (commentNodes, blockPath) => {
+	const { api, getOption, setOption } = useEditorPlugin(commentPlugin);
+	const discussions = usePluginOption(discussionPlugin, "discussions");
+	commentNodes.forEach(([node]) => {
+		const id = api.comment.nodeId(node);
+		const map = getOption("uniquePathMap");
+		if (!id) return;
+		const previousPath = map.get(id);
+		if (PathApi.isPath(previousPath)) {
+			if (!api.comment.node({
+				id,
+				at: previousPath
+			})) {
+				setOption("uniquePathMap", new Map(map).set(id, blockPath));
+				return;
+			}
+			return;
+		}
+		setOption("uniquePathMap", new Map(map).set(id, blockPath));
+	});
+	const commentsIds = new Set(commentNodes.map(([node]) => api.comment.nodeId(node)).filter(Boolean));
+	return discussions.map((d) => ({
+		...d,
+		createdAt: new Date(d.createdAt)
+	})).filter((item) => {
+		const firstBlockPath = getOption("uniquePathMap").get(item.id);
+		if (!firstBlockPath) return false;
+		if (!PathApi.equals(firstBlockPath, blockPath)) return false;
+		return api.comment.has({ id: item.id }) && commentsIds.has(item.id) && !item.isResolved;
+	});
+};
+
+//#endregion
+export { BlockDiscussion };

package/dist/src/components/editor/ui/block-draggable.mjs

@@ -0,0 +1,265 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MemoizedChildren, useEditorRef, useElement, usePluginOption, useSelected } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS, getPluginByType, isType } from "platejs";
+import { BlockSelectionPlugin } from "@platejs/selection/react";
+import { GripVertical } from "lucide-react";
+import { expandListItemsWithChildren } from "@platejs/list";
+import { DndPlugin, useDraggable, useDropLine } from "@platejs/dnd";
+
+//#region src/components/editor/ui/block-draggable.tsx
+const UNDRAGGABLE_KEYS = [
+	KEYS.column,
+	KEYS.tr,
+	KEYS.td
+];
+const BlockDraggable = (props) => {
+	const { editor, element, path } = props;
+	if (!React$1.useMemo(() => {
+		if (editor.dom.readOnly) return false;
+		if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) return true;
+		if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
+			if (editor.api.some({
+				at: path,
+				match: { type: editor.getType(KEYS.column) }
+			})) return true;
+		}
+		if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
+			if (editor.api.some({
+				at: path,
+				match: { type: editor.getType(KEYS.table) }
+			})) return true;
+		}
+		return false;
+	}, [
+		editor,
+		element,
+		path
+	])) return;
+	return (props$1) => /* @__PURE__ */ jsx(Draggable, { ...props$1 });
+};
+function Draggable(props) {
+	const { children, editor, element, path } = props;
+	const blockSelectionApi = editor.getApi(BlockSelectionPlugin).blockSelection;
+	const { isAboutToDrag, isDragging, nodeRef, previewRef, handleRef } = useDraggable({
+		element,
+		onDropHandler: (_, { dragItem }) => {
+			const id = dragItem.id;
+			if (blockSelectionApi) blockSelectionApi.add(id);
+			resetPreview();
+		}
+	});
+	const isInColumn = path.length === 3;
+	const isInTable = path.length === 4;
+	const [previewTop, setPreviewTop] = React$1.useState(0);
+	const resetPreview = () => {
+		if (previewRef.current) {
+			previewRef.current.replaceChildren();
+			previewRef.current?.classList.add("hidden");
+		}
+	};
+	React$1.useEffect(() => {
+		if (!isDragging) resetPreview();
+	}, [isDragging]);
+	React$1.useEffect(() => {
+		if (isAboutToDrag) previewRef.current?.classList.remove("opacity-0");
+	}, [isAboutToDrag]);
+	const [dragButtonTop, setDragButtonTop] = React$1.useState(0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", isDragging && "opacity-50", getPluginByType(editor, element.type)?.node.isContainer ? "group/container" : "group"),
+		onMouseEnter: () => {
+			if (isDragging) return;
+			setDragButtonTop(calcDragButtonTop(editor, element));
+		},
+		children: [
+			!isInTable && /* @__PURE__ */ jsx(Gutter, { children: /* @__PURE__ */ jsx("div", {
+				className: cn("slate-blockToolbarWrapper", "flex h-[1.5em]", isInColumn && "h-4"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("slate-blockToolbar relative w-4.5", "pointer-events-auto mr-1 flex items-center", isInColumn && "mr-1.5"),
+					children: /* @__PURE__ */ jsx(Button, {
+						ref: handleRef,
+						variant: "ghost",
+						className: "-left-0 absolute h-6 w-full p-0",
+						style: { top: `${dragButtonTop + 3}px` },
+						"data-plate-prevent-deselect": true,
+						children: /* @__PURE__ */ jsx(DragHandle, {
+							isDragging,
+							previewRef,
+							resetPreview,
+							setPreviewTop
+						})
+					})
+				})
+			}) }),
+			/* @__PURE__ */ jsx("div", {
+				ref: previewRef,
+				className: cn("-left-0 absolute hidden w-full"),
+				style: { top: `${-previewTop}px` },
+				contentEditable: false
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: nodeRef,
+				className: "slate-blockWrapper flow-root",
+				onContextMenu: (event) => editor.getApi(BlockSelectionPlugin).blockSelection.addOnContextMenu({
+					element,
+					event
+				}),
+				children: [/* @__PURE__ */ jsx(MemoizedChildren, { children }), /* @__PURE__ */ jsx(DropLine, {})]
+			})
+		]
+	});
+}
+function Gutter({ children, className, ...props }) {
+	const editor = useEditorRef();
+	const element = useElement();
+	const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
+	const selected = useSelected();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("slate-gutterLeft", "-translate-x-full absolute top-0 z-10 flex h-full cursor-text hover:opacity-100 sm:opacity-0", getPluginByType(editor, element.type)?.node.isContainer ? "group-hover/container:opacity-100" : "group-hover:opacity-100", isSelectionAreaVisible && "hidden", !selected && "opacity-0", className),
+		contentEditable: false,
+		children
+	});
+}
+const DragHandle = React$1.memo(function DragHandle$1({ isDragging, previewRef, resetPreview, setPreviewTop }) {
+	const editor = useEditorRef();
+	const element = useElement();
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex size-full items-center justify-center",
+			onClick: (e) => {
+				e.preventDefault();
+				editor.getApi(BlockSelectionPlugin).blockSelection.focus();
+			},
+			onMouseDown: (e) => {
+				resetPreview();
+				if (e.button !== 0 && e.button !== 2 || e.shiftKey) return;
+				const blockSelection = editor.getApi(BlockSelectionPlugin).blockSelection.getNodes({ sort: true });
+				let selectionNodes = blockSelection.length > 0 ? blockSelection : editor.api.blocks({ mode: "highest" });
+				if (!selectionNodes.some(([node]) => node.id === element.id)) selectionNodes = [[element, editor.api.findPath(element)]];
+				const blocks = expandListItemsWithChildren(editor, selectionNodes).map(([node]) => node);
+				if (blockSelection.length === 0) {
+					editor.tf.blur();
+					editor.tf.collapse();
+				}
+				const elements = createDragPreviewElements(editor, blocks);
+				previewRef.current?.append(...elements);
+				previewRef.current?.classList.remove("hidden");
+				previewRef.current?.classList.add("opacity-0");
+				editor.setOption(DndPlugin, "multiplePreviewRef", previewRef);
+				editor.getApi(BlockSelectionPlugin).blockSelection.set(blocks.map((block) => block.id));
+			},
+			onMouseEnter: () => {
+				if (isDragging) return;
+				const blockSelection = editor.getApi(BlockSelectionPlugin).blockSelection.getNodes({ sort: true });
+				let selectedBlocks = blockSelection.length > 0 ? blockSelection : editor.api.blocks({ mode: "highest" });
+				if (!selectedBlocks.some(([node]) => node.id === element.id)) selectedBlocks = [[element, editor.api.findPath(element)]];
+				const processedBlocks = expandListItemsWithChildren(editor, selectedBlocks);
+				const ids = processedBlocks.map((block) => block[0].id);
+				if (ids.length > 1 && ids.includes(element.id)) setPreviewTop(calculatePreviewTop(editor, {
+					blocks: processedBlocks.map((block) => block[0]),
+					element
+				}));
+				else setPreviewTop(0);
+			},
+			onMouseUp: () => {
+				resetPreview();
+			},
+			"data-plate-prevent-deselect": true,
+			role: "button",
+			children: /* @__PURE__ */ jsx(GripVertical, { className: "text-muted-foreground" })
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Drag to move" })] });
+});
+const DropLine = React$1.memo(function DropLine$1({ className, ...props }) {
+	const { dropLine } = useDropLine();
+	if (!dropLine) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("slate-dropLine", "absolute inset-x-0 h-0.5 opacity-100 transition-opacity", "bg-brand/50", dropLine === "top" && "-top-px", dropLine === "bottom" && "-bottom-px", className)
+	});
+});
+const createDragPreviewElements = (editor, blocks) => {
+	const elements = [];
+	const ids = [];
+	/**
+	* Remove data attributes from the element to avoid recognized as slate
+	* elements incorrectly.
+	*/
+	const removeDataAttributes = (element) => {
+		Array.from(element.attributes).forEach((attr) => {
+			if (attr.name.startsWith("data-slate") || attr.name.startsWith("data-block-id")) element.removeAttribute(attr.name);
+		});
+		Array.from(element.children).forEach((child) => {
+			removeDataAttributes(child);
+		});
+	};
+	const resolveElement = (node, index) => {
+		const domNode = editor.api.toDOMNode(node);
+		const newDomNode = domNode.cloneNode(true);
+		const applyScrollCompensation = (original, cloned) => {
+			const scrollLeft = original.scrollLeft;
+			if (scrollLeft > 0) {
+				const scrollWrapper = document.createElement("div");
+				scrollWrapper.style.overflow = "hidden";
+				scrollWrapper.style.width = `${original.clientWidth}px`;
+				const innerContainer = document.createElement("div");
+				innerContainer.style.transform = `translateX(-${scrollLeft}px)`;
+				innerContainer.style.width = `${original.scrollWidth}px`;
+				while (cloned.firstChild) innerContainer.append(cloned.firstChild);
+				const originalStyles = window.getComputedStyle(original);
+				cloned.style.padding = "0";
+				innerContainer.style.padding = originalStyles.padding;
+				scrollWrapper.append(innerContainer);
+				cloned.append(scrollWrapper);
+			}
+		};
+		applyScrollCompensation(domNode, newDomNode);
+		ids.push(node.id);
+		const wrapper = document.createElement("div");
+		wrapper.append(newDomNode);
+		wrapper.style.display = "flow-root";
+		const lastBlockNode = blocks[index - 1];
+		const lastDomNode = lastBlockNode ? editor.api.toDOMNode(lastBlockNode) : void 0;
+		if (domNode.parentElement && lastDomNode?.parentElement) {
+			const lastDomNodeRect = lastDomNode.parentElement.getBoundingClientRect();
+			const distance = domNode.parentElement.getBoundingClientRect().top - lastDomNodeRect.bottom;
+			if (distance > 15) wrapper.style.marginTop = `${distance}px`;
+		}
+		removeDataAttributes(newDomNode);
+		elements.push(wrapper);
+	};
+	blocks.forEach((node, index) => {
+		resolveElement(node, index);
+	});
+	editor.setOption(DndPlugin, "draggingId", ids);
+	return elements;
+};
+const calculatePreviewTop = (editor, { blocks, element }) => {
+	const child = editor.api.toDOMNode(element);
+	const editable = editor.api.toDOMNode(editor);
+	const firstSelectedChild = blocks[0];
+	const firstDomNode = editor.api.toDOMNode(firstSelectedChild);
+	const editorPaddingTop = Number(window.getComputedStyle(editable).paddingTop.replace("px", ""));
+	const firstNodeToEditorDistance = firstDomNode.getBoundingClientRect().top - editable.getBoundingClientRect().top - editorPaddingTop;
+	const firstMarginTopString = window.getComputedStyle(firstDomNode).marginTop;
+	const marginTop = Number(firstMarginTopString.replace("px", ""));
+	const currentToEditorDistance = child.getBoundingClientRect().top - editable.getBoundingClientRect().top - editorPaddingTop;
+	const currentMarginTopString = window.getComputedStyle(child).marginTop;
+	const currentMarginTop = Number(currentMarginTopString.replace("px", ""));
+	return currentToEditorDistance - firstNodeToEditorDistance + marginTop - currentMarginTop;
+};
+const calcDragButtonTop = (editor, element) => {
+	const child = editor.api.toDOMNode(element);
+	const currentMarginTopString = window.getComputedStyle(child).marginTop;
+	return Number(currentMarginTopString.replace("px", ""));
+};
+
+//#endregion
+export { BlockDraggable };

package/dist/src/components/editor/ui/block-list-static.mjs

@@ -0,0 +1,48 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { isOrderedList } from "@platejs/list";
+
+//#region src/components/editor/ui/block-list-static.tsx
+const config = { todo: {
+	Li: TodoLiStatic,
+	Marker: TodoMarkerStatic
+} };
+const BlockListStatic = (props) => {
+	if (!props.element.listStyleType) return;
+	return (props$1) => /* @__PURE__ */ jsx(List$1, { ...props$1 });
+};
+function List$1(props) {
+	const { listStart, listStyleType } = props.element;
+	const { Li, Marker } = config[listStyleType] ?? {};
+	return /* @__PURE__ */ jsxs(isOrderedList(props.element) ? "ol" : "ul", {
+		className: "relative m-0 p-0",
+		style: { listStyleType },
+		start: listStart,
+		children: [Marker && /* @__PURE__ */ jsx(Marker, { ...props }), Li ? /* @__PURE__ */ jsx(Li, { ...props }) : /* @__PURE__ */ jsx("li", { children: props.children })]
+	});
+}
+function TodoMarkerStatic(props) {
+	const checked = props.element.checked;
+	return /* @__PURE__ */ jsx("div", {
+		contentEditable: false,
+		children: /* @__PURE__ */ jsx("button", {
+			className: cn("peer -left-6 pointer-events-none absolute top-1 size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", props.className),
+			"data-state": checked ? "checked" : "unchecked",
+			type: "button",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("flex items-center justify-center text-current"),
+				children: checked && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+			})
+		})
+	});
+}
+function TodoLiStatic(props) {
+	return /* @__PURE__ */ jsx("li", {
+		className: cn("list-none", props.element.checked && "text-muted-foreground line-through"),
+		children: props.children
+	});
+}
+
+//#endregion
+export { BlockListStatic };