@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

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

@@ -1,557 +0,0 @@
-'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 NodeEntry,
-  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 }) as NodeEntry<TElement>[];
-
-          let selectionNodes: NodeEntry<TElement>[]
-            = blockSelection.length > 0 ? blockSelection : editor.api.blocks({ mode: 'highest' }) as NodeEntry<TElement>[];
-
-          if (!selectionNodes.some((entry: NodeEntry<TElement>) => entry[0].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 }) as NodeEntry<TElement>[];
-
-          let selectedBlocks: NodeEntry<TElement>[]
-            = blockSelection.length > 0 ? blockSelection : editor.api.blocks({ mode: 'highest' }) as NodeEntry<TElement>[];
-
-          if (!selectedBlocks.some((entry: NodeEntry<TElement>) => entry[0].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

@@ -1,77 +0,0 @@
-import { type FC } 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

@@ -1,85 +0,0 @@
-'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>
-  );
-}