[WEB-2047] refactor: editor side menu (#5329)

* refactor: editor side menu * chore: change editor side menu selector to be id based
makeplane · Aug 8, 2024 · e805c49 · e805c49
1 parent 943dd59
commit e805c49
Show file tree

Hide file tree

Showing 16 changed files with 359 additions and 296 deletions.
diff --git a/packages/editor/src/ce/extensions/ai-features/handle.ts b/packages/editor/src/ce/extensions/ai-features/handle.ts
@@ -0,0 +1,13 @@
+// extensions
+import { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const AIHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOptions => {
+  const view = () => {};
+  const domEvents = {};
+
+  return {
+    view,
+    domEvents,
+  };
+};
diff --git a/packages/editor/src/ce/extensions/ai-features/index.ts b/packages/editor/src/ce/extensions/ai-features/index.ts
@@ -0,0 +1 @@
+export * from "./handle";
diff --git a/packages/editor/src/ce/extensions/index.ts b/packages/editor/src/ce/extensions/index.ts
@@ -1 +1,2 @@
+export * from "./ai-features";
 export * from "./document-extensions";
diff --git a/packages/editor/src/core/components/editors/document/editor.tsx b/packages/editor/src/core/components/editors/document/editor.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 // components
 import { PageRenderer } from "@/components/editors";
 // helpers
@@ -46,13 +46,6 @@ const DocumentEditor = (props: IDocumentEditor) => {
     tabIndex,
     value,
   } = props;
-  // states
-  const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = useState<() => void>(() => {});
-  // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
-  // loads such that we can invoke it from react when the cursor leaves the container
-  const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
-    setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
-  };
 
   // use document editor
   const { editor, isIndexedDbSynced } = useDocumentEditor({
@@ -67,7 +60,6 @@ const DocumentEditor = (props: IDocumentEditor) => {
     forwardedRef,
     mentionHandler,
     placeholder,
-    setHideDragHandleFunction,
     tabIndex,
   });
 
@@ -80,13 +72,7 @@ const DocumentEditor = (props: IDocumentEditor) => {
   if (!editor || !isIndexedDbSynced) return null;
 
   return (
-    <PageRenderer
-      editor={editor}
-      editorContainerClassName={editorContainerClassNames}
-      hideDragHandle={hideDragHandleOnMouseLeave}
-      id={id}
-      tabIndex={tabIndex}
-    />
+    <PageRenderer editor={editor} editorContainerClassName={editorContainerClassNames} id={id} tabIndex={tabIndex} />
   );
 };
 

diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -20,13 +20,12 @@ import { BlockMenu } from "@/components/menus";
 type IPageRenderer = {
   editor: Editor;
   editorContainerClassName: string;
-  hideDragHandle?: () => void;
   id: string;
   tabIndex?: number;
 };
 
 export const PageRenderer = (props: IPageRenderer) => {
-  const { editor, editorContainerClassName, hideDragHandle, id, tabIndex } = props;
+  const { editor, editorContainerClassName, id, tabIndex } = props;
   // states
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
@@ -129,14 +128,9 @@ export const PageRenderer = (props: IPageRenderer) => {
   return (
     <>
       <div className="frame-renderer flex-grow w-full -mx-5" onMouseOver={handleLinkHover}>
-        <EditorContainer
-          editor={editor}
-          editorContainerClassName={editorContainerClassName}
-          hideDragHandle={hideDragHandle}
-          id={id}
-        >
+        <EditorContainer editor={editor} editorContainerClassName={editorContainerClassName} id={id}>
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-          {editor && editor.isEditable && <BlockMenu editor={editor} />}
+          {editor.isEditable && <BlockMenu editor={editor} />}
         </EditorContainer>
       </div>
       {isOpen && linkViewProps && coordinates && (

diff --git a/packages/editor/src/core/components/editors/editor-container.tsx b/packages/editor/src/core/components/editors/editor-container.tsx
@@ -7,12 +7,11 @@ interface EditorContainerProps {
   children: ReactNode;
   editor: Editor | null;
   editorContainerClassName: string;
-  hideDragHandle?: () => void;
   id: string;
 }
 
 export const EditorContainer: FC<EditorContainerProps> = (props) => {
-  const { children, editor, editorContainerClassName, hideDragHandle, id } = props;
+  const { children, editor, editorContainerClassName, id } = props;
 
   const handleContainerClick = () => {
     if (!editor) return;
@@ -53,11 +52,18 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
     }
   };
 
+  const handleContainerMouseLeave = () => {
+    const dragHandleElement = document.querySelector("#editor-side-menu");
+    if (!dragHandleElement?.classList.contains("side-menu-hidden")) {
+      dragHandleElement?.classList.add("side-menu-hidden");
+    }
+  };
+
   return (
     <div
       id={`editor-container-${id}`}
       onClick={handleContainerClick}
-      onMouseLeave={hideDragHandle}
+      onMouseLeave={handleContainerMouseLeave}
       className={cn(
         "cursor-text relative",
         {

diff --git a/packages/editor/src/core/components/editors/editor-wrapper.tsx b/packages/editor/src/core/components/editors/editor-wrapper.tsx
@@ -11,7 +11,6 @@ import { EditorContentWrapper } from "./editor-content";
 type Props = IEditorProps & {
   children?: (editor: Editor) => React.ReactNode;
   extensions: Extension<any, any>[];
-  hideDragHandleOnMouseLeave: () => void;
 };
 
 export const EditorWrapper: React.FC<Props> = (props) => {
@@ -20,7 +19,6 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     containerClassName,
     editorClassName = "",
     extensions,
-    hideDragHandleOnMouseLeave,
     id,
     initialValue,
     fileHandler,
@@ -56,12 +54,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
   if (!editor) return null;
 
   return (
-    <EditorContainer
-      editor={editor}
-      editorContainerClassName={editorContainerClassName}
-      id={id}
-      hideDragHandle={hideDragHandleOnMouseLeave}
-    >
+    <EditorContainer editor={editor} editorContainerClassName={editorContainerClassName} id={id}>
       {children?.(editor)}
       <div className="flex flex-col">
         <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />

diff --git a/packages/editor/src/core/components/editors/lite-text/editor.tsx b/packages/editor/src/core/components/editors/lite-text/editor.tsx
@@ -11,7 +11,7 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
 
   const extensions = [EnterKeyExtension(onEnterKeyPress)];
 
-  return <EditorWrapper {...props} extensions={extensions} hideDragHandleOnMouseLeave={() => {}} />;
+  return <EditorWrapper {...props} extensions={extensions} />;
 };
 
 const LiteTextEditorWithRef = forwardRef<EditorRefApi, ILiteTextEditor>((props, ref) => (

diff --git a/packages/editor/src/core/components/editors/rich-text/editor.tsx b/packages/editor/src/core/components/editors/rich-text/editor.tsx
@@ -1,33 +1,30 @@
-import { forwardRef, useCallback, useState } from "react";
+import { forwardRef, useCallback } from "react";
 // components
 import { EditorWrapper } from "@/components/editors";
 import { EditorBubbleMenu } from "@/components/menus";
 // extensions
-import { DragAndDrop, SlashCommand } from "@/extensions";
+import { SideMenuExtension, SlashCommand } from "@/extensions";
 // types
 import { EditorRefApi, IRichTextEditor } from "@/types";
 
 const RichTextEditor = (props: IRichTextEditor) => {
   const { dragDropEnabled, fileHandler } = props;
-  // states
-  const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = useState<() => void>(() => {});
-
-  // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
-  // loads such that we can invoke it from react when the cursor leaves the container
-  const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
-    setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
-  };
 
   const getExtensions = useCallback(() => {
     const extensions = [SlashCommand(fileHandler.upload)];
 
-    if (dragDropEnabled) extensions.push(DragAndDrop(setHideDragHandleFunction));
+    extensions.push(
+      SideMenuExtension({
+        aiEnabled: false,
+        dragDropEnabled: !!dragDropEnabled,
+      })
+    );
 
     return extensions;
   }, [dragDropEnabled, fileHandler.upload]);
 
   return (
-    <EditorWrapper {...props} extensions={getExtensions()} hideDragHandleOnMouseLeave={hideDragHandleOnMouseLeave}>
+    <EditorWrapper {...props} extensions={getExtensions()}>
       {(editor) => <>{editor && <EditorBubbleMenu editor={editor} />}</>}
     </EditorWrapper>
   );

diff --git a/packages/editor/src/core/extensions/index.ts b/packages/editor/src/core/extensions/index.ts
@@ -10,12 +10,12 @@ export * from "./typography";
 export * from "./core-without-props";
 export * from "./document-without-props";
 export * from "./custom-code-inline";
-export * from "./drag-drop";
 export * from "./drop";
 export * from "./enter-key-extension";
 export * from "./extensions";
 export * from "./horizontal-rule";
 export * from "./keymap";
 export * from "./quote";
 export * from "./read-only-extensions";
+export * from "./side-menu";
 export * from "./slash-commands";
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from "./ai-features";
		export * from "./document-extensions";