@docyrus/ui-pro-ai-assistant 0.0.1

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

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

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

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

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState } from 'react';
+
+import * as React 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<TElement>() || [];
+
+    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

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

@@ -0,0 +1,52 @@
+
+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} />;
+}