@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/block-draggable.tsx

@@ -0,0 +1,556 @@
+'use client';
+
+import {
+  memo, useCallback, useEffect, useMemo, useState, type ComponentProps, type RefObject
+} from 'react';
+
+import { DndPlugin, useDraggable, useDropLine } from '@platejs/dnd';
+import { expandListItemsWithChildren } from '@platejs/list';
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import { GripVertical, PlusIcon } from 'lucide-react';
+import {
+  getPluginByType,
+  isType,
+  KEYS,
+  type Path,
+  PathApi,
+  type TElement
+} from 'platejs';
+import {
+  MemoizedChildren,
+  type PlateEditor,
+  type PlateElementProps,
+  type RenderNodeWrapper,
+  useEditorRef,
+  useElement,
+  usePluginOption,
+  useSelected
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { BlockMenu } from './block-menu';
+import { Button } from './button';
+
+const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
+
+export const BlockDraggable: RenderNodeWrapper = (props) => {
+  const { editor, element, path } = props;
+
+  const enabled = 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 renderProps => <Draggable {...renderProps} />;
+};
+
+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 };
+
+        if (blockSelectionApi) {
+          blockSelectionApi.add(id);
+        }
+
+        resetPreview();
+      }
+    });
+
+  const isInColumn = path.length === 3;
+  const isInTable = path.length === 4;
+
+  const [previewTop, setPreviewTop] = useState(0);
+
+  const resetPreview = useCallback(() => {
+    if (previewRef.current) {
+      previewRef.current.replaceChildren();
+      previewRef.current?.classList.add('hidden');
+    }
+  }, [previewRef]);
+
+  useEffect(() => {
+    if (!isDragging) {
+      resetPreview();
+    }
+  }, [isDragging, resetPreview]);
+
+  useEffect(() => {
+    if (isAboutToDrag) {
+      previewRef.current?.classList.remove('opacity-0');
+    }
+  }, [isAboutToDrag, previewRef]);
+
+  const [dragButtonTop, setDragButtonTop] = 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',
+              isInTable && 'mt-1 size-4'
+            )}>
+            <div
+              className={cn(
+                'slate-blockToolbar relative w-13',
+                'pointer-events-auto mr-1 flex items-center',
+                isInColumn && 'mr-1.5'
+              )}>
+              <Button
+                className="absolute right-0 h-6 w-6 p-0"
+                data-plate-prevent-deselect
+                ref={handleRef}
+                style={{ top: `${dragButtonTop + 3}px` }}
+                tooltip={
+                  <div className="text-center">
+                    Drag <span className="text-gray-400">to move</span>
+                    <br />
+                    Click <span className="text-gray-400">to open menu</span>
+                  </div>
+                }
+                tooltipContentProps={{
+                  side: 'bottom'
+                }}
+                variant="ghost">
+                <DragHandle
+                  isDragging={isDragging}
+                  previewRef={previewRef}
+                  resetPreview={resetPreview}
+                  setPreviewTop={setPreviewTop} />
+              </Button>
+
+              {!isInColumn && !isInTable && (
+                <div
+                  className="absolute left-0 h-6"
+                  style={{ top: `${dragButtonTop + 3}px` }}>
+                  <DraggableInsertHandle />
+                </div>
+              )}
+            </div>
+          </div>
+        </Gutter>
+      )}
+
+      <div
+        className={cn('-left-0 absolute hidden w-full')}
+        contentEditable={false}
+        ref={previewRef}
+        style={{ top: `${-previewTop}px` }} />
+
+      <div
+        className="slate-blockWrapper my-px flow-root"
+        onContextMenu={event => editor
+          .getApi(BlockSelectionPlugin)
+          .blockSelection.addOnContextMenu({ element, event })}
+        ref={nodeRef}>
+        <MemoizedChildren>{children}</MemoizedChildren>
+        <DropLine />
+      </div>
+    </div>
+  );
+}
+
+function Gutter({
+  children,
+  className,
+  ...props
+}: 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-50 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 = memo(({
+  isDragging,
+  previewRef,
+  resetPreview,
+  setPreviewTop
+}: {
+  isDragging: boolean;
+  previewRef: RefObject<HTMLDivElement | null>;
+  resetPreview: () => void;
+  setPreviewTop: (top: number) => void;
+}) => {
+  const editor = useEditorRef();
+  const element = useElement();
+
+  return (
+    <BlockMenu animateZoom id={element.id as string} placement="left">
+      <div
+        className="flex size-full items-center justify-center"
+        data-plate-prevent-deselect
+        onMouseDown={(e) => {
+          resetPreview();
+
+          if (e.button !== 0 || 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.add(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 (!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 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();
+        }}
+        role="button">
+        <GripVertical className="text-muted-foreground" />
+      </div>
+    </BlockMenu>
+  );
+});
+
+const DropLineComponent = memo(({
+  className,
+  ...props
+}: 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
+      )} />
+  );
+});
+
+// Re-export for internal use
+const DropLine = DropLineComponent;
+
+const DraggableInsertHandle = () => {
+  const editor = useEditorRef();
+  const element = useElement();
+
+  return (
+    <Button
+      className="size-6 shrink-0 p-1"
+      onClick={(event) => {
+        event.stopPropagation();
+        event.preventDefault();
+
+        const at = editor.api.findPath(element);
+
+        triggerComboboxNextBlock(editor, '/', at, event.altKey);
+      }}
+      onMouseDown={() => {
+        editor.tf.focus();
+        editor.getApi(BlockSelectionPlugin).blockSelection.clear();
+      }}
+      tabIndex={-1}
+      tooltip={
+        <div className="text-center">
+          Click <span className="text-gray-400">to add below</span>
+          <br />
+          Option-click <span className="text-gray-400">to add above</span>
+        </div>
+      }
+      tooltipContentProps={{
+        side: 'bottom'
+      }}
+      variant="ghost">
+      <PlusIcon className="size-6 text-muted-foreground/70" />
+    </Button>
+  );
+};
+
+const triggerComboboxNextBlock = (
+  editor: PlateEditor,
+  triggerText: string,
+  at?: Path,
+  insertAbove = false
+) => {
+  let _at: Path | undefined;
+
+  if (at) {
+    const slicedPath = at.slice(0, 1);
+
+    _at = insertAbove ? slicedPath : PathApi.next(slicedPath);
+  }
+
+  editor.tf.insertNodes(editor.api.create.block(), {
+    at: _at,
+    select: true
+  });
+  editor.tf.insertText(triggerText);
+};
+
+const createDragPreviewElements = (
+  editor: PlateEditor,
+  blocks: TElement[]
+): HTMLElement[] => {
+  const elements: HTMLElement[] = [];
+  const ids: string[] = [];
+
+  const removeDataAttributes = (el: HTMLElement) => {
+    Array.from(el.attributes).forEach((attr) => {
+      if (
+        attr.name.startsWith('data-slate')
+        || attr.name.startsWith('data-block-id')
+      ) {
+        el.removeAttribute(attr.name);
+      }
+    });
+
+    Array.from(el.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;
+
+    const applyScrollCompensation = (
+      original: Element,
+      cloned: HTMLElement
+    ) => {
+      const { scrollLeft } = original;
+
+      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 as string);
+    const wrapper = document.createElement('div');
+
+    wrapper.append(newDomNode);
+    wrapper.style.display = 'flow-root';
+
+    const lastDomNode = blocks[index - 1];
+
+    if (lastDomNode) {
+      const lastDomNodeRect = editor.api
+        .toDOMNode(lastDomNode)!
+        .parentElement!.getBoundingClientRect();
+
+      const domNodeRect = domNode.parentElement!.getBoundingClientRect();
+
+      const distance = domNodeRect.top - lastDomNodeRect.bottom;
+
+      if (distance > 15) {
+        wrapper.style.marginTop = `${distance}px`;
+      } else {
+        wrapper.style.marginTop = '1px';
+      }
+    }
+
+    removeDataAttributes(newDomNode);
+    elements.push(wrapper);
+  };
+
+  for (let index = 0; index < blocks.length; index++) {
+    resolveElement(blocks[index], 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)!;
+  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', ''));
+
+  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/internal/plate-editor/plate-ui/block-list-static.tsx

@@ -0,0 +1,78 @@
+import { type FC } from 'react';
+import * as React from 'react';
+
+import { type RenderStaticNodeWrapper, type TListElement } from 'platejs';
+
+import { isOrderedList } from '@platejs/list';
+import { CheckIcon } from 'lucide-react';
+import { type SlateRenderElementProps } from 'platejs/static';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+const config: Record<
+  string,
+  {
+    Li: FC<SlateRenderElementProps>;
+    Marker: 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"
+      start={listStart}
+      style={{ listStyleType }}>
+      {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/internal/plate-editor/plate-ui/block-list.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { type FC } 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 { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { Checkbox } from './checkbox';
+
+const config: Record<
+  string,
+  {
+    Li: FC<PlateElementProps>;
+    Marker: 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 ListTag = isOrderedList(props.element) ? 'ol' : 'ul';
+
+  return (
+    <ListTag
+      className="relative m-0 p-0"
+      start={listStart}
+      style={{ listStyleType }}>
+      {Marker && <Marker {...props} />}
+      {Li ? <Li {...props} /> : <li>{props.children}</li>}
+    </ListTag>
+  );
+}
+
+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>
+  );
+}