@fuma-content/studio 1.0.0 → 1.0.2

package/src/components/editor/ui/block-draggable.tsx

@@ -1,464 +0,0 @@
-"use client";
-
-import { DndPlugin, useDraggable, useDropLine } from "@platejs/dnd";
-import { expandListItemsWithChildren } from "@platejs/list";
-import { BlockSelectionPlugin } from "@platejs/selection/react";
-import { GripVertical } from "lucide-react";
-import { getPluginByType, isType, KEYS, type TElement } from "platejs";
-import {
-  MemoizedChildren,
-  type PlateEditor,
-  type PlateElementProps,
-  type RenderNodeWrapper,
-  useEditorRef,
-  useElement,
-  usePluginOption,
-  useSelected,
-} from "platejs/react";
-import * as React from "react";
-
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
-
-export const BlockDraggable: RenderNodeWrapper = (props) => {
-  const { editor, element, path } = props;
-
-  const enabled = React.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)) {
-      const block = editor.api.some({
-        at: path,
-        match: {
-          type: editor.getType(KEYS.column),
-        },
-      });
-
-      if (block) {
-        return true;
-      }
-    }
-    if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
-      const block = editor.api.some({
-        at: path,
-        match: {
-          type: editor.getType(KEYS.table),
-        },
-      });
-
-      if (block) {
-        return true;
-      }
-    }
-
-    return false;
-  }, [editor, element, path]);
-
-  if (!enabled) return;
-
-  return (props) => <Draggable {...props} />;
-};
-
-function Draggable(props: PlateElementProps) {
-  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 as { id: string[] | string }).id;
-
-      if (blockSelectionApi) {
-        blockSelectionApi.add(id);
-      }
-      resetPreview();
-    },
-  });
-
-  const isInColumn = path.length === 3;
-  const isInTable = path.length === 4;
-
-  const [previewTop, setPreviewTop] = React.useState(0);
-
-  const resetPreview = () => {
-    if (previewRef.current) {
-      previewRef.current.replaceChildren();
-      previewRef.current?.classList.add("hidden");
-    }
-  };
-
-  // clear up virtual multiple preview when drag end
-  React.useEffect(() => {
-    if (!isDragging) {
-      resetPreview();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDragging]);
-
-  React.useEffect(() => {
-    if (isAboutToDrag) {
-      previewRef.current?.classList.remove("opacity-0");
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isAboutToDrag]);
-
-  const [dragButtonTop, setDragButtonTop] = React.useState(0);
-
-  return (
-    <div
-      className={cn(
-        "relative",
-        isDragging && "opacity-50",
-        getPluginByType(editor, element.type)?.node.isContainer ? "group/container" : "group",
-      )}
-      onMouseEnter={() => {
-        if (isDragging) return;
-        setDragButtonTop(calcDragButtonTop(editor, element));
-      }}
-    >
-      {!isInTable && (
-        <Gutter>
-          <div className={cn("slate-blockToolbarWrapper", "flex h-[1.5em]", isInColumn && "h-4")}>
-            <div
-              className={cn(
-                "slate-blockToolbar relative w-4.5",
-                "pointer-events-auto mr-1 flex items-center",
-                isInColumn && "mr-1.5",
-              )}
-            >
-              <Button
-                ref={handleRef}
-                variant="ghost"
-                className="-left-0 absolute h-6 w-full p-0"
-                style={{ top: `${dragButtonTop + 3}px` }}
-                data-plate-prevent-deselect
-              >
-                <DragHandle
-                  isDragging={isDragging}
-                  previewRef={previewRef}
-                  resetPreview={resetPreview}
-                  setPreviewTop={setPreviewTop}
-                />
-              </Button>
-            </div>
-          </div>
-        </Gutter>
-      )}
-
-      <div
-        ref={previewRef}
-        className={cn("-left-0 absolute hidden w-full")}
-        style={{ top: `${-previewTop}px` }}
-        contentEditable={false}
-      />
-
-      <div
-        ref={nodeRef}
-        className="slate-blockWrapper flow-root"
-        onContextMenu={(event) =>
-          editor.getApi(BlockSelectionPlugin).blockSelection.addOnContextMenu({ element, event })
-        }
-      >
-        <MemoizedChildren>{children}</MemoizedChildren>
-        <DropLine />
-      </div>
-    </div>
-  );
-}
-
-function Gutter({ children, className, ...props }: React.ComponentProps<"div">) {
-  const editor = useEditorRef();
-  const element = useElement();
-  const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
-  const selected = useSelected();
-
-  return (
-    <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}
-    </div>
-  );
-}
-
-const DragHandle = React.memo(function DragHandle({
-  isDragging,
-  previewRef,
-  resetPreview,
-  setPreviewTop,
-}: {
-  isDragging: boolean;
-  previewRef: React.RefObject<HTMLDivElement | null>;
-  resetPreview: () => void;
-  setPreviewTop: (top: number) => void;
-}) {
-  const editor = useEditorRef();
-  const element = useElement();
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <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 current block is not in selection, use it as the starting point
-            if (!selectionNodes.some(([node]) => node.id === element.id)) {
-              selectionNodes = [[element, editor.api.findPath(element)!]];
-            }
-
-            // Process selection nodes to include list children
-            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 as string));
-          }}
-          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 current block is not in selection, use it as the starting point
-            if (!selectedBlocks.some(([node]) => node.id === element.id)) {
-              selectedBlocks = [[element, editor.api.findPath(element)!]];
-            }
-
-            // Process selection to include list children
-            const processedBlocks = expandListItemsWithChildren(editor, selectedBlocks);
-
-            const ids = processedBlocks.map((block) => block[0].id as string);
-
-            if (ids.length > 1 && ids.includes(element.id as string)) {
-              const previewTop = calculatePreviewTop(editor, {
-                blocks: processedBlocks.map((block) => block[0]),
-                element,
-              });
-              setPreviewTop(previewTop);
-            } else {
-              setPreviewTop(0);
-            }
-          }}
-          onMouseUp={() => {
-            resetPreview();
-          }}
-          data-plate-prevent-deselect
-          role="button"
-        >
-          <GripVertical className="text-muted-foreground" />
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>Drag to move</TooltipContent>
-    </Tooltip>
-  );
-});
-
-const DropLine = React.memo(function DropLine({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  const { dropLine } = useDropLine();
-
-  if (!dropLine) return null;
-
-  return (
-    <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: PlateEditor, blocks: TElement[]): HTMLElement[] => {
-  const elements: HTMLElement[] = [];
-  const ids: string[] = [];
-
-  /**
-   * Remove data attributes from the element to avoid recognized as slate
-   * elements incorrectly.
-   */
-  const removeDataAttributes = (element: HTMLElement) => {
-    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 as HTMLElement);
-    });
-  };
-
-  const resolveElement = (node: TElement, index: number) => {
-    const domNode = editor.api.toDOMNode(node)!;
-    const newDomNode = domNode.cloneNode(true) as HTMLElement;
-
-    // Apply visual compensation for horizontal scroll
-    const applyScrollCompensation = (original: Element, cloned: HTMLElement) => {
-      const scrollLeft = original.scrollLeft;
-
-      if (scrollLeft > 0) {
-        // Create a wrapper to handle the scroll offset
-        const scrollWrapper = document.createElement("div");
-        scrollWrapper.style.overflow = "hidden";
-        scrollWrapper.style.width = `${original.clientWidth}px`;
-
-        // Create inner container with the full content
-        const innerContainer = document.createElement("div");
-        innerContainer.style.transform = `translateX(-${scrollLeft}px)`;
-        innerContainer.style.width = `${original.scrollWidth}px`;
-
-        // Move all children to the inner container
-        while (cloned.firstChild) {
-          innerContainer.append(cloned.firstChild);
-        }
-
-        // Apply the original element's styles to maintain appearance
-        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 as string);
-    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) : undefined;
-    if (domNode.parentElement && lastDomNode?.parentElement) {
-      const lastDomNodeRect = lastDomNode.parentElement.getBoundingClientRect();
-
-      const domNodeRect = domNode.parentElement.getBoundingClientRect();
-      const distance = domNodeRect.top - lastDomNodeRect.bottom;
-
-      // Check if the two elements are adjacent (touching each other)
-      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: PlateEditor,
-  {
-    blocks,
-    element,
-  }: {
-    blocks: TElement[];
-    element: TElement;
-  },
-): number => {
-  const child = editor.api.toDOMNode(element)!;
-  const editable = editor.api.toDOMNode(editor)!;
-  const firstSelectedChild = blocks[0];
-
-  const firstDomNode = editor.api.toDOMNode(firstSelectedChild)!;
-  // Get editor's top padding
-  const editorPaddingTop = Number(window.getComputedStyle(editable).paddingTop.replace("px", ""));
-
-  // Calculate distance from first selected node to editor top
-  const firstNodeToEditorDistance =
-    firstDomNode.getBoundingClientRect().top -
-    editable.getBoundingClientRect().top -
-    editorPaddingTop;
-
-  // Get margin top of first selected node
-  const firstMarginTopString = window.getComputedStyle(firstDomNode).marginTop;
-  const marginTop = Number(firstMarginTopString.replace("px", ""));
-
-  // Calculate distance from current node to editor top
-  const currentToEditorDistance =
-    child.getBoundingClientRect().top - editable.getBoundingClientRect().top - editorPaddingTop;
-
-  const currentMarginTopString = window.getComputedStyle(child).marginTop;
-  const currentMarginTop = Number(currentMarginTopString.replace("px", ""));
-
-  const previewElementsTopDistance =
-    currentToEditorDistance - firstNodeToEditorDistance + marginTop - currentMarginTop;
-
-  return previewElementsTopDistance;
-};
-
-const calcDragButtonTop = (editor: PlateEditor, element: TElement): number => {
-  const child = editor.api.toDOMNode(element)!;
-
-  const currentMarginTopString = window.getComputedStyle(child).marginTop;
-  const currentMarginTop = Number(currentMarginTopString.replace("px", ""));
-
-  return currentMarginTop;
-};

package/src/components/editor/ui/block-list-static.tsx

@@ -1,75 +0,0 @@
-import type * as React from "react";
-
-import type { RenderStaticNodeWrapper, TListElement } from "platejs";
-import type { SlateRenderElementProps } from "platejs/static";
-
-import { isOrderedList } from "@platejs/list";
-import { CheckIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const config: Record<
-  string,
-  {
-    Li: React.FC<SlateRenderElementProps>;
-    Marker: React.FC<SlateRenderElementProps>;
-  }
-> = {
-  todo: {
-    Li: TodoLiStatic,
-    Marker: TodoMarkerStatic,
-  },
-};
-
-export const BlockListStatic: RenderStaticNodeWrapper = (props) => {
-  if (!props.element.listStyleType) return;
-
-  return (props) => <List {...props} />;
-};
-
-function List(props: SlateRenderElementProps) {
-  const { listStart, listStyleType } = props.element as TListElement;
-  const { Li, Marker } = config[listStyleType] ?? {};
-  const List = isOrderedList(props.element) ? "ol" : "ul";
-
-  return (
-    <List className="relative m-0 p-0" style={{ listStyleType }} start={listStart}>
-      {Marker && <Marker {...props} />}
-      {Li ? <Li {...props} /> : <li>{props.children}</li>}
-    </List>
-  );
-}
-
-function TodoMarkerStatic(props: SlateRenderElementProps) {
-  const checked = props.element.checked as boolean;
-
-  return (
-    <div contentEditable={false}>
-      <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"
-      >
-        <div className={cn("flex items-center justify-center text-current")}>
-          {checked && <CheckIcon className="size-4" />}
-        </div>
-      </button>
-    </div>
-  );
-}
-
-function TodoLiStatic(props: SlateRenderElementProps) {
-  return (
-    <li
-      className={cn(
-        "list-none",
-        (props.element.checked as boolean) && "text-muted-foreground line-through",
-      )}
-    >
-      {props.children}
-    </li>
-  );
-}

package/src/components/editor/ui/block-list.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import type React from "react";
-
-import type { TListElement } from "platejs";
-
-import { isOrderedList } from "@platejs/list";
-import { useTodoListElement, useTodoListElementState } from "@platejs/list/react";
-import { type PlateElementProps, type RenderNodeWrapper, useReadOnly } from "platejs/react";
-
-import { Checkbox } from "@/components/ui/checkbox";
-import { cn } from "@/lib/utils";
-
-const config: Record<
-  string,
-  {
-    Li: React.FC<PlateElementProps>;
-    Marker: React.FC<PlateElementProps>;
-  }
-> = {
-  todo: {
-    Li: TodoLi,
-    Marker: TodoMarker,
-  },
-};
-
-export const BlockList: RenderNodeWrapper = (props) => {
-  if (!props.element.listStyleType) return;
-
-  return (props) => <List {...props} />;
-};
-
-function List(props: PlateElementProps) {
-  const { listStart, listStyleType } = props.element as TListElement;
-  const { Li, Marker } = config[listStyleType] ?? {};
-  const List = isOrderedList(props.element) ? "ol" : "ul";
-
-  return (
-    <List className="relative m-0 p-0" style={{ listStyleType }} start={listStart}>
-      {Marker && <Marker {...props} />}
-      {Li ? <Li {...props} /> : <li>{props.children}</li>}
-    </List>
-  );
-}
-
-function TodoMarker(props: PlateElementProps) {
-  const state = useTodoListElementState({ element: props.element });
-  const { checkboxProps } = useTodoListElement(state);
-  const readOnly = useReadOnly();
-
-  return (
-    <div contentEditable={false}>
-      <Checkbox
-        className={cn("-left-6 absolute top-1", readOnly && "pointer-events-none")}
-        {...checkboxProps}
-      />
-    </div>
-  );
-}
-
-function TodoLi(props: PlateElementProps) {
-  return (
-    <li
-      className={cn(
-        "list-none",
-        (props.element.checked as boolean) && "text-muted-foreground line-through",
-      )}
-    >
-      {props.children}
-    </li>
-  );
-}

package/src/components/editor/ui/block-selection.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { DndPlugin } from "@platejs/dnd";
-import { useBlockSelected } from "@platejs/selection/react";
-import { cva } from "class-variance-authority";
-import { type PlateElementProps, usePluginOption } from "platejs/react";
-
-export const blockSelectionVariants = cva(
-  "pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity",
-  {
-    defaultVariants: {
-      active: true,
-    },
-    variants: {
-      active: {
-        false: "opacity-0",
-        true: "opacity-100",
-      },
-    },
-  },
-);
-
-export function BlockSelection(props: PlateElementProps) {
-  const isBlockSelected = useBlockSelected();
-  const isDragging = usePluginOption(DndPlugin, "isDragging");
-
-  if (!isBlockSelected || props.plugin.key === "tr" || props.plugin.key === "table") return null;
-
-  return (
-    <div
-      className={blockSelectionVariants({
-        active: isBlockSelected && !isDragging,
-      })}
-      data-slot="block-selection"
-    />
-  );
-}