@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState } from 'react';
+
+import * as React 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

@@ -0,0 +1,15 @@
+
+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

@@ -0,0 +1,33 @@
+'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

@@ -0,0 +1,30 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React 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

@@ -0,0 +1,149 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import * as React 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

@@ -0,0 +1,179 @@
+'use client';
+
+import { useState, type ComponentProps } from 'react';
+
+import * as React 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

@@ -0,0 +1,36 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React 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

@@ -0,0 +1,21 @@
+
+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

@@ -0,0 +1,32 @@
+'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

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