@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,469 @@
+'use client';
+
+import { Fragment, useMemo, useState } from 'react';
+
+import * as React from 'react';
+
+import {
+  type TResolvedSuggestion,
+  acceptSuggestion,
+  getSuggestionKey,
+  keyId2SuggestionId,
+  rejectSuggestion
+} from '@platejs/suggestion';
+
+import { SuggestionPlugin } from '@platejs/suggestion/react';
+import { CheckIcon, XIcon } from 'lucide-react';
+import {
+  type NodeEntry,
+  type Path,
+  type TElement,
+  type TSuggestionText,
+  ElementApi,
+  KEYS,
+  PathApi,
+  TextApi
+} from 'platejs';
+import { useEditorPlugin, usePluginOption } from 'platejs/react';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@docyrus/ui-pro-shared/avatar';
+
+import { Button } from './button';
+
+import {
+  Comment,
+  CommentCreateForm,
+  formatCommentDate,
+  type TComment
+} from './comment';
+
+import {
+  discussionPlugin,
+  type TDiscussion
+} from '../editor/plugins/discussion-kit';
+import { suggestionPlugin } from '../editor/plugins/suggestion-kit';
+
+export interface ResolvedSuggestion extends TResolvedSuggestion {
+  comments: TComment[];
+}
+
+export const BLOCK_SUGGESTION = '__block__';
+
+export const TYPE_TEXT_MAP: Record<string, (node?: TElement) => string> = {
+  [KEYS.audio]: () => 'Audio',
+  [KEYS.blockquote]: () => 'Blockquote',
+  [KEYS.callout]: () => 'Callout',
+  [KEYS.codeBlock]: () => 'Code Block',
+  [KEYS.column]: () => 'Column',
+  [KEYS.equation]: () => 'Equation',
+  [KEYS.file]: () => 'File',
+  [KEYS.h1]: () => 'Heading 1',
+  [KEYS.h2]: () => 'Heading 2',
+  [KEYS.h3]: () => 'Heading 3',
+  [KEYS.h4]: () => 'Heading 4',
+  [KEYS.h5]: () => 'Heading 5',
+  [KEYS.h6]: () => 'Heading 6',
+  [KEYS.hr]: () => 'Horizontal Rule',
+  [KEYS.img]: () => 'Image',
+  [KEYS.mediaEmbed]: () => 'Media',
+  [KEYS.p]: (node) => {
+    if (node?.[KEYS.listType] === KEYS.listTodo) return 'Todo List';
+    if (node?.[KEYS.listType] === KEYS.ol) return 'Ordered List';
+    if (node?.[KEYS.listType] === KEYS.ul) return 'List';
+
+    return 'Paragraph';
+  },
+  [KEYS.table]: () => 'Table',
+  [KEYS.toc]: () => 'Table of Contents',
+  [KEYS.toggle]: () => 'Toggle',
+  [KEYS.video]: () => 'Video'
+};
+
+export function BlockSuggestionCard({
+  idx,
+  isLast,
+  suggestion
+}: {
+  idx: number;
+  isLast: boolean;
+  suggestion: ResolvedSuggestion;
+}) {
+  const { api, editor } = useEditorPlugin(SuggestionPlugin);
+
+  const userInfo = usePluginOption(discussionPlugin, 'user', suggestion.userId);
+
+  const accept = (suggestion: ResolvedSuggestion) => {
+    api.suggestion.withoutSuggestions(() => {
+      acceptSuggestion(editor, suggestion);
+    });
+  };
+
+  const reject = (suggestion: ResolvedSuggestion) => {
+    api.suggestion.withoutSuggestions(() => {
+      rejectSuggestion(editor, suggestion);
+    });
+  };
+
+  const [hovering, setHovering] = useState(false);
+
+  const suggestionText2Array = (text: string) => {
+    if (text === BLOCK_SUGGESTION) return ['line breaks'];
+
+    return text.split(BLOCK_SUGGESTION).filter(Boolean);
+  };
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  return (
+    <div
+      key={`${suggestion.suggestionId}-${idx}`}
+      className="relative"
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}>
+      <div className="flex flex-col p-4">
+        <div className="relative flex items-center">
+          {/* Replace to your own backend or refer to potion */}
+          <Avatar className="size-5">
+            <AvatarImage alt={userInfo?.name} src={userInfo?.avatarUrl} />
+            <AvatarFallback>{userInfo?.name?.[0]}</AvatarFallback>
+          </Avatar>
+          <h4 className="mx-2 font-semibold text-sm leading-none">
+            {userInfo?.name}
+          </h4>
+          <div className="text-muted-foreground/80 text-xs leading-none">
+            <span className="mr-1">
+              {formatCommentDate(new Date(suggestion.createdAt))}
+            </span>
+          </div>
+        </div>
+
+        <div className="relative mt-1 mb-4 pl-[32px]">
+          <div className="flex flex-col gap-2">
+            {suggestion.type === 'remove'
+              && suggestionText2Array(suggestion.text!).map((text, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <span className="text-muted-foreground text-sm">Delete:</span>
+
+                  <span key={index} className="text-sm">
+                    {text}
+                  </span>
+                </div>
+              ))}
+
+            {suggestion.type === 'insert'
+              && suggestionText2Array(suggestion.newText!).map((text, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <span className="text-muted-foreground text-sm">Add:</span>
+
+                  <span key={index} className="text-sm">
+                    {text || 'line breaks'}
+                  </span>
+                </div>
+              ))}
+
+            {suggestion.type === 'replace' && (
+              <div className="flex flex-col gap-2">
+                {suggestionText2Array(suggestion.newText!).map(
+                  (text, index) => (
+                    <Fragment key={index}>
+                      <div
+                        key={index}
+                        className="flex items-start gap-2 text-brand/80">
+                        <span className="text-sm">with:</span>
+                        <span className="text-sm">{text || 'line breaks'}</span>
+                      </div>
+                    </Fragment>
+                  )
+                )}
+
+                {suggestionText2Array(suggestion.text!).map((text, index) => (
+                  <Fragment key={index}>
+                    <div key={index} className="flex items-start gap-2">
+                      <span className="text-muted-foreground text-sm">
+                        {index === 0 ? 'Replace:' : 'Delete:'}
+                      </span>
+                      <span className="text-sm">{text || 'line breaks'}</span>
+                    </div>
+                  </Fragment>
+                ))}
+              </div>
+            )}
+
+            {suggestion.type === 'update' && (
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground text-sm">
+                  {Object.keys(suggestion.properties).map(key => (
+                    <span key={key}>Un{key}</span>
+                  ))}
+
+                  {Object.keys(suggestion.newProperties).map(key => (
+                    <span key={key}>
+                      {key.charAt(0).toUpperCase() + key.slice(1)}
+                    </span>
+                  ))}
+                </span>
+                <span className="text-sm">{suggestion.newText}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {suggestion.comments.map((comment, index) => (
+          <Comment
+            key={comment.id ?? index}
+            comment={comment}
+            discussionLength={suggestion.comments.length}
+            documentContent="__suggestion__"
+            editingId={editingId}
+            index={index}
+            setEditingId={setEditingId} />
+        ))}
+
+        {hovering && (
+          <div className="absolute top-4 right-4 flex gap-2">
+            <Button
+              variant="ghost"
+              className="size-6 p-1 text-muted-foreground"
+              onClick={() => accept(suggestion)}>
+              <CheckIcon className="size-4" />
+            </Button>
+
+            <Button
+              variant="ghost"
+              className="size-6 p-1 text-muted-foreground"
+              onClick={() => reject(suggestion)}>
+              <XIcon className="size-4" />
+            </Button>
+          </div>
+        )}
+
+        <CommentCreateForm discussionId={suggestion.suggestionId} />
+      </div>
+
+      {!isLast && <div className="h-px w-full bg-muted" />}
+    </div>
+  );
+}
+
+export const useResolveSuggestion = (
+  suggestionNodes: NodeEntry<TElement | TSuggestionText>[],
+  blockPath: Path
+) => {
+  const discussions = usePluginOption(discussionPlugin, 'discussions');
+
+  const {
+    api, editor, getOption, setOption
+  }
+    = useEditorPlugin(suggestionPlugin);
+
+  suggestionNodes.forEach(([node]) => {
+    const id = api.suggestion.nodeId(node);
+    const map = getOption('uniquePathMap');
+
+    if (!id) return;
+
+    const previousPath = map.get(id);
+
+    // If there are no suggestion nodes in the corresponding path in the map, then update it.
+    if (PathApi.isPath(previousPath)) {
+      const nodes = api.suggestion.node({ id, at: previousPath, isText: true });
+      const parentNode = api.node(previousPath);
+      let lineBreakId: string | null = null;
+
+      if (parentNode && ElementApi.isElement(parentNode[0])) {
+        lineBreakId = api.suggestion.nodeId(parentNode[0]) ?? null;
+      }
+
+      if (!nodes && lineBreakId !== id) {
+        setOption('uniquePathMap', new Map(map).set(id, blockPath));
+      }
+    } else {
+      setOption('uniquePathMap', new Map(map).set(id, blockPath));
+    }
+  });
+
+  const resolvedSuggestion: ResolvedSuggestion[] = useMemo(() => {
+    const map = getOption('uniquePathMap');
+
+    if (suggestionNodes.length === 0) return [];
+
+    const suggestionIds = new Set(
+      suggestionNodes
+        .flatMap(([node]) => {
+          if (TextApi.isText(node)) {
+            const dataList = api.suggestion.dataList(node);
+            const includeUpdate = dataList.some(
+              data => data.type === 'update'
+            );
+
+            if (!includeUpdate) {
+              return api.suggestion.nodeId(node) ?? [];
+            }
+
+            return dataList
+              .filter(data => data.type === 'update')
+              .map(d => d.id);
+          }
+          if (ElementApi.isElement(node)) {
+            return api.suggestion.nodeId(node) ?? [];
+          }
+
+          return [];
+        })
+        .filter(Boolean)
+    );
+
+    const res: ResolvedSuggestion[] = [];
+
+    suggestionIds.forEach((id) => {
+      if (!id) return;
+
+      const path = map.get(id);
+
+      if (!path || !PathApi.isPath(path)) return;
+      if (!PathApi.equals(path, blockPath)) return;
+
+      const entries = [
+        ...editor.api.nodes<TElement | TSuggestionText>({
+          at: [],
+          mode: 'all',
+          match: n => (n[KEYS.suggestion] && n[getSuggestionKey(id)])
+            || api.suggestion.nodeId(n as TElement) === id
+        })
+      ];
+
+      // move line break to the end
+      entries.sort(([, path1], [, path2]) => PathApi.isChild(path1, path2) ? -1 : 1);
+
+      let newText = '';
+      let text = '';
+      let properties: any = {};
+      let newProperties: any = {};
+
+      // overlapping suggestion
+      entries.forEach(([node]) => {
+        if (TextApi.isText(node)) {
+          const dataList = api.suggestion.dataList(node);
+
+          dataList.forEach((data) => {
+            if (data.id === id) {
+              switch (data.type) {
+                case 'insert': {
+                  newText += node.text;
+
+                  break;
+                }
+
+                case 'remove': {
+                  text += node.text;
+
+                  break;
+                }
+
+                case 'update': {
+                  properties = {
+                    ...properties,
+                    ...data.properties
+                  };
+
+                  newProperties = {
+                    ...newProperties,
+                    ...data.newProperties
+                  };
+
+                  newText += node.text;
+
+                  break;
+                }
+                // No default
+              }
+            }
+          });
+        } else {
+          const lineBreakData = api.suggestion.isBlockSuggestion(node) ? node.suggestion : undefined;
+
+          if (lineBreakData?.id === keyId2SuggestionId(id)) {
+            if (lineBreakData.type === 'insert') {
+              newText += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+            } else if (lineBreakData.type === 'remove') {
+              text += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+            }
+          }
+        }
+      });
+
+      if (entries.length === 0) return;
+
+      const nodeData = api.suggestion.suggestionData(entries[0][0]);
+
+      if (!nodeData) return;
+
+      // const comments = data?.discussions.find((d) => d.id === id)?.comments;
+      const comments
+        = discussions.find((s: TDiscussion) => s.id === id)?.comments || [];
+      const createdAt = new Date(nodeData.createdAt);
+
+      const keyId = getSuggestionKey(id);
+
+      if (nodeData.type === 'update') {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          newProperties,
+          newText,
+          properties,
+          suggestionId: keyId2SuggestionId(id),
+          type: 'update',
+          userId: nodeData.userId
+        });
+      } else if (newText.length > 0 && text.length > 0) {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          newText,
+          suggestionId: keyId2SuggestionId(id),
+          text,
+          type: 'replace',
+          userId: nodeData.userId
+        });
+      } else if (newText.length > 0) {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          newText,
+          suggestionId: keyId2SuggestionId(id),
+          type: 'insert',
+          userId: nodeData.userId
+        });
+      } else if (text.length > 0) {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          suggestionId: keyId2SuggestionId(id),
+          text,
+          type: 'remove',
+          userId: nodeData.userId
+        });
+      }
+    });
+
+    return res;
+  }, [
+    api.suggestion,
+    blockPath,
+    discussions,
+    editor.api,
+    getOption,
+    suggestionNodes
+  ]);
+
+  return resolvedSuggestion;
+};
+
+export const isResolvedSuggestion = (
+  suggestion: ResolvedSuggestion | TDiscussion
+): suggestion is ResolvedSuggestion => 'suggestionId' in suggestion;

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

@@ -0,0 +1,10 @@
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+export function BlockquoteElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement as="blockquote" className="my-1 px-0.5 py-[3px]" {...props}>
+      <div className="border-primary border-l-[3px] px-4">{props.children}</div>
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,11 @@
+'use client';
+
+import { PlateElement, type PlateElementProps } from 'platejs/react';
+
+export function BlockquoteElement(props: PlateElementProps) {
+  return (
+    <PlateElement as="blockquote" className="my-1 px-0.5 py-[3px]" {...props}>
+      <div className="border-primary border-l-[3px] px-4">{props.children}</div>
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,190 @@
+'use client';
+
+import { type ComponentProps, type ReactNode } from 'react';
+import * as React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { Spinner } from './spinner';
+import { withTooltip } from './tooltip';
+
+const SlotRoot = Slot.Root;
+
+export const buttonVariants = cva(
+  'focus-ring inline-flex w-fit cursor-pointer select-none items-center justify-center gap-2 rounded-md text-sm ring-offset-background transition-bg-ease disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    defaultVariants: {
+      size: 'default',
+      truncate: true,
+      variant: 'default'
+    },
+    variants: {
+      active: {
+        false: '',
+        true: 'border-2 border-primary'
+      },
+      disabled: {
+        true: 'pointer-events-none opacity-50'
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2'
+      },
+      isMenu: {
+        true: 'h-auto w-full cursor-pointer justify-start'
+      },
+      size: {
+        blockAction: 'size-[26px] gap-1 px-1.5 text-xs',
+        default: 'h-[28px] gap-1.5 px-2',
+        icon: 'size-[28px] w-[33px] [&_svg]:size-5',
+        iconSm: 'size-[28px]',
+        lg: 'h-11 px-4 text-lg',
+        md: 'h-8 px-3',
+        menuAction: 'size-6',
+        navAction: 'size-5',
+        none: '',
+        xs: 'h-[26px] px-1.5 py-1 text-xs'
+      },
+      truncate: {
+        true: 'truncate whitespace-nowrap'
+      },
+      variant: {
+        blockAction:
+          'rounded-sm hover:bg-primary/6 [&_svg]:text-muted-foreground',
+        blockActionSecondary:
+          'rounded-sm bg-primary/6 [&_svg]:text-muted-foreground',
+        brand:
+          'bg-brand font-medium text-white hover:bg-brand/80 active:bg-brand-active',
+        default:
+          'bg-primary font-medium text-primary-foreground hover:bg-primary/90 [&_svg]:text-primary-foreground',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 [&_svg]:text-destructive-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost2: 'text-muted-foreground hover:bg-accent',
+        ghost3: 'text-muted-foreground/80 hover:bg-accent',
+        ghostActive: 'bg-accent hover:bg-accent hover:text-accent-foreground',
+        menuAction: 'text-muted-foreground/80 hover:bg-primary/6',
+        nav: 'rounded-sm text-muted-foreground transition hover:bg-primary/4',
+        navAction:
+          'rounded-sm text-muted-foreground/80 opacity-0 transition hover:bg-primary/6 group-hover:opacity-100',
+        none: '',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        primaryOutline:
+          'border border-primary-foreground text-primary-foreground hover:bg-accent/15 [&_svg]:text-primary-foreground',
+        radio: 'border-2 border-input hover:border-primary',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+      }
+    }
+  }
+);
+
+export type ButtonExtendedProps = {
+  active?: boolean;
+  asChild?: boolean;
+  icon?: ReactNode;
+  iconPlacement?: 'left' | 'right';
+  isPending?: boolean;
+  loading?: boolean;
+  loadingClassName?: string;
+  onToggleClick?: () => void;
+} & {
+  children?: ReactNode;
+  label?: string;
+} & VariantProps<typeof buttonVariants>;
+
+export type ButtonProps = ComponentProps<typeof Button>;
+
+export const Button = withTooltip(({
+  active,
+  asChild = false,
+  children,
+  className,
+  focused,
+  icon,
+  iconPlacement = 'left',
+  isMenu,
+  isPending: _isPending,
+  label,
+  loading,
+  loadingClassName,
+  size,
+  truncate,
+  variant,
+  onToggleClick: _onToggleClick,
+  ...props
+}: ButtonExtendedProps & ComponentProps<'button'>) => {
+  const Comp = asChild ? SlotRoot : 'button';
+
+  return (
+    <Comp
+      aria-label={label && label.length > 0 ? label : undefined}
+      className={cn(
+        buttonVariants({
+          disabled: props.disabled,
+          focused,
+          isMenu,
+          size,
+          truncate,
+          variant
+        }),
+        active && 'border-2 border-primary',
+        className
+      )}
+      type={Comp === 'button' ? 'button' : undefined}
+      {...props}>
+      {icon && iconPlacement === 'left' && icon}
+      {loading && <Spinner className={loadingClassName} />}
+      {children}
+      {icon && iconPlacement === 'right' && icon}
+    </Comp>
+  );
+});
+
+export type LinkButtonProps = ComponentProps<typeof LinkButton>;
+
+export const LinkButton = withTooltip(({
+  active,
+  children,
+  className,
+  focused,
+  icon,
+  iconPlacement = 'left',
+  isMenu,
+  label,
+  loading,
+  loadingClassName,
+  size,
+  truncate,
+  variant = 'ghost',
+  ...props
+}: ButtonExtendedProps & ComponentProps<'a'>) => {
+  return (
+    <a
+      aria-label={label && label.length > 0 ? label : undefined}
+      className={cn(
+        buttonVariants({
+          disabled: props.disabled,
+          focused,
+          isMenu,
+          size,
+          truncate,
+          variant
+        }),
+        active && 'border-2 border-primary',
+        className
+      )}
+      role="button"
+      {...props}>
+      {icon && iconPlacement === 'left' && (
+        <div className="shrink-0">{icon}</div>
+      )}
+      {loading && <Spinner className={loadingClassName} />}
+      {children}
+      {icon && iconPlacement === 'right' && icon}
+    </a>
+  );
+});

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

@@ -0,0 +1,3 @@
+'use client';
+
+export { Calendar } from '@docyrus/ui-pro-shared/calendar';