doclific 0.2.0 → 0.2.2

package/frontend/src/components/ui/column-node.tsx

@@ -1,317 +0,0 @@
-import React from 'react';
-
-import type { TColumnElement } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-
-import { useDraggable, useDropLine } from '@platejs/dnd';
-import { setColumns } from '@platejs/layout';
-import { ResizableProvider } from '@platejs/resizable';
-import { BlockSelectionPlugin } from '@platejs/selection/react';
-import { useComposedRef } from '@udecode/cn';
-import { type LucideProps, Trash2Icon } from 'lucide-react';
-import { GripHorizontal } from 'lucide-react';
-import { PathApi } from 'platejs';
-import {
-  PlateElement,
-  useEditorRef,
-  useEditorSelector,
-  useElement,
-  useFocusedLast,
-  usePluginOption,
-  useReadOnly,
-  useRemoveNodeButton,
-  useSelected,
-  withHOC,
-} from 'platejs/react';
-
-import { Button } from '@/components/ui/button';
-import {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-} from '@/components/ui/popover';
-import { Separator } from '@/components/ui/separator';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
-
-export const ColumnElement = withHOC(
-  ResizableProvider,
-  function ColumnElement(props: PlateElementProps<TColumnElement>) {
-    const { width } = props.element;
-    const readOnly = useReadOnly();
-    const isSelectionAreaVisible = usePluginOption(
-      BlockSelectionPlugin,
-      'isSelectionAreaVisible'
-    );
-
-    const { isDragging, previewRef, handleRef } = useDraggable({
-      element: props.element,
-      orientation: 'horizontal',
-      type: 'column',
-      canDropNode: ({ dragEntry, dropEntry }) =>
-        PathApi.equals(
-          PathApi.parent(dragEntry[1]),
-          PathApi.parent(dropEntry[1])
-        ),
-    });
-
-    return (
-      <div className="group/column relative" style={{ width: width ?? '100%' }}>
-        {!readOnly && !isSelectionAreaVisible && (
-          <div
-            ref={handleRef}
-            className={cn(
-              '-translate-x-1/2 -translate-y-1/2 absolute top-2 left-1/2 z-50',
-              'pointer-events-auto flex items-center',
-              'opacity-0 transition-opacity group-hover/column:opacity-100'
-            )}
-          >
-            <ColumnDragHandle />
-          </div>
-        )}
-
-        <PlateElement
-          {...props}
-          ref={useComposedRef(props.ref, previewRef)}
-          className="h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0"
-        >
-          <div
-            className={cn(
-              'relative h-full border border-transparent p-1.5',
-              !readOnly && 'rounded-lg border-border border-dashed',
-              isDragging && 'opacity-50'
-            )}
-          >
-            {props.children}
-
-            {!readOnly && !isSelectionAreaVisible && <DropLine />}
-          </div>
-        </PlateElement>
-      </div>
-    );
-  }
-);
-
-const ColumnDragHandle = React.memo(function ColumnDragHandle() {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" className="!px-1 h-5">
-            <GripHorizontal
-              className="text-muted-foreground"
-              onClick={(event) => {
-                event.stopPropagation();
-                event.preventDefault();
-              }}
-            />
-          </Button>
-        </TooltipTrigger>
-
-        <TooltipContent>Drag to move column</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-});
-
-function DropLine() {
-  const { dropLine } = useDropLine({ orientation: 'horizontal' });
-
-  if (!dropLine) return null;
-
-  return (
-    <div
-      className={cn(
-        'slate-dropLine',
-        'absolute bg-brand/50',
-        dropLine === 'left' &&
-        'group-first/column:-left-1 inset-y-0 left-[-10.5px] w-1',
-        dropLine === 'right' &&
-        'group-last/column:-right-1 inset-y-0 right-[-11px] w-1'
-      )}
-    />
-  );
-}
-
-export function ColumnGroupElement(props: PlateElementProps) {
-  return (
-    <PlateElement className="mb-2" {...props}>
-      <ColumnFloatingToolbar>
-        <div className="flex size-full rounded">{props.children}</div>
-      </ColumnFloatingToolbar>
-    </PlateElement>
-  );
-}
-
-function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {
-  const editor = useEditorRef();
-  const readOnly = useReadOnly();
-  const element = useElement<TColumnElement>();
-  const { props: buttonProps } = useRemoveNodeButton({ element });
-  const selected = useSelected();
-  const isCollapsed = useEditorSelector(
-    (editor) => editor.api.isCollapsed(),
-    []
-  );
-  const isFocusedLast = useFocusedLast();
-
-  const open = isFocusedLast && !readOnly && selected && isCollapsed;
-
-  const onColumnChange = (widths: string[]) => {
-    setColumns(editor, {
-      at: element,
-      widths,
-    });
-  };
-
-  return (
-    <Popover open={open} modal={false}>
-      <PopoverAnchor>{children}</PopoverAnchor>
-      <PopoverContent
-        className="w-auto p-1"
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        align="center"
-        side="top"
-        sideOffset={10}
-      >
-        <div className="box-content flex h-8 items-center">
-          <Button
-            variant="ghost"
-            className="size-8"
-            onClick={() => onColumnChange(['50%', '50%'])}
-          >
-            <DoubleColumnOutlined />
-          </Button>
-          <Button
-            variant="ghost"
-            className="size-8"
-            onClick={() => onColumnChange(['33%', '33%', '33%'])}
-          >
-            <ThreeColumnOutlined />
-          </Button>
-          <Button
-            variant="ghost"
-            className="size-8"
-            onClick={() => onColumnChange(['70%', '30%'])}
-          >
-            <RightSideDoubleColumnOutlined />
-          </Button>
-          <Button
-            variant="ghost"
-            className="size-8"
-            onClick={() => onColumnChange(['30%', '70%'])}
-          >
-            <LeftSideDoubleColumnOutlined />
-          </Button>
-          <Button
-            variant="ghost"
-            className="size-8"
-            onClick={() => onColumnChange(['25%', '50%', '25%'])}
-          >
-            <DoubleSideDoubleColumnOutlined />
-          </Button>
-
-          <Separator orientation="vertical" className="mx-1 h-6" />
-          <Button variant="ghost" className="size-8" {...buttonProps}>
-            <Trash2Icon />
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-const DoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const ThreeColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const RightSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const LeftSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);
-
-const DoubleSideDoubleColumnOutlined = (props: LucideProps) => (
-  <svg
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      clipRule="evenodd"
-      d="M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);

package/frontend/src/components/ui/command.tsx

@@ -1,182 +0,0 @@
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

package/frontend/src/components/ui/comment-node-static.tsx

@@ -1,15 +0,0 @@
-import type { TCommentText } from 'platejs';
-import type { SlateLeafProps } from 'platejs/static';
-
-import { SlateLeaf } from 'platejs/static';
-
-export function CommentLeafStatic(props: SlateLeafProps<TCommentText>) {
-  return (
-    <SlateLeaf
-      {...props}
-      className="border-b-2 border-b-highlight/35 bg-highlight/15"
-    >
-      {props.children}
-    </SlateLeaf>
-  );
-}

package/frontend/src/components/ui/comment-node.tsx

@@ -1,45 +0,0 @@
-
-
-import type { TCommentText } from 'platejs';
-import type { PlateLeafProps } from 'platejs/react';
-
-import { getCommentCount } from '@platejs/comment';
-import { PlateLeaf, useEditorPlugin, usePluginOption } from 'platejs/react';
-
-import { cn } from '@/lib/utils';
-import { commentPlugin } from '@/components/editor/plugins/comment-kit';
-
-export function CommentLeaf(props: PlateLeafProps<TCommentText>) {
-  const { children, leaf } = props;
-
-  const { api, setOption } = useEditorPlugin(commentPlugin);
-  const hoverId = usePluginOption(commentPlugin, 'hoverId');
-  const activeId = usePluginOption(commentPlugin, 'activeId');
-
-  const isOverlapping = getCommentCount(leaf) > 1;
-  const currentId = api.comment.nodeId(leaf);
-  const isActive = activeId === currentId;
-  const isHover = hoverId === currentId;
-
-  return (
-    <PlateLeaf
-      {...props}
-      className={cn(
-        'border-b-2 border-b-highlight/[.36] bg-highlight/[.13] transition-colors duration-200',
-        (isHover || isActive) && 'border-b-highlight bg-highlight/25',
-        isOverlapping && 'border-b-2 border-b-highlight/[.7] bg-highlight/25',
-        (isHover || isActive) &&
-        isOverlapping &&
-        'border-b-highlight bg-highlight/45'
-      )}
-      attributes={{
-        ...props.attributes,
-        onClick: () => setOption('activeId', currentId ?? null),
-        onMouseEnter: () => setOption('hoverId', currentId ?? null),
-        onMouseLeave: () => setOption('hoverId', null),
-      }}
-    >
-      {children}
-    </PlateLeaf>
-  );
-}

package/frontend/src/components/ui/comment-toolbar-button.tsx

@@ -1,24 +0,0 @@
-
-
-import { MessageSquareTextIcon } from 'lucide-react';
-import { useEditorRef } from 'platejs/react';
-
-import { commentPlugin } from '@/components/editor/plugins/comment-kit';
-
-import { ToolbarButton } from './toolbar';
-
-export function CommentToolbarButton() {
-  const editor = useEditorRef();
-
-  return (
-    <ToolbarButton
-      onClick={() => {
-        editor.getTransforms(commentPlugin).comment.setDraft();
-      }}
-      data-plate-prevent-overlay
-      tooltip="Comment"
-    >
-      <MessageSquareTextIcon />
-    </ToolbarButton>
-  );
-}