@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/column-node.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { type TColumnElement } from 'platejs';
+
+import { PlateElement, type PlateElementProps } from 'platejs/react';
+
+export function ColumnElement(props: PlateElementProps<TColumnElement>) {
+  const { width } = props.element;
+
+  return (
+    <PlateElement
+      className="border border-transparent p-1.5"
+      style={{ width: width ?? '100%' }}
+      {...props} />
+  );
+}
+
+export function ColumnGroupElement(props: PlateElementProps) {
+  return (
+    <PlateElement className="my-2" {...props}>
+      <div className="flex size-full gap-4 rounded">{props.children}</div>
+    </PlateElement>
+  );
+}

package/src/internal/plate-editor/plate-ui/command.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import {
+  Dialog, DialogContent, type DialogProps, DialogTitle
+} from './dialog';
+import { inputVariants } from './input';
+
+const commandVariants = cva(
+  'flex size-full flex-col rounded-md bg-popover text-popover-foreground focus-visible:outline-hidden',
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      variant: {
+        combobox: 'overflow-visible bg-transparent has-data-readonly:w-fit',
+        default: 'overflow-hidden'
+      }
+    }
+  }
+);
+
+function Command({
+  className,
+  variant,
+  ...props
+}: ComponentProps<typeof CommandPrimitive>
+  & VariantProps<typeof commandVariants>) {
+  return (
+    <CommandPrimitive
+      className={cn(commandVariants({ variant }), className)}
+      data-slot="command"
+      {...props} />
+  );
+}
+
+function CommandDialog({
+  children,
+  className,
+  ...props
+}: DialogProps & { className?: string }) {
+  return (
+    <Dialog {...props}>
+      <DialogContent
+        className="overflow-hidden p-0 shadow-lg"
+        hideClose
+        size="4xl">
+        <DialogTitle className="sr-only">Search</DialogTitle>
+
+        <Command
+          className={cn(
+            '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5',
+            className
+          )}>
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  variant,
+  wrapClassName,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Input>
+  & VariantProps<typeof inputVariants> & {
+    wrapClassName?: string;
+  }) {
+  return (
+    <div
+      className={cn('mt-2 flex w-full items-center px-3 py-1.5', wrapClassName)}
+      cmdk-input-wrapper=""
+      data-slot="command-input-wrapper">
+      <CommandPrimitive.Input
+        className={cn(inputVariants({ variant }), className)}
+        data-slot="command-input"
+        {...props} />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      className={cn(
+        'max-h-[500px] overflow-y-auto overflow-x-hidden py-1.5',
+        className
+      )}
+      data-slot="command-list"
+      {...props} />
+  );
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      className={cn('py-6 text-center text-sm', className)}
+      data-slot="command-empty"
+      {...props} />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={cn(
+        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',
+        className
+      )}
+      data-slot="command-group"
+      {...props} />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      className={cn('-mx-1 h-px bg-border', className)}
+      data-slot="command-separator"
+      {...props} />
+  );
+}
+
+export const commandItemVariants = cva(
+  'relative mx-1 flex h-[28px] cursor-default select-none items-center rounded-sm px-2 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
+  {
+    defaultVariants: {
+      variant: 'default'
+    },
+    variants: {
+      variant: {
+        default: '',
+        menuItem: cn(
+          'w-[calc(100%-8px)] min-w-56 px-2.5',
+          'no-focus-ring cursor-pointer text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground'
+        )
+      }
+    }
+  }
+);
+
+function CommandItem({
+  className,
+  variant,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Item>
+  & VariantProps<typeof commandItemVariants>) {
+  return (
+    <CommandPrimitive.Item
+      className={cn(commandItemVariants({ variant }), className)}
+      data-slot="command-item"
+      {...props} />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-muted-foreground text-xs tracking-widest',
+        className
+      )}
+      data-slot="command-shortcut"
+      {...props} />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+};

package/src/internal/plate-editor/plate-ui/comment-node-static.tsx

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

package/src/internal/plate-editor/plate-ui/comment-node.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { type TCommentText } from 'platejs';
+
+import { getCommentCount } from '@platejs/comment';
+import {
+  PlateLeaf,
+  type PlateLeafProps,
+  useEditorPlugin,
+  usePluginOption
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { commentPlugin } from '../editor/plugins/comment-kit';
+
+export function CommentLeaf(props: PlateLeafProps<TCommentText>) {
+  const { api, setOption } = useEditorPlugin(commentPlugin);
+  const hoverId = usePluginOption(commentPlugin, 'hoverId');
+  const activeId = usePluginOption(commentPlugin, 'activeId');
+
+  const isOverlapping = getCommentCount(props.leaf) > 1;
+  const currentId = api.comment.nodeId(props.leaf);
+  const isActive = activeId === currentId;
+  const isHover = hoverId === currentId;
+
+  return (
+    <PlateLeaf
+      {...props}
+      attributes={{
+        ...props.attributes,
+        onClick: () => setOption('activeId', currentId ?? null),
+        onMouseEnter: () => setOption('hoverId', currentId ?? null),
+        onMouseLeave: () => setOption('hoverId', null)
+      }}
+      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'
+      )} />
+  );
+}

package/src/internal/plate-editor/plate-ui/comment-toolbar-button.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { MessageSquareTextIcon } from 'lucide-react';
+import { useEditorRef } from 'platejs/react';
+
+import { ToolbarButton } from './toolbar';
+
+import { commentPlugin } from '../editor/plugins/comment-kit';
+
+export function CommentToolbarButton() {
+  const editor = useEditorRef();
+
+  return (
+    <ToolbarButton
+      data-plate-prevent-overlay
+      onClick={() => {
+        editor.getTransforms(commentPlugin).comment.setDraft();
+      }}
+      tooltip="Comment (⌘+Shift+M)">
+      <MessageSquareTextIcon className="mr-1" />
+      <span className="hidden sm:inline">Comment</span>
+    </ToolbarButton>
+  );
+}