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

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

@@ -1,555 +0,0 @@
-'use client';
-
-import { useMemo, useState, type ReactNode } from 'react';
-
-import { AIChatPlugin } from '@platejs/ai/react';
-import { showCaption } from '@platejs/caption/react';
-import { getDraftCommentKey } from '@platejs/comment';
-import {
-  BlockMenuPlugin,
-  BlockSelectionPlugin,
-  useBlockSelectionFragmentProp,
-  useBlockSelectionNodes
-} from '@platejs/selection/react';
-import {
-  AlignCenter,
-  AlignLeft,
-  AlignRight,
-  CaptionsIcon,
-  FilesIcon,
-  type LucideProps,
-  MessageSquareText,
-  PaintRoller,
-  RefreshCwIcon,
-  Trash2
-} from 'lucide-react';
-import { KEYS, type NodeEntry, type TElement } from 'platejs';
-import { type PlateEditor, useEditorRef, useHotkeys } from 'platejs/react';
-
-import { Input } from './input';
-
-import {
-  type Action,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxList,
-  filterMenuGroups,
-  filterMenuItems,
-  Menu,
-  MenuContent,
-  type MenuContentProps,
-  MenuGroup,
-  MenuItem,
-  type MenuProps,
-  MenuTrigger,
-  useComboboxValueState
-} from './menu';
-
-import { commentPlugin } from '../editor/plugins/comment-kit';
-import {
-  getBlockType,
-  setBlockType
-} from '../editor/transforms';
-import {
-  backgroundColorItems,
-  ColorIcon,
-  textColorItems
-} from './font-color-toolbar-button';
-import { turnIntoItems } from './turn-into-toolbar-button';
-
-export function BlockMenu({
-  id,
-  animateZoom,
-  children,
-  getAnchorRect,
-  open: openProp,
-  placement,
-  store
-}: Pick<MenuProps, 'open' | 'placement' | 'store'>
-  & Pick<MenuContentProps, 'animateZoom' | 'getAnchorRect'> & {
-    id?: string;
-    children?: ReactNode;
-  }) {
-  const editor = useEditorRef();
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Menu
-      onOpenChange={(open) => {
-        setOpen(open);
-
-        if (!open) {
-          editor.getApi(BlockMenuPlugin).blockMenu.hide();
-        } else if (id) {
-          editor.getApi(BlockMenuPlugin).blockMenu.show(id);
-        }
-      }}
-      open={openProp ?? open}
-      placement={placement}
-      store={store}
-      trigger={children ? <MenuTrigger>{children}</MenuTrigger> : undefined}>
-      <MenuContent
-        animateZoom={animateZoom}
-        autoFocusOnHide={false}
-        getAnchorRect={getAnchorRect}
-        portal
-        preventBodyScroll={!children}>
-        <ComboboxContent>
-          <BlockMenuInput
-            onHide={() => {
-              setOpen(false);
-              editor.getApi(BlockMenuPlugin).blockMenu.hide();
-            }} />
-        </ComboboxContent>
-
-        <ComboboxList>
-          <ComboboxEmpty />
-
-          <BlockMenuItems />
-        </ComboboxList>
-      </MenuContent>
-    </Menu>
-  );
-}
-
-function BlockMenuInput({ onHide }: { onHide: () => void }) {
-  const editor = useEditorRef();
-  const blockSelectionTf
-    = editor.getTransforms(BlockSelectionPlugin).blockSelection;
-  const [value] = useComboboxValueState();
-
-  useHotkeys(
-    'backspace',
-    (e) => {
-      if (value.length === 0) {
-        e.preventDefault();
-        blockSelectionTf.removeNodes();
-        onHide();
-      }
-    },
-    { enableOnFormTags: true }
-  );
-
-  useHotkeys(
-    'meta+d',
-    (e) => {
-      if (value.length === 0) {
-        e.preventDefault();
-        blockSelectionTf.duplicate();
-        onHide();
-      }
-    },
-    { enableOnFormTags: true }
-  );
-
-  useHotkeys(
-    'meta+j',
-    () => {
-      onHide();
-    },
-    { enableOnFormTags: true }
-  );
-
-  return (
-    <ComboboxInput>
-      <Input placeholder="Search actions..." />
-    </ComboboxInput>
-  );
-}
-
-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>
-  );
-}
-
-const GROUP = {
-  ALIGN: 'align',
-  BACKGROUND: 'background',
-  COLOR: 'color',
-  TURN_INTO: 'turn_into'
-} as const;
-
-export const blockMenuItems = {
-  askAI: {
-    focusEditor: false,
-    icon: <AIIcon />,
-    keywords: ['generate', 'help', 'chat'],
-    label: 'Ask AI',
-    shortcut: 'Cmd+J',
-    value: 'askAI',
-    onSelect: ({ editor }: { editor: PlateEditor }) => {
-      editor.getApi(AIChatPlugin).aiChat.show();
-    }
-  },
-  caption: {
-    icon: <CaptionsIcon />,
-    keywords: ['alt'],
-    label: 'Caption',
-    value: 'caption',
-    onSelect: ({ editor }: { editor: PlateEditor }) => {
-      const firstBlock = editor
-        .getApi(BlockSelectionPlugin)
-        .blockSelection.getNodes()[0];
-
-      showCaption(editor, firstBlock[0] as TElement);
-      editor.getApi(BlockSelectionPlugin).blockSelection.clear();
-    }
-  },
-  comment: {
-    icon: <MessageSquareText />,
-    keywords: ['note', 'feedback', 'annotation'],
-    label: 'Comment',
-    shortcut: 'Cmd+Shift+M',
-    value: 'comment',
-    onSelect: ({ editor }: { editor: PlateEditor }) => {
-      setTimeout(() => {
-        editor.getTransforms(BlockSelectionPlugin).blockSelection.select();
-        editor.getTransforms(commentPlugin).comment.setDraft();
-        editor.tf.collapse();
-        editor.setOption(commentPlugin, 'activeId', getDraftCommentKey());
-        editor.setOption(
-          commentPlugin,
-          'commentingBlock',
-          editor.selection?.focus.path.slice(0, 1) ?? null
-        );
-      }, 0);
-    }
-  },
-  delete: {
-    icon: <Trash2 />,
-    keywords: ['remove'],
-    label: 'Delete',
-    shortcut: 'Del or Ctrl+D',
-    value: 'delete',
-    onSelect: ({ editor }: { editor: PlateEditor }) => {
-      editor.getTransforms(BlockSelectionPlugin).blockSelection.removeNodes();
-    }
-  },
-  duplicate: {
-    focusEditor: false,
-    icon: <FilesIcon />,
-    keywords: ['copy'],
-    label: 'Duplicate',
-    shortcut: 'Cmd+D',
-    value: 'duplicate',
-    onSelect: ({ editor }: { editor: PlateEditor }) => {
-      editor
-        .getTransforms(BlockSelectionPlugin)
-        .blockSelection.duplicate();
-
-      editor.getApi(BlockSelectionPlugin).blockSelection.focus();
-    }
-  },
-  [GROUP.ALIGN]: {
-    component: AlignMenuItem,
-    filterItems: true,
-    icon: <AlignLeft />,
-    items: [{ icon: <AlignLeft />, label: 'Left', value: 'left' }, { icon: <AlignCenter />, label: 'Center', value: 'center' }, { icon: <AlignRight />, label: 'Right', value: 'right' }],
-    label: 'Align',
-    value: GROUP.ALIGN
-  },
-  [GROUP.COLOR]: {
-    component: ColorMenuItem,
-    filterItems: true,
-    icon: <PaintRoller />,
-    items: [
-      { group: GROUP.COLOR, items: textColorItems, label: 'Text color' },
-      {
-        group: GROUP.BACKGROUND,
-        items: backgroundColorItems,
-        label: 'Background color'
-      }
-    ],
-    keywords: ['highlight', 'background'],
-    label: 'Color',
-    value: GROUP.COLOR
-  },
-  [GROUP.TURN_INTO]: {
-    component: TurnIntoMenuItem,
-    filterItems: true,
-    icon: <RefreshCwIcon />,
-    items: turnIntoItems,
-    label: 'Turn into',
-    value: GROUP.TURN_INTO
-  }
-};
-
-const orderedMenuItems = [
-  {
-    items: [blockMenuItems.comment]
-  },
-  {
-    items: [
-      blockMenuItems.askAI,
-      blockMenuItems.delete,
-      blockMenuItems.duplicate,
-      blockMenuItems[GROUP.TURN_INTO]
-    ]
-  },
-  {
-    items: [blockMenuItems[GROUP.COLOR]]
-  }
-];
-
-const mediaMenuItems = [
-  {
-    items: [blockMenuItems.comment, blockMenuItems.caption]
-  },
-  {
-    items: [blockMenuItems[GROUP.ALIGN]]
-  },
-  {
-    items: [blockMenuItems.delete, blockMenuItems.duplicate]
-  }
-];
-
-function BlockMenuItems() {
-  const [searchValue] = useComboboxValueState();
-  const selectedBlocks = useBlockSelectionNodes();
-  const editor = useEditorRef();
-
-  const menuGroups = useMemo(() => {
-    const isMedia
-      = selectedBlocks.length === 1
-        && selectedBlocks.some(item => [
-          KEYS.audio,
-          KEYS.file,
-          KEYS.img,
-          KEYS.mediaEmbed,
-          KEYS.video
-        ].includes(
-          item[0].type as any
-        ));
-
-    const items = isMedia ? mediaMenuItems : orderedMenuItems;
-
-    return filterMenuGroups(items, searchValue) || items;
-  }, [selectedBlocks, searchValue]);
-
-  return (
-    <>
-      {menuGroups.map((group, index) => (
-        <MenuGroup key={index} label={group.label}>
-          {group.items?.map((item: Action) => {
-            const menuItem = (blockMenuItems as any)[item.value!];
-
-            if (menuItem.component) {
-              const ItemComponent = menuItem.component;
-
-              return <ItemComponent key={item.value} />;
-            }
-
-            return (
-              <MenuItem
-                icon={menuItem.icon}
-                key={item.value}
-                label={menuItem.label}
-                onClick={() => {
-                  menuItem.onSelect?.({ editor });
-
-                  if (menuItem.focusEditor !== false) editor.tf.focus();
-                }}
-                shortcut={menuItem.shortcut} />
-            );
-          })}
-        </MenuGroup>
-      ))}
-    </>
-  );
-}
-
-function ColorMenuItem() {
-  const [searchValue] = useComboboxValueState();
-  const editor = useEditorRef();
-
-  const color = useBlockSelectionFragmentProp({
-    key: KEYS.color,
-    defaultValue: 'inherit',
-    mode: 'text'
-  });
-  const background = useBlockSelectionFragmentProp({
-    key: KEYS.backgroundColor,
-    defaultValue: 'transparent'
-  });
-
-  const handleColorChange = (group: string, value: string) => {
-    if (group === GROUP.COLOR) {
-      editor
-        .getTransforms(BlockSelectionPlugin)
-        .blockSelection.setNodes({ color: value });
-    } else if (group === GROUP.BACKGROUND) {
-      editor
-        .getTransforms(BlockSelectionPlugin)
-        .blockSelection.setNodes({ backgroundColor: value });
-    }
-
-    editor.getApi(BlockSelectionPlugin).blockSelection.focus();
-  };
-
-  const menuGroups = useMemo(
-    () => filterMenuGroups(blockMenuItems[GROUP.COLOR].items, searchValue),
-    [searchValue]
-  );
-
-  const content = (
-    <>
-      {menuGroups.map(menuGroup => (
-        <MenuGroup key={menuGroup.group} label={menuGroup.label}>
-          {menuGroup.items?.map((item, index) => (
-            <MenuItem
-              checked={menuGroup.group === GROUP.COLOR ? color === item.value : background === item.value}
-              icon={<ColorIcon group={menuGroup.group!} value={item.value!} />}
-              key={index}
-              label={item.label}
-              onClick={() => handleColorChange(menuGroup.group!, item.value!)} />
-          ))}
-        </MenuGroup>
-      ))}
-    </>
-  );
-
-  if (searchValue) return content;
-
-  return (
-    <Menu
-      placement="right"
-      trigger={
-        <MenuTrigger
-          icon={blockMenuItems[GROUP.COLOR].icon}
-          label={blockMenuItems[GROUP.COLOR].label} />
-      }>
-      <MenuContent portal>{content}</MenuContent>
-    </Menu>
-  );
-}
-
-function AlignMenuItem() {
-  const [searchValue] = useComboboxValueState();
-  const editor = useEditorRef();
-  const value = useBlockSelectionFragmentProp({
-    key: 'align',
-    defaultValue: 'left'
-  });
-
-  const menuItems = useMemo(
-    () => filterMenuItems(blockMenuItems[GROUP.ALIGN], searchValue),
-    [searchValue]
-  );
-
-  const content = (
-    <>
-      {menuItems.map(item => (
-        <MenuItem
-          checked={value === item.value}
-          icon={item.icon}
-          key={item.value}
-          label={item.label}
-          onClick={() => {
-            editor
-              .getTransforms(BlockSelectionPlugin)
-              .blockSelection.setNodes({ align: item.value });
-            editor.tf.focus();
-          }} />
-      ))}
-    </>
-  );
-
-  if (searchValue)
-    return (
-      <MenuGroup label={blockMenuItems[GROUP.ALIGN].label}>{content}</MenuGroup>
-    );
-
-  return (
-    <Menu
-      placement="right"
-      trigger={
-        <MenuTrigger
-          icon={blockMenuItems[GROUP.ALIGN].icon}
-          label={blockMenuItems[GROUP.ALIGN].label} />
-      }>
-      <MenuContent portal>
-        <MenuGroup>{content}</MenuGroup>
-      </MenuContent>
-    </Menu>
-  );
-}
-
-function TurnIntoMenuItem() {
-  const editor = useEditorRef();
-  const [searchValue] = useComboboxValueState();
-
-  const value = useBlockSelectionFragmentProp({
-    defaultValue: KEYS.p,
-    getProp: node => getBlockType(node as any)
-  });
-
-  const handleTurnInto = (value: string) => {
-    editor
-      .getApi(BlockSelectionPlugin)
-      .blockSelection.getNodes()
-      .forEach((entry: NodeEntry<TElement>) => {
-        setBlockType(editor, value, { at: entry[1] });
-      });
-    editor.getApi(BlockSelectionPlugin).blockSelection.focus();
-  };
-
-  const menuItems = useMemo(
-    () => filterMenuItems(blockMenuItems[GROUP.TURN_INTO], searchValue),
-    [searchValue]
-  );
-
-  const content = (
-    <>
-      {menuItems.map(item => (
-        <MenuItem
-          checked={value === item.value}
-          icon={
-            <div className="flex size-5 items-center justify-center rounded-sm border border-foreground/15 bg-white p-0.5 text-subtle-foreground [&_svg]:size-3">
-              {item.icon}
-            </div>
-          }
-          key={item.value}
-          label={item.label}
-          onClick={() => handleTurnInto(item.value!)} />
-      ))}
-    </>
-  );
-
-  if (searchValue)
-    return (
-      <MenuGroup label={blockMenuItems[GROUP.TURN_INTO].label}>
-        {content}
-      </MenuGroup>
-    );
-
-  return (
-    <Menu
-      placement="right"
-      trigger={
-        <MenuTrigger
-          icon={blockMenuItems[GROUP.TURN_INTO].icon}
-          label={blockMenuItems[GROUP.TURN_INTO].label} />
-      }>
-      <MenuContent portal>
-        <MenuGroup>{content}</MenuGroup>
-      </MenuContent>
-    </Menu>
-  );
-}

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

@@ -1,47 +0,0 @@
-'use client';
-
-import { DndPlugin } from '@platejs/dnd';
-import { useBlockSelected } from '@platejs/selection/react';
-import { cva } from 'class-variance-authority';
-import { type PlateElementProps, usePluginOption } from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export const blockSelectionVariants = cva(
-  cn(
-    'before:pointer-events-none before:absolute before:inset-0 before:z-1 before:size-full before:rounded-[4px] before:content-[""]',
-    'before:bg-brand/15',
-    'before:transition-opacity before:duration-200'
-  ),
-  {
-    defaultVariants: {
-      active: true
-    },
-    variants: {
-      active: {
-        false: 'before:opacity-0',
-        true: 'before:opacity-100'
-      }
-    }
-  }
-);
-
-export function BlockSelection(props: PlateElementProps) {
-  const isBlockSelected = useBlockSelected();
-  const isDragging = usePluginOption(DndPlugin, 'isDragging');
-
-  if (
-    !isBlockSelected
-    || props.plugin.key === 'tr'
-    || props.plugin.key === 'table'
-  )
-    return null;
-
-  return (
-    <div
-      className={blockSelectionVariants({
-        active: isBlockSelected && !isDragging
-      })}
-      data-slot="block-selection" />
-  );
-}