[WEB-2047] dev: pages side menu refactor (#5371)

* dev: pages ai menu

* chore: remove unused tasks

packages/editor/src/ce/extensions/ai-features/handle.ts

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

packages/editor/src/ce/extensions/ai-features/index.ts

@@ -1 +0,0 @@
-export * from "./handle";

packages/editor/src/ce/extensions/index.ts

@@ -1,2 +1 @@
-export * from "./ai-features";
 export * from "./document-extensions";

packages/editor/src/core/components/editors/document/editor.tsx

@@ -14,12 +14,14 @@ import {
   EditorRefApi,
   IMentionHighlight,
   IMentionSuggestion,
+  TAIHandler,
   TDisplayConfig,
   TExtensions,
   TFileHandler,
 } from "@/types";
 
 interface IDocumentEditor {
+  aiHandler?: TAIHandler;
   containerClassName?: string;
   disabledExtensions?: TExtensions[];
   displayConfig?: TDisplayConfig;
@@ -41,6 +43,7 @@ interface IDocumentEditor {
 
 const DocumentEditor = (props: IDocumentEditor) => {
   const {
+    aiHandler,
     containerClassName,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
@@ -84,6 +87,7 @@ const DocumentEditor = (props: IDocumentEditor) => {
   return (
     <PageRenderer
       displayConfig={displayConfig}
+      aiHandler={aiHandler}
       editor={editor}
       editorContainerClassName={editorContainerClassNames}
       id={id}

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -15,11 +15,12 @@ import { Editor, ReactRenderer } from "@tiptap/react";
 // components
 import { EditorContainer, EditorContentWrapper } from "@/components/editors";
 import { LinkView, LinkViewProps } from "@/components/links";
-import { BlockMenu } from "@/components/menus";
+import { AIFeaturesMenu, BlockMenu } from "@/components/menus";
 // types
-import { TDisplayConfig } from "@/types";
+import { TAIHandler, TDisplayConfig } from "@/types";
 
 type IPageRenderer = {
+  aiHandler?: TAIHandler;
   displayConfig: TDisplayConfig;
   editor: Editor;
   editorContainerClassName: string;
@@ -28,7 +29,7 @@ type IPageRenderer = {
 };
 
 export const PageRenderer = (props: IPageRenderer) => {
-  const { displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
+  const { aiHandler, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
   // states
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
@@ -138,7 +139,12 @@ export const PageRenderer = (props: IPageRenderer) => {
           id={id}
         >
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-          {editor.isEditable && <BlockMenu editor={editor} />}
+          {editor.isEditable && (
+            <>
+              <BlockMenu editor={editor} />
+              <AIFeaturesMenu menu={aiHandler?.menu} />
+            </>
+          )}
         </EditorContainer>
       </div>
       {isOpen && linkViewProps && coordinates && (

packages/editor/src/core/components/menus/ai-menu.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import tippy, { Instance } from "tippy.js";
+// helpers
+import { cn } from "@/helpers/common";
+// types
+import { TAIHandler } from "@/types";
+
+type Props = {
+  menu: TAIHandler["menu"];
+};
+
+export const AIFeaturesMenu: React.FC<Props> = (props) => {
+  const { menu } = props;
+  // states
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
+  // refs
+  const menuRef = useRef<HTMLDivElement>(null);
+  const popup = useRef<Instance | null>(null);
+
+  useEffect(() => {
+    if (!menuRef.current) return;
+
+    menuRef.current.remove();
+    menuRef.current.style.visibility = "visible";
+
+    // @ts-expect-error - tippy types are incorrect
+    popup.current = tippy(document.body, {
+      getReferenceClientRect: null,
+      content: menuRef.current,
+      appendTo: () => document.querySelector(".frame-renderer"),
+      trigger: "manual",
+      interactive: true,
+      arrow: false,
+      placement: "bottom-start",
+      animation: "shift-away",
+      hideOnClick: true,
+      onShown: () => menuRef.current?.focus(),
+    });
+
+    return () => {
+      popup.current?.destroy();
+      popup.current = null;
+    };
+  }, []);
+
+  const hidePopup = useCallback(() => {
+    popup.current?.hide();
+    setIsPopupVisible(false);
+  }, []);
+
+  useEffect(() => {
+    const handleClickAIHandle = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.matches("#ai-handle") || menuRef.current?.contains(e.target as Node)) {
+        e.preventDefault();
+
+        if (!isPopupVisible) {
+          popup.current?.setProps({
+            getReferenceClientRect: () => target.getBoundingClientRect(),
+          });
+          popup.current?.show();
+          setIsPopupVisible(true);
+        }
+        return;
+      }
+
+      hidePopup();
+      return;
+    };
+
+    document.addEventListener("click", handleClickAIHandle);
+    document.addEventListener("contextmenu", handleClickAIHandle);
+    document.addEventListener("keydown", hidePopup);
+
+    return () => {
+      document.removeEventListener("click", handleClickAIHandle);
+      document.removeEventListener("contextmenu", handleClickAIHandle);
+      document.removeEventListener("keydown", hidePopup);
+    };
+  }, [hidePopup, isPopupVisible]);
+
+  return (
+    <div
+      className={cn("opacity-0 pointer-events-none fixed inset-0 size-full z-10 transition-opacity", {
+        "opacity-100 pointer-events-auto": isPopupVisible,
+      })}
+    >
+      <div ref={menuRef} className="z-10">
+        {menu?.({
+          onClose: hidePopup,
+        })}
+      </div>
+    </div>
+  );
+};

packages/editor/src/core/components/menus/index.ts

@@ -1,3 +1,4 @@
 export * from "./bubble-menu";
+export * from "./ai-menu";
 export * from "./block-menu";
 export * from "./menu-items";

packages/editor/src/core/extensions/side-menu.tsx

@@ -1,8 +1,8 @@
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
-// plane editor extensions
-import { AIHandlePlugin } from "@/plane-editor/extensions";
+// plugins
+import { AIHandlePlugin } from "@/plugins/ai-handle";
 import { DragHandlePlugin } from "@/plugins/drag-handle";
 
 type Props = {
@@ -105,7 +105,7 @@ const SideMenu = (options: SideMenuPluginProps) => {
   const showSideMenu = () => editorSideMenu?.classList.remove("side-menu-hidden");
   // side menu elements
   const { view: dragHandleView, domEvents: dragHandleDOMEvents } = DragHandlePlugin(options);
-  const { view: aiHandleView } = AIHandlePlugin(options);
+  const { view: aiHandleView, domEvents: aiHandleDOMEvents } = AIHandlePlugin(options);
 
   return new Plugin({
     key: new PluginKey("sideMenu"),
@@ -113,12 +113,12 @@ const SideMenu = (options: SideMenuPluginProps) => {
       hideSideMenu();
       view?.dom.parentElement?.appendChild(editorSideMenu);
       // side menu elements' initialization
-      if (handlesConfig.dragDrop) {
-        dragHandleView(view, editorSideMenu);
-      }
       if (handlesConfig.ai) {
         aiHandleView(view, editorSideMenu);
       }
+      if (handlesConfig.dragDrop) {
+        dragHandleView(view, editorSideMenu);
+      }
 
       return {
         destroy: () => hideSideMenu(),
@@ -175,7 +175,12 @@ const SideMenu = (options: SideMenuPluginProps) => {
           editorSideMenu.style.left = `${rect.left - rect.width}px`;
           editorSideMenu.style.top = `${rect.top}px`;
           showSideMenu();
-          dragHandleDOMEvents?.mousemove();
+          if (handlesConfig.dragDrop) {
+            dragHandleDOMEvents?.mousemove();
+          }
+          if (handlesConfig.ai) {
+            aiHandleDOMEvents?.mousemove?.();
+          }
         },
         keydown: () => hideSideMenu(),
         mousewheel: () => hideSideMenu(),

packages/editor/src/core/hooks/use-editor.ts

@@ -1,4 +1,5 @@
 import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
+import { DOMSerializer } from "@tiptap/pm/model";
 import { Selection } from "@tiptap/pm/state";
 import { EditorProps } from "@tiptap/pm/view";
 import { useEditor as useTiptapEditor, Editor } from "@tiptap/react";
@@ -213,6 +214,41 @@ export const useEditor = (props: CustomEditorProps) => {
           console.error("An error occurred while setting focus at position:", error);
         }
       },
+      getSelectedText: () => {
+        if (!editorRef.current) return null;
+
+        const { state } = editorRef.current;
+        const { from, to, empty } = state.selection;
+
+        if (empty) return null;
+
+        const nodesArray: string[] = [];
+        state.doc.nodesBetween(from, to, (node, pos, parent) => {
+          if (parent === state.doc && editorRef.current) {
+            const serializer = DOMSerializer.fromSchema(editorRef.current?.schema);
+            const dom = serializer.serializeNode(node);
+            const tempDiv = document.createElement("div");
+            tempDiv.appendChild(dom);
+            nodesArray.push(tempDiv.innerHTML);
+          }
+        });
+        const selection = nodesArray.join("");
+        console.log(selection);
+        return selection;
+      },
+      insertText: (contentHTML, insertOnNextLine) => {
+        if (!editor) return;
+        // get selection
+        const { from, to, empty } = editor.state.selection;
+        if (empty) return;
+        if (insertOnNextLine) {
+          // move cursor to the end of the selection and insert a new line
+          editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
+        } else {
+          // replace selected text with the content provided
+          editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
+        }
+      },
     }),
     [editorRef, savedSelection, fileHandler.upload]
   );

packages/editor/src/core/plugins/ai-handle.ts

@@ -0,0 +1,153 @@
+import { NodeSelection } from "@tiptap/pm/state";
+import { EditorView } from "@tiptap/pm/view";
+// extensions
+import { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions";
+
+const sparklesIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
+
+const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
+  const elements = document.elementsFromPoint(coords.x, coords.y);
+  const generalSelectors = [
+    "li",
+    "p:not(:first-child)",
+    ".code-block",
+    "blockquote",
+    "img",
+    "h1, h2, h3, h4, h5, h6",
+    "[data-type=horizontalRule]",
+    ".table-wrapper",
+    ".issue-embed",
+  ].join(", ");
+
+  for (const elem of elements) {
+    if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
+      return elem;
+    }
+
+    // if the element is a <p> tag that is the first child of a td or th
+    if (
+      (elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
+      elem?.textContent?.trim() !== ""
+    ) {
+      return elem; // Return only if p tag is not empty in td or th
+    }
+
+    // apply general selector
+    if (elem.matches(generalSelectors)) {
+      return elem;
+    }
+  }
+  return null;
+};
+
+const nodePosAtDOM = (node: Element, view: EditorView, options: SideMenuPluginProps) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const nodePosAtDOMForBlockQuotes = (node: Element, view: EditorView) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 1,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const calcNodePos = (pos: number, view: EditorView, node: Element) => {
+  const maxPos = view.state.doc.content.size;
+  const safePos = Math.max(0, Math.min(pos, maxPos));
+  const $pos = view.state.doc.resolve(safePos);
+
+  if ($pos.depth > 1) {
+    if (node.matches("ul li, ol li")) {
+      // only for nested lists
+      const newPos = $pos.before($pos.depth);
+      return Math.max(0, Math.min(newPos, maxPos));
+    }
+  }
+
+  return safePos;
+};
+
+export const AIHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOptions => {
+  let aiHandleElement: HTMLButtonElement | null = null;
+
+  const handleClick = (event: MouseEvent, view: EditorView) => {
+    view.focus();
+
+    const node = nodeDOMAtCoords({
+      x: event.clientX + 50 + options.dragHandleWidth,
+      y: event.clientY,
+    });
+
+    if (!(node instanceof Element)) return;
+
+    if (node.matches("blockquote")) {
+      let nodePosForBlockQuotes = nodePosAtDOMForBlockQuotes(node, view);
+      if (nodePosForBlockQuotes === null || nodePosForBlockQuotes === undefined) return;
+
+      const docSize = view.state.doc.content.size;
+      nodePosForBlockQuotes = Math.max(0, Math.min(nodePosForBlockQuotes, docSize));
+
+      if (nodePosForBlockQuotes >= 0 && nodePosForBlockQuotes <= docSize) {
+        // TODO FIX ERROR
+        const nodeSelection = NodeSelection.create(view.state.doc, nodePosForBlockQuotes);
+        view.dispatch(view.state.tr.setSelection(nodeSelection));
+      }
+      return;
+    }
+
+    let nodePos = nodePosAtDOM(node, view, options);
+
+    if (nodePos === null || nodePos === undefined) return;
+
+    // Adjust the nodePos to point to the start of the node, ensuring NodeSelection can be applied
+    nodePos = calcNodePos(nodePos, view, node);
+
+    // TODO FIX ERROR
+    // Use NodeSelection to select the node at the calculated position
+    const nodeSelection = NodeSelection.create(view.state.doc, nodePos);
+
+    // Dispatch the transaction to update the selection
+    view.dispatch(view.state.tr.setSelection(nodeSelection));
+  };
+
+  const view = (view: EditorView, sideMenu: HTMLDivElement | null) => {
+    // create handle element
+    const className =
+      "grid place-items-center font-medium size-5 aspect-square text-xs text-custom-text-300 hover:bg-custom-background-80 rounded-sm opacity-100 !outline-none z-[5] transition-[background-color,_opacity] duration-200 ease-linear";
+    aiHandleElement = document.createElement("button");
+    aiHandleElement.type = "button";
+    aiHandleElement.id = "ai-handle";
+    aiHandleElement.classList.value = className;
+    const iconElement = document.createElement("span");
+    iconElement.classList.value = "pointer-events-none";
+    iconElement.innerHTML = sparklesIcon;
+    aiHandleElement.appendChild(iconElement);
+    // bind events
+    aiHandleElement.addEventListener("click", (e) => handleClick(e, view));
+
+    sideMenu?.appendChild(aiHandleElement);
+
+    return {
+      // destroy the handle element on un-initialize
+      destroy: () => {
+        aiHandleElement?.remove();
+        aiHandleElement = null;
+      },
+    };
+  };
+
+  const domEvents = {};
+
+  return {
+    view,
+    domEvents,
+  };
+};

packages/editor/src/core/types/ai.ts

@@ -0,0 +1,7 @@
+type TMenuProps = {
+  onClose: () => void;
+};
+
+export type TAIHandler = {
+  menu?: (props: TMenuProps) => React.ReactNode;
+};

packages/editor/src/core/types/editor.ts

@@ -20,6 +20,8 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
   isEditorReadyToDiscard: () => boolean;
   setSynced: () => void;
   hasUnsyncedChanges: () => boolean;
+  getSelectedText: () => string | null;
+  insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
 }
 
 export interface IEditorProps {

packages/editor/src/core/types/index.ts

@@ -1,3 +1,4 @@
+export * from "./ai";
 export * from "./config";
 export * from "./editor";
 export * from "./embed";

packages/editor/src/styles/drag-drop.css

@@ -3,7 +3,7 @@
   position: fixed;
   display: flex;
   align-items: center;
-  opacity: 100;
+  opacity: 1;
   transition:
     opacity 0.2s ease 0.2s,
     top 0.2s ease,
@@ -19,7 +19,7 @@
 
 /* drag handle */
 #drag-handle {
-  opacity: 100;
+  opacity: 1;
 
   &.drag-handle-hidden {
     opacity: 0;
@@ -28,6 +28,17 @@
 }
 /* end drag handle */
 
+/* ai handle */
+#ai-handle {
+  opacity: 1;
+
+  &.handle-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end ai handle */
+
 .ProseMirror:not(.dragging) .ProseMirror-selectednode {
   position: relative;
   cursor: grab;