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

package/src/internal/plate-editor/plate-ui/floating-toolbar-buttons.tsx

@@ -1,129 +0,0 @@
-'use client';
-
-import {
-  Bold,
-  Code2,
-  Italic,
-  type LucideProps,
-  Strikethrough,
-  Underline
-} from 'lucide-react';
-import { KEYS } from 'platejs';
-import {
-  useEditorMounted,
-  useEditorReadOnly,
-  useEditorRef,
-  useSelectionAcrossBlocks
-} from 'platejs/react';
-
-import { AIToolbarButton } from './ai-toolbar-button';
-import { CommentToolbarButton } from './comment-toolbar-button';
-import { InlineEquationToolbarButton } from './equation-toolbar-button';
-import { FontColorToolbarButton } from './font-color-toolbar-button';
-import { LinkToolbarButton } from './link-toolbar-button';
-import { MarkToolbarButton } from './mark-toolbar-button';
-import { MoreToolbarButton } from './more-toolbar-button';
-import { SuggestionToolbarButton } from './suggestion-toolbar-button';
-import { ToolbarGroup } from './toolbar';
-import { TurnIntoToolbarButton } from './turn-into-toolbar-button';
-
-export function FloatingToolbarButtons() {
-  const editor = useEditorRef();
-  const readOnly = useEditorReadOnly();
-  const isMounted = useEditorMounted();
-  const isSelectionAcrossBlocks = useSelectionAcrossBlocks();
-
-  if (!isMounted) return null;
-
-  return (
-    <div
-      className="flex"
-      style={{
-        transform: 'translateX(calc(-1px))',
-        whiteSpace: 'nowrap'
-      }}>
-      {!readOnly && (
-        <>
-          <ToolbarGroup>
-            <AIToolbarButton
-              className="gap-1.5"
-              tooltip="Edit, generate, and more (⌘+J)">
-              <AIIcon className="!size-3" />
-              <div className="hidden bg-[linear-gradient(120deg,#6EB6F2_10%,#a855f7,#ea580c,#eab308)] bg-clip-text text-transparent sm:inline">
-                Ask AI
-              </div>
-            </AIToolbarButton>
-          </ToolbarGroup>
-
-          <ToolbarGroup>
-            {editor.plugins[KEYS.comment] && <CommentToolbarButton />}
-            <SuggestionToolbarButton />
-          </ToolbarGroup>
-          <ToolbarGroup>
-            <TurnIntoToolbarButton />
-
-            <MarkToolbarButton
-              nodeType={KEYS.bold}
-              tooltip="Bold (⌘+B)">
-              <Bold />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton
-              nodeType={KEYS.italic}
-              tooltip="Italic (⌘+I)">
-              <Italic />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton
-              nodeType={KEYS.underline}
-              tooltip="Underline (⌘+U)">
-              <Underline />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton
-              nodeType={KEYS.strikethrough}
-              tooltip="Strikethrough (⌘+⇧+X)">
-              <Strikethrough />
-            </MarkToolbarButton>
-
-            <MarkToolbarButton
-              nodeType={KEYS.code}
-              tooltip="Code (⌘+E)">
-              <Code2 />
-            </MarkToolbarButton>
-
-            <InlineEquationToolbarButton />
-
-            <LinkToolbarButton />
-
-            <FontColorToolbarButton />
-          </ToolbarGroup>
-          <ToolbarGroup>
-            {!isSelectionAcrossBlocks && <MoreToolbarButton />}
-          </ToolbarGroup>
-        </>
-      )}
-    </div>
-  );
-}
-
-function AIIcon(props: LucideProps) {
-  return (
-    <svg
-      fill="url(#myGradient)"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}>
-      <defs>
-        <linearGradient id="myGradient" x1="0%" x2="100%" y1="0%" y2="100%">
-          <stop offset="0%" stopColor="#6EB6F2" />
-          <stop offset="15%" stopColor="#6EB6F2" />
-          <stop offset="40%" stopColor="#c084fc" />
-          <stop offset="60%" stopColor="#f87171" />
-          <stop offset="100%" stopColor="#fcd34d" />
-        </linearGradient>
-      </defs>
-      <path d="M161.15 362.26a40.902 40.902 0 0 0 23.78 7.52v-.11a40.989 40.989 0 0 0 37.75-24.8l17.43-53.02a81.642 81.642 0 0 1 51.68-51.53l50.57-16.44a41.051 41.051 0 0 0 20.11-15.31 40.964 40.964 0 0 0 7.32-24.19 41.077 41.077 0 0 0-8.23-23.89 41.051 41.051 0 0 0-20.68-14.54l-49.92-16.21a81.854 81.854 0 0 1-51.82-51.85L222.7 27.33A41.11 41.11 0 0 0 183.63.01c-8.54.07-16.86 2.8-23.78 7.81A41.152 41.152 0 0 0 145 27.97l-16.58 50.97c-4 11.73-10.61 22.39-19.33 31.19s-19.33 15.5-31.01 19.61l-50.54 16.24a41.131 41.131 0 0 0-15.89 10.14 41.059 41.059 0 0 0-9.69 16.17 41.144 41.144 0 0 0-1.44 18.8c.98 6.29 3.42 12.27 7.11 17.46a41.312 41.312 0 0 0 20.39 15.19l49.89 16.18a82.099 82.099 0 0 1 32.11 19.91c2.42 2.4 4.68 4.96 6.77 7.65a81.567 81.567 0 0 1 12.94 24.38l16.44 50.49a40.815 40.815 0 0 0 14.98 19.91zm218.06 143.57c-5.42-3.86-9.5-9.32-11.66-15.61l-9.33-28.64a37.283 37.283 0 0 0-8.9-14.48c-4.05-4.06-9-7.12-14.45-8.93l-28.19-9.19a32.655 32.655 0 0 1-16.24-12.06 32.062 32.062 0 0 1-5.97-18.74c.01-6.76 2.13-13.35 6.06-18.86 3.91-5.53 9.46-9.68 15.87-11.86l28.61-9.27a37.013 37.013 0 0 0 14.08-9.01c3.95-4.04 6.91-8.93 8.67-14.29l9.22-28.22a32.442 32.442 0 0 1 11.72-15.87 32.476 32.476 0 0 1 18.74-6.17c6.74-.07 13.33 1.96 18.86 5.81 5.53 3.84 9.74 9.31 12.03 15.64l9.36 28.84a36.832 36.832 0 0 0 8.94 14.34c4.05 4.03 8.97 7.06 14.39 8.87l28.22 9.19a32.44 32.44 0 0 1 16.29 11.52 32.465 32.465 0 0 1 6.47 18.87 32.458 32.458 0 0 1-21.65 31.19l-28.84 9.36a37.384 37.384 0 0 0-14.36 8.93c-4.05 4.06-7.1 9.01-8.9 14.45l-9.16 28.13A32.492 32.492 0 0 1 417 505.98a32.005 32.005 0 0 1-18.74 6.03 32.508 32.508 0 0 1-19.05-6.18z" />
-    </svg>
-  );
-}

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

@@ -1,97 +0,0 @@
-'use client';
-
-import { type ComponentProps } from 'react';
-
-import { AIChatPlugin } from '@platejs/ai/react';
-import {
-  type FloatingToolbarState,
-  flip,
-  offset,
-  shift,
-  useFloatingToolbar,
-  useFloatingToolbarState
-} from '@platejs/floating';
-import { BlockSelectionPlugin } from '@platejs/selection/react';
-import {
-  useComposedRef,
-  useEditorRef,
-  useEventEditorValue,
-  usePluginOption
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { Toolbar } from './toolbar';
-
-import { linkPlugin } from '../editor/plugins/link-kit';
-
-export function FloatingToolbar({
-  children,
-  ref: refProp,
-  state,
-  ...props
-}: ComponentProps<typeof Toolbar> & {
-  state?: FloatingToolbarState;
-}) {
-  const editor = useEditorRef();
-  const focusedEditorId = useEventEditorValue('focus');
-  const isFloatingLinkOpen = !!usePluginOption(linkPlugin, 'mode');
-  const aiOpen = usePluginOption(AIChatPlugin, 'open');
-  const isSelectingSomeBlocks = usePluginOption(
-    BlockSelectionPlugin,
-    'isSelectingSome'
-  );
-
-  const floatingToolbarState = useFloatingToolbarState({
-    editorId: editor.id,
-    focusedEditorId,
-    hideToolbar: aiOpen || isFloatingLinkOpen || isSelectingSomeBlocks,
-    ...state,
-    floatingOptions: {
-      middleware: [
-        offset({
-          crossAxis: -24,
-          mainAxis: 12
-        }),
-        shift({ padding: 50 }),
-        flip({
-          fallbackPlacements: [
-            'top-start',
-            'top-end',
-            'bottom-start',
-            'bottom-end'
-          ],
-          padding: 12
-        })
-      ],
-      placement: 'top-start',
-      ...state?.floatingOptions
-    }
-  });
-
-  const {
-    clickOutsideRef,
-    hidden,
-    props: rootProps,
-    ref: floatingRef
-  } = useFloatingToolbar(floatingToolbarState);
-
-  const ref = useComposedRef<HTMLDivElement>(refProp, floatingRef);
-
-  if (hidden) return null;
-
-  return (
-    <div ref={clickOutsideRef}>
-      <Toolbar
-        className={cn(
-          'absolute z-50 animate-zoom whitespace-nowrap rounded-lg bg-popover p-1 opacity-100 shadow-toolbar print:hidden',
-          'scrollbar-hide max-w-[80vw] overflow-x-auto'
-        )}
-        ref={ref}
-        {...rootProps}
-        {...props}>
-        {children}
-      </Toolbar>
-    </div>
-  );
-}

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

@@ -1,209 +0,0 @@
-'use client';
-
-import { useCallback, useState, type ComponentProps } from 'react';
-
-import { KEYS } from 'platejs';
-import { useEditorRef, useSelectionFragmentProp } from 'platejs/react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger
-} from './dropdown-menu';
-import { ToolbarButton } from './toolbar';
-
-export function FontColorToolbarButton(
-  props: ComponentProps<typeof DropdownMenu>
-) {
-  const editor = useEditorRef();
-
-  const color = useSelectionFragmentProp({
-    key: KEYS.color,
-    defaultValue: 'inherit',
-    mode: 'text'
-  });
-  const background = useSelectionFragmentProp({
-    key: KEYS.backgroundColor,
-    defaultValue: 'transparent',
-    mode: 'text'
-  });
-
-  const [lastUsed, setLastUsed] = useState<Record<
-    'key' | 'label' | 'value',
-    string
-  > | null>(null);
-
-  const onColorChange = useCallback((color: string) => {
-    editor.tf.addMarks({ [KEYS.color]: color });
-    editor.tf.focus();
-
-    const { label } = textColorItems.find(item => item.value === color)!;
-
-    localStorage.setItem(
-      'lastUsed',
-      JSON.stringify({ key: KEYS.color, label, value: color })
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onBackgroundChange = useCallback((background: string) => {
-    editor.tf.addMarks({ [KEYS.backgroundColor]: background });
-    editor.tf.focus();
-
-    const { label } = backgroundColorItems.find(
-      item => item.value === background
-    )!;
-
-    localStorage.setItem(
-      'lastUsed',
-      JSON.stringify({
-        key: KEYS.backgroundColor,
-        label,
-        value: background
-      })
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onOpenChange = useCallback((open: boolean) => {
-    if (!open) return;
-
-    const local = localStorage.getItem('lastUsed');
-
-    if (local) {
-      return setLastUsed(JSON.parse(local));
-    }
-
-    setLastUsed(null);
-  }, []);
-
-  const onLastUsed = useCallback(() => {
-    if (!lastUsed) return;
-    if (lastUsed.key === KEYS.color) {
-      onColorChange(lastUsed.value);
-    } else {
-      onBackgroundChange(lastUsed.value);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastUsed]);
-
-  return (
-    <DropdownMenu modal={false} {...props} onOpenChange={onOpenChange}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton isDropdown pressed={false} tooltip="Color">
-          <div
-            className="size-4 rounded-full"
-            style={{
-              background:
-                background === 'transparent' && color === 'inherit' ? 'linear-gradient(120deg, #6EB6F2 20%, #a855f7, #ea580c, #eab308 80%)' : color === 'inherit' ? background : color
-            }} />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuPortal>
-        <DropdownMenuContent
-          align="start"
-          className="ignore-click-outside/toolbar h-96 overflow-y-auto"
-          data-plate-prevent-overlay>
-          {/* TODO:shortcut */}
-          {lastUsed && (
-            <DropdownMenuGroup>
-              <DropdownMenuLabel>Last used</DropdownMenuLabel>
-              <DropdownMenuRadioGroup className="flex flex-col gap-0.5">
-                <DropdownMenuRadioItem
-                  className="min-w-[200px] gap-1.5"
-                  onClick={onLastUsed}
-                  value={lastUsed.value}>
-                  <ColorIcon
-                    group={lastUsed.key === KEYS.backgroundColor ? 'background' : 'color'}
-                    value={lastUsed.value} />
-                  {lastUsed.label}
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-            </DropdownMenuGroup>
-          )}
-
-          <DropdownMenuGroup>
-            <DropdownMenuLabel>Text color</DropdownMenuLabel>
-            <DropdownMenuRadioGroup
-              className="flex flex-col"
-              onValueChange={onColorChange}
-              value={color}>
-              {textColorItems.map(({ label, value: itemValue }) => (
-                <DropdownMenuRadioItem
-                  className="min-w-[200px] gap-1.5"
-                  key={itemValue}
-                  value={itemValue}>
-                  <ColorIcon group="color" value={itemValue} />
-                  {label}
-                </DropdownMenuRadioItem>
-              ))}
-            </DropdownMenuRadioGroup>
-          </DropdownMenuGroup>
-
-          <DropdownMenuGroup>
-            <DropdownMenuLabel>Background color</DropdownMenuLabel>
-            <DropdownMenuRadioGroup
-              className="flex flex-col gap-0.5"
-              onValueChange={onBackgroundChange}
-              value={background}>
-              {backgroundColorItems.map(({ label, value: itemValue }) => (
-                <DropdownMenuRadioItem
-                  className="min-w-[200px] gap-1.5"
-                  key={itemValue}
-                  value={itemValue}>
-                  <ColorIcon group="background" value={itemValue} />
-                  {label}
-                </DropdownMenuRadioItem>
-              ))}
-            </DropdownMenuRadioGroup>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </DropdownMenu>
-  );
-}
-
-export function ColorIcon({ group, value }: { group: string; value: string }) {
-  return (
-    <div
-      className="flex size-5 items-center justify-center rounded-sm border text-sm"
-      style={{
-        background: group === 'background' ? value : undefined,
-        color: group === 'color' ? value : undefined
-      }}>
-      A
-    </div>
-  );
-}
-
-export const textColorItems: { label: string; value: string }[] = [
-  { label: 'Default', value: 'inherit' },
-  { label: 'Gray', value: 'rgb(123, 122, 116)' },
-  { label: 'Brown', value: 'rgb(162, 110, 83)' },
-  { label: 'Orange', value: 'rgb(215, 110, 30)' },
-  { label: 'Yellow', value: 'rgb(205, 147, 47)' },
-  { label: 'Green', value: 'rgb(39, 124, 112)' },
-  { label: 'Blue', value: 'rgb(59, 109, 178)' },
-  { label: 'Purple', value: 'rgb(122, 68, 178)' },
-  { label: 'Pink', value: 'rgb(168, 62, 111)' },
-  { label: 'Red', value: 'rgb(190, 55, 55)' }
-];
-
-export const backgroundColorItems: { label: string; value: string }[] = [
-  { label: 'Default background', value: 'transparent' },
-  { label: 'Gray background', value: 'rgb(241, 241, 239)' },
-  { label: 'Brown background', value: 'rgb(235, 229, 220)' },
-  { label: 'Orange background', value: 'rgb(254, 235, 200)' },
-  { label: 'Yellow background', value: 'rgb(254, 249, 195)' },
-  { label: 'Green background', value: 'rgb(204, 251, 241)' },
-  { label: 'Blue background', value: 'rgb(219, 234, 254)' },
-  { label: 'Purple background', value: 'rgb(243, 232, 255)' },
-  { label: 'Pink background', value: 'rgb(252, 231, 243)' },
-  { label: 'Red background', value: 'rgb(254, 226, 226)' }
-];

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

@@ -1,152 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { type TElement, KEYS } from 'platejs';
-
-import { toUnitLess } from '@platejs/basic-styles';
-import { FontSizePlugin } from '@platejs/basic-styles/react';
-import { Minus, Plus } from 'lucide-react';
-import { useEditorPlugin, useEditorSelector } from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from './popover';
-
-import { ToolbarButton } from './toolbar';
-
-const DEFAULT_FONT_SIZE = '16';
-
-const FONT_SIZE_MAP = {
-  h1: '36',
-  h2: '24',
-  h3: '20'
-} as const;
-
-const FONT_SIZES = [
-  '8',
-  '9',
-  '10',
-  '12',
-  '14',
-  '16',
-  '18',
-  '24',
-  '30',
-  '36',
-  '48',
-  '60',
-  '72',
-  '96'
-] as const;
-
-export function FontSizeToolbarButton() {
-  const [inputValue, setInputValue] = useState(DEFAULT_FONT_SIZE);
-  const [isFocused, setIsFocused] = useState(false);
-  const { editor, tf } = useEditorPlugin(FontSizePlugin);
-
-  const cursorFontSize = useEditorSelector((editor) => {
-    if (!editor?.api) return DEFAULT_FONT_SIZE;
-
-    const fontSize = editor.api.marks()?.[KEYS.fontSize];
-
-    if (fontSize) {
-      return toUnitLess(fontSize as string);
-    }
-
-    const [block] = (editor.api.block() as [TElement, unknown] | undefined) || [];
-
-    if (!block?.type) return DEFAULT_FONT_SIZE;
-
-    return block.type in FONT_SIZE_MAP ? FONT_SIZE_MAP[block.type as keyof typeof FONT_SIZE_MAP] : DEFAULT_FONT_SIZE;
-  }, []);
-
-  const handleInputChange = () => {
-    const newSize = toUnitLess(inputValue);
-
-    if (
-      Number.parseInt(newSize, 10) < 1
-      || Number.parseInt(newSize, 10) > 100
-    ) {
-      editor.tf.focus();
-
-      return;
-    }
-    if (newSize !== toUnitLess(cursorFontSize)) {
-      tf.fontSize.addMark(`${newSize}px`);
-    }
-
-    editor.tf.focus();
-  };
-
-  const handleFontSizeChange = (delta: number) => {
-    const newSize = Number(displayValue) + delta;
-
-    tf.fontSize.addMark(`${newSize}px`);
-    editor.tf.focus();
-  };
-
-  const displayValue = isFocused ? inputValue : cursorFontSize;
-
-  return (
-    <div className="flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0">
-      <ToolbarButton onClick={() => handleFontSizeChange(-1)}>
-        <Minus />
-      </ToolbarButton>
-
-      <Popover open={isFocused} modal={false}>
-        <PopoverTrigger asChild>
-          <input
-            className={cn(
-              'h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm hover:bg-muted'
-            )}
-            value={displayValue}
-            onBlur={() => {
-              setIsFocused(false);
-              handleInputChange();
-            }}
-            onChange={e => setInputValue(e.target.value)}
-            onFocus={() => {
-              setIsFocused(true);
-              setInputValue(toUnitLess(cursorFontSize));
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                handleInputChange();
-              }
-            }}
-            data-plate-focus="true"
-            type="text" />
-        </PopoverTrigger>
-        <PopoverContent
-          className="w-10 px-px py-1"
-          onOpenAutoFocus={e => e.preventDefault()}>
-          {FONT_SIZES.map(size => (
-            <button
-              key={size}
-              className={cn(
-                'flex h-8 w-full items-center justify-center text-sm hover:bg-accent data-[highlighted=true]:bg-accent'
-              )}
-              onClick={() => {
-                tf.fontSize.addMark(`${size}px`);
-                setIsFocused(false);
-              }}
-              data-highlighted={size === displayValue}
-              type="button">
-              {size}
-            </button>
-          ))}
-        </PopoverContent>
-      </Popover>
-
-      <ToolbarButton onClick={() => handleFontSizeChange(1)}>
-        <Plus />
-      </ToolbarButton>
-    </div>
-  );
-}

package/src/internal/plate-editor/plate-ui/ghost-text.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { CopilotPlugin } from '@platejs/ai/react';
-import {
-  type PlateLeafProps,
-  PlateLeaf,
-  usePluginOption
-} from 'platejs/react';
-
-export function GhostText(props: PlateLeafProps) {
-  const suggestionText = usePluginOption(CopilotPlugin, 'suggestionText');
-
-  if (!suggestionText) return <>{props.children}</>;
-
-  return (
-    <PlateLeaf
-      {...props}
-      className="text-muted-foreground/70" />
-  );
-}

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

@@ -1,52 +0,0 @@
-
-import { cva } from 'class-variance-authority';
-import { PathApi } from 'platejs';
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-const headingVariants = cva(
-  'relative mb-1 px-0.5 py-[3px] font-semibold leading-[1.3]!',
-  {
-    variants: {
-      isFirstBlock: {
-        false: '',
-        true: 'mt-0!'
-      },
-      variant: {
-        h1: 'mt-8 text-[1.875em]',
-        h2: 'mt-[1.4em] text-[1.5em]',
-        h3: 'mt-[1em] text-[1.25em]'
-      }
-    }
-  }
-);
-
-export function HeadingElementStatic({
-  children,
-  variant = 'h1',
-  ...props
-}: SlateElementProps & {
-  variant?: 'h1' | 'h2' | 'h3';
-}) {
-  const isFirstBlock = PathApi.equals(props.api.findPath(props.element)!, [0]);
-
-  return (
-    <SlateElement
-      as={variant}
-      className={headingVariants({ isFirstBlock, variant })}
-      {...props}>
-      {children}
-    </SlateElement>
-  );
-}
-
-export function H1ElementStatic(props: SlateElementProps) {
-  return <HeadingElementStatic variant="h1" {...props} />;
-}
-
-export function H2ElementStatic(props: SlateElementProps) {
-  return <HeadingElementStatic variant="h2" {...props} />;
-}
-
-export function H3ElementStatic(props: SlateElementProps) {
-  return <HeadingElementStatic variant="h3" {...props} />;
-}