temp

udecode · Sep 30, 2024 · 0e5bfb9 · 0e5bfb9
1 parent d207251
commit 0e5bfb9
Show file tree

Hide file tree

Showing 20 changed files with 833 additions and 241 deletions.
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -35,7 +35,6 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@ariakit/react": "0.4.7",
     "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accessible-icon": "^1.1.0",
     "@radix-ui/react-accordion": "^1.2.0",
@@ -109,6 +108,7 @@
     "@udecode/plate-markdown": "workspace:^",
     "@udecode/plate-media": "workspace:^",
     "@udecode/plate-mention": "workspace:^",
+    "@udecode/plate-menu": "workspace:^",
     "@udecode/plate-node-id": "workspace:^",
     "@udecode/plate-normalizers": "workspace:^",
     "@udecode/plate-playwright": "workspace:^",

diff --git a/apps/www/src/components/plate-ui/playground-floating-toolbar.tsx b/apps/www/src/components/plate-ui/playground-floating-toolbar.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { AIPlugin } from '@udecode/plate-ai/react';
+import {
+  PortalBody,
+  useComposedRef,
+  useEditorId,
+  useEditorRef,
+  useEventEditorSelectors,
+} from '@udecode/plate-common/react';
+import {
+  type FloatingToolbarState,
+  flip,
+  offset,
+  useFloatingToolbar,
+  useFloatingToolbarState,
+} from '@udecode/plate-floating';
+
+import { Toolbar } from '@/registry/default/plate-ui/toolbar';
+
+export const PlaygroundFloatingToolbar = withRef<
+  typeof Toolbar,
+  {
+    state?: FloatingToolbarState;
+  }
+>(({ children, state, ...props }, componentRef) => {
+  const editor = useEditorRef();
+  const editorId = useEditorId();
+  const focusedEditorId = useEventEditorSelectors.focus();
+
+  const aiOpen = editor.useOptions(AIPlugin).openEditorId === editor.id;
+
+  const floatingToolbarState = useFloatingToolbarState({
+    editorId,
+    focusedEditorId,
+    hideToolbar: aiOpen,
+    ...state,
+    floatingOptions: {
+      middleware: [
+        offset(12),
+        flip({
+          fallbackPlacements: [
+            'top-start',
+            'top-end',
+            'bottom-start',
+            'bottom-end',
+          ],
+          padding: 12,
+        }),
+      ],
+      placement: 'top',
+      ...state?.floatingOptions,
+    },
+  });
+
+  const {
+    hidden,
+    props: rootProps,
+    ref: floatingRef,
+  } = useFloatingToolbar(floatingToolbarState);
+
+  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);
+
+  if (hidden) return null;
+
+  return (
+    <PortalBody>
+      <Toolbar
+        ref={ref}
+        className={cn(
+          'absolute z-50 whitespace-nowrap rounded-md border bg-popover px-1 opacity-100 shadow-md print:hidden'
+        )}
+        {...rootProps}
+        {...props}
+      >
+        {children}
+      </Toolbar>
+    </PortalBody>
+  );
+});
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -68,6 +68,7 @@ import Prism from 'prismjs';
 import { CheckPlugin } from '@/components/context/check-plugin';
 import { settingsStore } from '@/components/context/settings-store';
 import { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';
+import { PlaygroundFloatingToolbar } from '@/components/plate-ui/playground-floating-toolbar';
 import { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';
 import { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';
 import { copilotPlugin } from '@/lib/plate/demo/plugins/copilotPlugin';
@@ -82,14 +83,14 @@ import { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';
 import { commentsData, usersData } from '@/plate/demo/values/commentsValue';
 import { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';
 import { AIMenu } from '@/registry/default/plate-ui/ai-menu';
+import { createAIEditor } from '@/registry/default/plate-ui/ai-previdew-editor';
 import { CommentsPopover } from '@/registry/default/plate-ui/comments-popover';
 import {
   CursorOverlay,
   SelectionOverlayPlugin,
 } from '@/registry/default/plate-ui/cursor-overlay';
 import { Editor } from '@/registry/default/plate-ui/editor';
 import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
-import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
 import { ImagePreview } from '@/registry/default/plate-ui/image-preview';
 import {
   FireLiComponent,
@@ -169,6 +170,7 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
         SelectionOverlayPlugin,
         AIPlugin.configure({
           options: {
+            createAIEditor: createAIEditor,
             scrollContainerSelector: `#${scrollSelector}`,
           },
           render: { aboveEditable: AIMenu },
@@ -275,6 +277,9 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
         BlockSelectionPlugin.configure({
           options: {
             areaOptions: {
+              behaviour: {
+                startThreshold: 20,
+              },
               boundaries: `#${scrollSelector}`,
               container: `#${scrollSelector}`,
               selectables: [`#${scrollSelector} .slate-selectable`],
@@ -357,7 +362,7 @@ export default function PlaygroundDemo({
   return (
     <DemoId id={id}>
       <DndProvider backend={HTML5Backend}>
-        <Plate onChange={(value) => console.log(value)} editor={editor}>
+        <Plate editor={editor}>
           <CheckPlugin componentId="fixed-toolbar">
             <FixedToolbar className="no-scrollbar">
               <CheckPlugin componentId="fixed-toolbar-buttons">
@@ -401,8 +406,9 @@ export default function PlaygroundDemo({
               />
 
               <CheckPlugin componentId="floating-toolbar">
-                <FloatingToolbar
+                <PlaygroundFloatingToolbar
                   state={{
+                    // hideToolbar: aiOpen,
                     showWhenReadOnly: isEnabled(
                       'comment',
                       id,
@@ -413,7 +419,7 @@ export default function PlaygroundDemo({
                   <CheckPlugin componentId="floating-toolbar-buttons">
                     <PlaygroundFloatingToolbarButtons />
                   </CheckPlugin>
-                </FloatingToolbar>
+                </PlaygroundFloatingToolbar>
               </CheckPlugin>
 
               <CheckPlugin id="cursoroverlay" plugin={DragOverCursorPlugin}>

diff --git a/apps/www/src/registry/default/plate-ui/ai-actions.tsx b/apps/www/src/registry/default/plate-ui/ai-actions.tsx
@@ -27,7 +27,7 @@ export const GROUP_ALIGN = 'group_align';
 
 export const ACTION_CAPTION = 'action_cation';
 
-export const DefaultActions = {
+export const CursorCommandsActions = {
   Summarize: {
     icon: <Icons.summarize />,
     label: 'Summarize',
@@ -68,7 +68,7 @@ export const ACTION_SUGGESTION_MAKE_LONGER = 'action_longer';
 
 export const ACTION_SUGGESTION_TRY_AGAIN = 'action_try_again';
 
-export const DefaultSuggestionActions = {
+export const CursorSuggestionActions = {
   close: {
     icon: <Icons.close />,
     label: 'Close',
@@ -110,7 +110,7 @@ export const ACTION_SELECTION_SIMPLIFY_LANGUAGE = 'action_simplify_language';
 
 export const GROUP_SELECTION_LANGUAGES = 'group_selection_languages';
 
-export const SelectionActions = {
+export const SelectionCommandsActions = {
   fixSpell: {
     icon: <Icons.check />,
     label: 'Fix spelling & grammar',

diff --git a/apps/www/src/registry/default/plate-ui/ai-menu-items.tsx b/apps/www/src/registry/default/plate-ui/ai-menu-items.tsx
@@ -1,7 +1,7 @@
 import {
-  DefaultActions,
-  DefaultSuggestionActions,
-  SelectionActions,
+  CursorCommandsActions,
+  CursorSuggestionActions,
+  SelectionCommandsActions,
   SelectionSuggestionActions,
 } from './ai-actions';
 import {
@@ -16,18 +16,18 @@ export const CursorCommands = () => {
   return (
     <>
       <MenuGroup label="Write with AI">
-        <MenuItem {...DefaultActions.continueWrite} />
+        <MenuItem {...CursorCommandsActions.continueWrite} />
       </MenuGroup>
       <MenuSeparator />
       <MenuGroup label="Generate from page">
-        <MenuItem {...DefaultActions.Summarize} />
+        <MenuItem {...CursorCommandsActions.Summarize} />
         <Menu
-          label={DefaultActions.translate.label}
-          icon={DefaultActions.translate.icon}
+          label={CursorCommandsActions.translate.label}
+          icon={CursorCommandsActions.translate.icon}
         >
-          {renderMenuItems(DefaultActions.translate)}
+          {renderMenuItems(CursorCommandsActions.translate)}
         </Menu>
-        <MenuItem {...DefaultActions.explain} />
+        <MenuItem {...CursorCommandsActions.explain} />
       </MenuGroup>
     </>
   );
@@ -36,35 +36,35 @@ export const CursorCommands = () => {
 export const CursorSuggestions = () => {
   return (
     <>
-      <MenuItem {...DefaultSuggestionActions.done} />
-      <MenuItem {...DefaultSuggestionActions.continueWrite} />
-      <MenuItem {...DefaultSuggestionActions.makeLonger} />
+      <MenuItem {...CursorSuggestionActions.done} />
+      <MenuItem {...CursorSuggestionActions.continueWrite} />
+      <MenuItem {...CursorSuggestionActions.makeLonger} />
 
       <MenuSeparator />
 
-      <MenuItem {...DefaultSuggestionActions.tryAgain} />
-      <MenuItem {...DefaultSuggestionActions.close} />
+      <MenuItem {...CursorSuggestionActions.tryAgain} />
+      <MenuItem {...CursorSuggestionActions.close} />
     </>
   );
 };
 
 export const SelectionCommands = () => {
   return (
     <>
-      <MenuItem {...SelectionActions.improveWriting} />
-      <MenuItem {...SelectionActions.fixSpell} />
-      <MenuItem {...SelectionActions.makeShorter} />
-      <MenuItem {...SelectionActions.makeLonger} />
-      <MenuItem {...SelectionActions.simplifyLanguage} />
+      <MenuItem {...SelectionCommandsActions.improveWriting} />
+      <MenuItem {...SelectionCommandsActions.fixSpell} />
+      <MenuItem {...SelectionCommandsActions.makeShorter} />
+      <MenuItem {...SelectionCommandsActions.makeLonger} />
+      <MenuItem {...SelectionCommandsActions.simplifyLanguage} />
 
       <MenuSeparator />
 
       <MenuGroup label="Generate from selection">
         <Menu
-          label={SelectionActions.translate.label}
-          icon={SelectionActions.translate.icon}
+          label={SelectionCommandsActions.translate.label}
+          icon={SelectionCommandsActions.translate.icon}
         >
-          {renderMenuItems(SelectionActions.translate)}
+          {renderMenuItems(SelectionCommandsActions.translate)}
         </Menu>
       </MenuGroup>
     </>

diff --git a/apps/www/src/registry/default/plate-ui/ai-menu.tsx b/apps/www/src/registry/default/plate-ui/ai-menu.tsx
@@ -11,6 +11,8 @@ import React, {
   useState,
 } from 'react';
 
+import type { actionGroup } from '@udecode/plate-menu';
+
 import { cn } from '@udecode/cn';
 import {
   AIPlugin,
@@ -19,16 +21,17 @@ import {
   streamInsertTextSelection,
 } from '@udecode/plate-ai/react';
 import { useEditorPlugin } from '@udecode/plate-core/react';
+import { Ariakit } from '@udecode/plate-menu';
 import { focusEditor } from '@udecode/slate-react';
 import isHotkey from 'is-hotkey';
 
 import { Icons } from '@/components/icons';
 
 import { useActionHandler } from './action-handler';
 import {
-  DefaultActions,
-  DefaultSuggestionActions,
-  SelectionActions,
+  CursorCommandsActions,
+  CursorSuggestionActions,
+  SelectionCommandsActions,
   SelectionSuggestionActions,
   defaultValues,
 } from './ai-actions';
@@ -41,8 +44,6 @@ import {
 import { AIPreviewEditor } from './ai-previdew-editor';
 import { Button } from './button';
 import {
-  type actionGroup,
-  Ariakit,
   Menu,
   comboboxVariants,
   filterAndBuildMenuTree,
@@ -62,7 +63,6 @@ export const AIMenu = memo(({ children }: React.PropsWithChildren) => {
 
   const { aiEditor } = editor.useOptions(AIPlugin);
 
-  const isModalOpenRef = React.useRef(false);
   // init
   const menu = Ariakit.useMenuStore();
   useEffect(() => {
@@ -145,11 +145,12 @@ export const AIMenu = memo(({ children }: React.PropsWithChildren) => {
       if (menuType === 'selection')
         return [SelectionSuggestions, SelectionSuggestionActions];
 
-      return [CursorSuggestions, DefaultSuggestionActions];
+      return [CursorSuggestions, CursorSuggestionActions];
     }
-    if (menuType === 'selection') return [SelectionCommands, SelectionActions];
+    if (menuType === 'selection')
+      return [SelectionCommands, SelectionCommandsActions];
 
-    return [CursorCommands, DefaultActions];
+    return [CursorCommands, CursorCommandsActions];
   }, [aiState, menuType]);
 
   /** IME */
@@ -167,27 +168,8 @@ export const AIMenu = memo(({ children }: React.PropsWithChildren) => {
         variant="ai"
         loading={aiState === 'generating' || aiState === 'requesting'}
         open={isOpen}
-        onClickOutside={(e) => {
-          if (aiState === 'idle') return editor.getApi(AIPlugin).ai.hide();
-          if (isModalOpenRef.current) return;
-
-          e.preventDefault();
-          isModalOpenRef.current = true;
-
-          // pushModal('Discard', {
-          //   onCancel: () => {
-          //     setTimeout(() => {
-          //       editor.getApi(AIPlugin).ai.focusMenu();
-          //     }, 0);
-          //   },
-          //   onConfirm: () => {
-          //     // TODO: cancel stream
-          //     editor.getApi(AIPlugin).ai.hide();
-          //   },
-          //   onSettled: () => {
-          //     isModalOpenRef.current = false;
-          //   },
-          // });
+        onClickOutside={() => {
+          return editor.getApi(AIPlugin).ai.hide();
         }}
         onValueChange={(value) => startTransition(() => setSearchValue(value))}
         onValuesChange={(values: typeof defaultValues) => {