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

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

@@ -1,69 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { LineHeightPlugin } from '@platejs/basic-styles/react';
-import { CheckIcon, WrapText } from 'lucide-react';
-import { useEditorRef, useSelectionFragmentProp } from 'platejs/react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-  type DropdownMenuProps
-} from './dropdown-menu';
-
-import { ToolbarButton } from './toolbar';
-
-export function LineHeightToolbarButton(props: DropdownMenuProps) {
-  const editor = useEditorRef();
-  const {
-    defaultNodeValue,
-    validNodeValues: values = []
-  } = editor.getInjectProps(LineHeightPlugin);
-
-  const value = useSelectionFragmentProp({
-    defaultValue: defaultNodeValue,
-    getProp: node => node.lineHeight
-  });
-
-  const [open, setOpen] = useState(false);
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Line height" isDropdown>
-          <WrapText />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="min-w-0" align="start" portal>
-        <DropdownMenuRadioGroup
-          value={value}
-          onValueChange={(newValue) => {
-            editor
-              .getTransforms(LineHeightPlugin)
-              .lineHeight.setNodes(Number(newValue));
-            editor.tf.focus();
-          }}>
-          {values.map(v => (
-            <DropdownMenuRadioItem
-              key={v}
-              className="min-w-[180px] pl-2 *:first:[span]:hidden"
-              value={v}>
-              <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
-                <DropdownMenuItemIndicator>
-                  <CheckIcon />
-                </DropdownMenuItemIndicator>
-              </span>
-              {v}
-            </DropdownMenuRadioItem>
-          ))}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

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

@@ -1,15 +0,0 @@
-
-import { type TLinkElement } from 'platejs';
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-export function LinkElementStatic(props: SlateElementProps<TLinkElement>) {
-  return (
-    <SlateElement
-      {...props}
-      as="a"
-      className="font-medium text-primary underline decoration-primary underline-offset-4">
-      {props.children}
-    </SlateElement>
-  );
-}

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

@@ -1,33 +0,0 @@
-'use client';
-
-import { useLink } from '@platejs/link/react';
-import { type TLinkElement } from 'platejs';
-import {
-  PlateElement,
-  type PlateElementProps,
-  useElement
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export const mockRecentDocuments: { id: string; title: string; icon?: string }[] = [];
-
-export function LinkElement(props: PlateElementProps) {
-  const element = useElement<TLinkElement>();
-  const { props: linkProps } = useLink({ element });
-
-  return (
-    <PlateElement
-      as="a"
-      {...props}
-      attributes={{
-        ...props.attributes,
-        ...(linkProps as any)
-      }}
-      className={cn(
-        'cursor-pointer border-b-1 font-medium text-primary/65'
-      )}>
-      {props.children}
-    </PlateElement>
-  );
-}

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

@@ -1,28 +0,0 @@
-'use client';
-
-import { type ComponentProps } from 'react';
-
-import {
-  useLinkToolbarButton,
-  useLinkToolbarButtonState
-} from '@platejs/link/react';
-import { Link } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
-
-export function LinkToolbarButton(
-  props: ComponentProps<typeof ToolbarButton>
-) {
-  const state = useLinkToolbarButtonState();
-  const { props: buttonProps } = useLinkToolbarButton(state);
-
-  return (
-    <ToolbarButton
-      {...props}
-      {...buttonProps}
-      data-plate-focus
-      tooltip="Link">
-      <Link />
-    </ToolbarButton>
-  );
-}

package/src/internal/plate-editor/plate-ui/link-toolbar.tsx

@@ -1,147 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-
-import {
-  type UseVirtualFloatingOptions,
-  flip,
-  offset
-} from '@platejs/floating';
-import {
-  FloatingLinkUrlInput,
-  LinkOpenButton,
-  useFloatingLinkEdit,
-  useFloatingLinkEditState,
-  useFloatingLinkInsert,
-  useFloatingLinkInsertState
-} from '@platejs/link/react';
-import { cva } from 'class-variance-authority';
-import {
-  ExternalLink,
-  Link,
-  Text,
-  Unlink
-} from 'lucide-react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { buttonVariants } from './button';
-import { Separator } from './separator';
-
-const popoverVariants = cva(
-  'z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden'
-);
-
-const inputVariants = cva(
-  'flex h-[28px] w-full rounded-md border-none bg-transparent px-1.5 py-1 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-transparent md:text-sm'
-);
-
-export function LinkFloatingToolbar() {
-  const floatingOptions: UseVirtualFloatingOptions = useMemo(
-    () => ({
-      middleware: [
-        offset(8),
-        flip({
-          fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
-          padding: 12
-        })
-      ],
-      placement: 'bottom-start'
-    }),
-    []
-  );
-
-  const insertState = useFloatingLinkInsertState({ floatingOptions });
-  const {
-    hidden,
-    props: insertProps,
-    ref: insertRef,
-    textInputProps
-  } = useFloatingLinkInsert(insertState);
-
-  const editState = useFloatingLinkEditState({ floatingOptions });
-  const {
-    editButtonProps,
-    props: editProps,
-    ref: editRef,
-    unlinkButtonProps
-  } = useFloatingLinkEdit(editState);
-
-  if (hidden) return null;
-
-  const input = (
-    <div className="flex w-[330px] flex-col">
-      <div className="flex items-center">
-        <div className="flex items-center pr-1 pl-2 text-muted-foreground">
-          <Link className="size-4" />
-        </div>
-
-        <FloatingLinkUrlInput
-          className={inputVariants()}
-          data-plate-focus
-          placeholder="Paste link" />
-      </div>
-
-      <Separator className="my-1" />
-
-      <div className="flex items-center">
-        <div className="flex items-center pr-1 pl-2 text-muted-foreground">
-          <Text className="size-4" />
-        </div>
-
-        <input
-          className={inputVariants()}
-          data-plate-focus
-          placeholder="Text to display"
-          {...textInputProps} />
-      </div>
-    </div>
-  );
-
-  const editContent = editState.isEditing ? (
-    input
-  ) : (
-    <div className="box-content flex items-center">
-      <button
-        className={cn(buttonVariants({ size: 'default', variant: 'ghost' }))}
-        type="button"
-        {...editButtonProps}>
-        Edit link
-      </button>
-
-      <Separator orientation="vertical" />
-
-      <LinkOpenButton
-        className={cn(buttonVariants({ size: 'default', variant: 'ghost' }))}>
-        <ExternalLink className="size-4" />
-      </LinkOpenButton>
-
-      <Separator orientation="vertical" />
-
-      <button
-        className={cn(buttonVariants({ size: 'default', variant: 'ghost' }))}
-        type="button"
-        {...unlinkButtonProps}>
-        <Unlink className="size-4" />
-      </button>
-    </div>
-  );
-
-  return (
-    <>
-      <div
-        ref={insertRef}
-        className={popoverVariants()}
-        {...insertProps}>
-        {input}
-      </div>
-
-      <div
-        ref={editRef}
-        className={popoverVariants()}
-        {...editProps}>
-        {editContent}
-      </div>
-    </>
-  );
-}

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

@@ -1,177 +0,0 @@
-'use client';
-
-import { useState, type ComponentProps } from 'react';
-
-import { ListStyleType, someList, toggleList } from '@platejs/list';
-import {
-  useIndentTodoToolBarButton,
-  useIndentTodoToolBarButtonState
-} from '@platejs/list/react';
-import { List, ListOrdered, ListTodoIcon } from 'lucide-react';
-import { useEditorRef, useEditorSelector } from 'platejs/react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuTrigger
-} from './dropdown-menu';
-
-import {
-  ToolbarButton,
-  ToolbarSplitButton,
-  ToolbarSplitButtonPrimary,
-  ToolbarSplitButtonSecondary
-} from './toolbar';
-
-export function BulletedListToolbarButton() {
-  const editor = useEditorRef();
-  const [open, setOpen] = useState(false);
-
-  const pressed = useEditorSelector(
-    editor => editor ? someList(editor, [ListStyleType.Disc, ListStyleType.Circle, ListStyleType.Square]) : false,
-    []
-  );
-
-  return (
-    <ToolbarSplitButton pressed={open}>
-      <ToolbarSplitButtonPrimary
-        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
-        onClick={() => {
-          toggleList(editor, {
-            listStyleType: ListStyleType.Disc
-          });
-        }}
-        data-state={pressed ? 'on' : 'off'}>
-        <List className="size-4" />
-      </ToolbarSplitButtonPrimary>
-
-      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-        <DropdownMenuTrigger asChild>
-          <ToolbarSplitButtonSecondary />
-        </DropdownMenuTrigger>
-
-        <DropdownMenuPortal>
-          <DropdownMenuContent align="start" alignOffset={-32}>
-            <DropdownMenuGroup>
-              <DropdownMenuItem
-                onClick={() => toggleList(editor, {
-                  listStyleType: ListStyleType.Disc
-                })}>
-                <div className="flex items-center gap-2">
-                  <div className="size-2 rounded-full border border-current bg-current" />
-                  Default
-                </div>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => toggleList(editor, {
-                  listStyleType: ListStyleType.Circle
-                })}>
-                <div className="flex items-center gap-2">
-                  <div className="size-2 rounded-full border border-current" />
-                  Circle
-                </div>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => toggleList(editor, {
-                  listStyleType: ListStyleType.Square
-                })}>
-                <div className="flex items-center gap-2">
-                  <div className="size-2 border border-current bg-current" />
-                  Square
-                </div>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenuPortal>
-      </DropdownMenu>
-    </ToolbarSplitButton>
-  );
-}
-
-export function NumberedListToolbarButton() {
-  const editor = useEditorRef();
-  const [open, setOpen] = useState(false);
-
-  const pressed = useEditorSelector(
-    editor => editor ? someList(editor, [
-      ListStyleType.Decimal,
-      ListStyleType.LowerAlpha,
-      ListStyleType.UpperAlpha,
-      ListStyleType.LowerRoman,
-      ListStyleType.UpperRoman
-    ]) : false,
-    []
-  );
-
-  return (
-    <ToolbarSplitButton pressed={open}>
-      <ToolbarSplitButtonPrimary
-        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
-        onClick={() => toggleList(editor, {
-          listStyleType: ListStyleType.Decimal
-        })}
-        data-state={pressed ? 'on' : 'off'}>
-        <ListOrdered className="size-4" />
-      </ToolbarSplitButtonPrimary>
-
-      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-        <DropdownMenuTrigger asChild>
-          <ToolbarSplitButtonSecondary />
-        </DropdownMenuTrigger>
-
-        <DropdownMenuPortal>
-          <DropdownMenuContent align="start" alignOffset={-32}>
-            <DropdownMenuGroup>
-              <DropdownMenuItem
-                onSelect={() => toggleList(editor, {
-                  listStyleType: ListStyleType.Decimal
-                })}>
-                Decimal (1, 2, 3)
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onSelect={() => toggleList(editor, {
-                  listStyleType: ListStyleType.LowerAlpha
-                })}>
-                Lower Alpha (a, b, c)
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onSelect={() => toggleList(editor, {
-                  listStyleType: ListStyleType.UpperAlpha
-                })}>
-                Upper Alpha (A, B, C)
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onSelect={() => toggleList(editor, {
-                  listStyleType: ListStyleType.LowerRoman
-                })}>
-                Lower Roman (i, ii, iii)
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onSelect={() => toggleList(editor, {
-                  listStyleType: ListStyleType.UpperRoman
-                })}>
-                Upper Roman (I, II, III)
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenuPortal>
-      </DropdownMenu>
-    </ToolbarSplitButton>
-  );
-}
-
-export function TodoListToolbarButton(
-  props: ComponentProps<typeof ToolbarButton>
-) {
-  const state = useIndentTodoToolBarButtonState({ nodeType: 'todo' });
-  const { props: buttonProps } = useIndentTodoToolBarButton(state);
-
-  return (
-    <ToolbarButton {...props} {...buttonProps} tooltip="Todo">
-      <ListTodoIcon />
-    </ToolbarButton>
-  );
-}

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

@@ -1,34 +0,0 @@
-'use client';
-
-import { type ComponentProps } from 'react';
-
-import {
-  useEditorRef,
-  useMarkToolbarButton,
-  useMarkToolbarButtonState
-} from 'platejs/react';
-
-import { ToolbarButton } from './toolbar';
-
-export function MarkToolbarButton({
-  clear,
-  nodeType,
-  ...props
-}: ComponentProps<typeof ToolbarButton> & {
-  nodeType: string;
-  clear?: string[] | string;
-}) {
-  const editor = useEditorRef();
-  const state = useMarkToolbarButtonState({ clear, nodeType });
-  const { props: buttonProps } = useMarkToolbarButton(state);
-
-  return (
-    <ToolbarButton
-      {...buttonProps}
-      {...props}
-      onClick={() => {
-        buttonProps.onClick?.();
-        editor.tf.focus();
-      }} />
-  );
-}

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

@@ -1,21 +0,0 @@
-
-import { type TAudioElement } from 'platejs';
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-export function MediaAudioElementStatic(
-  props: SlateElementProps<TAudioElement>
-) {
-  const { url } = props.element;
-
-  return (
-    <SlateElement className="mb-1" {...props}>
-      <figure className="group relative cursor-default">
-        <div className="h-16">
-          <audio className="size-full" controls src={url} />
-        </div>
-      </figure>
-      {props.children}
-    </SlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/media-audio-node.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { useMediaState } from '@platejs/media/react';
-import { ResizableProvider } from '@platejs/resizable';
-import { PlateElement, type PlateElementProps, withHOC } from 'platejs/react';
-
-import { Caption, CaptionTextarea } from './caption';
-
-export const MediaAudioElement = withHOC(
-  ResizableProvider,
-  (props: PlateElementProps) => {
-    const { align = 'center', readOnly, unsafeUrl } = useMediaState();
-
-    return (
-      <PlateElement className="mb-1" {...props}>
-        <figure className="group relative" contentEditable={false}>
-          <div className="h-16">
-            <audio className="size-full" controls src={unsafeUrl} />
-          </div>
-
-          <Caption align={align} style={{ width: '100%' }}>
-            <CaptionTextarea
-              className="h-20"
-              placeholder="Write a caption..."
-              readOnly={readOnly} />
-          </Caption>
-        </figure>
-        {props.children}
-      </PlateElement>
-    );
-  }
-);

package/src/internal/plate-editor/plate-ui/media-embed-node.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { parseVideoUrl } from '@platejs/media';
-import { useMediaState } from '@platejs/media/react';
-import { ResizableProvider, useResizableValue } from '@platejs/resizable';
-import { PlateElement, type PlateElementProps, withHOC } from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { Caption, CaptionTextarea } from './caption';
-import { MediaToolbar } from './media-toolbar';
-import {
-  mediaResizeHandleVariants,
-  Resizable,
-  ResizeHandle
-} from './resize-handle';
-
-export const MediaEmbedElement = withHOC(
-  ResizableProvider,
-  (props: PlateElementProps) => {
-    const {
-      align = 'center',
-      embed,
-      focused,
-      isVideo,
-      isYoutube,
-      selected,
-      unsafeUrl
-    } = useMediaState({
-      urlParsers: [parseVideoUrl]
-    });
-    const width = useResizableValue('width');
-    const provider = embed?.provider;
-
-    return (
-      <PlateElement className="py-2.5" {...props}>
-        <figure className="relative m-0 w-full" contentEditable={false}>
-          <Resizable
-            align={align}
-            options={{
-              align,
-              maxWidth: '100%',
-              minWidth: 100
-            }}>
-            <div className="group/media">
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'left' })}
-                options={{ direction: 'left' }} />
-
-              <ResizeHandle
-                className={mediaResizeHandleVariants({ direction: 'right' })}
-                options={{ direction: 'right' }} />
-
-              {isVideo && !isYoutube && (
-                <div
-                  className={cn(
-                    provider === 'vimeo' && 'pb-[75%]',
-                    provider === 'youku' && 'pb-[56.25%]',
-                    provider === 'dailymotion' && 'pb-[56.0417%]',
-                    provider === 'coub' && 'pb-[51.25%]'
-                  )}>
-                  <iframe
-                    allowFullScreen
-                    className={cn(
-                      'absolute top-0 left-0 aspect-video size-full rounded-sm',
-                      isVideo && 'border-0',
-                      focused && selected && 'ring-2 ring-ring ring-offset-2'
-                    )}
-                    src={embed!.url}
-                    title="embed" />
-                </div>
-              )}
-
-              {!isVideo && unsafeUrl && (
-                <div
-                  className={cn(
-                    'relative pb-[56.25%]'
-                  )}>
-                  <iframe
-                    allowFullScreen
-                    className={cn(
-                      'absolute top-0 left-0 size-full rounded-sm border-0',
-                      focused && selected && 'ring-2 ring-ring ring-offset-2'
-                    )}
-                    src={unsafeUrl}
-                    title="embed" />
-                </div>
-              )}
-
-              <MediaToolbar />
-            </div>
-          </Resizable>
-
-          <Caption align={align} style={{ width }}>
-            <CaptionTextarea placeholder="Write a caption..." />
-          </Caption>
-        </figure>
-
-        {props.children}
-      </PlateElement>
-    );
-  }
-);

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

@@ -1,30 +0,0 @@
-
-import { type TFileElement } from 'platejs';
-
-import { FileUp } from 'lucide-react';
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-export function MediaFileElementStatic(props: SlateElementProps<TFileElement>) {
-  const { name, url } = props.element;
-
-  return (
-    <SlateElement className="my-px rounded-sm" {...props}>
-      <a
-        className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] hover:bg-muted"
-        contentEditable={false}
-        download={name}
-        href={url}
-        rel="noopener noreferrer"
-        role="button"
-        target="_blank">
-        <div className="flex items-center gap-1 p-1">
-          <FileUp className="size-5" />
-          <div>{name}</div>
-        </div>
-      </a>
-
-      {props.children}
-    </SlateElement>
-  );
-}