[WEB-438] fix: ai insertion behaviour (#3872)

* fixed ai insertion behaviour

* replaced all ai popover references to have similar behavior

* chore: removed debug statements

packages/editor/core/package.json

@@ -53,7 +53,7 @@
     "react-moveable": "^0.54.2",
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.2"
+    "tiptap-markdown": "^0.8.9"
   },
   "devDependencies": {
     "@types/node": "18.15.3",

packages/editor/core/src/helpers/insert-content-at-cursor-position.ts

@@ -0,0 +1,17 @@
+import { Selection } from "@tiptap/pm/state";
+import { Editor } from "@tiptap/react";
+import { MutableRefObject } from "react";
+
+export const insertContentAtSavedSelection = (
+  editorRef: MutableRefObject<Editor | null>,
+  content: string,
+  savedSelection: Selection
+) => {
+  if (editorRef.current && savedSelection) {
+    editorRef.current
+      .chain()
+      .focus()
+      .insertContentAt(savedSelection?.anchor, content)
+      .run();
+  }
+};

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

@@ -1,5 +1,5 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import { useImperativeHandle, useRef, MutableRefObject } from "react";
+import { useImperativeHandle, useRef, MutableRefObject, useState } from "react";
 import { CoreEditorProps } from "src/ui/props";
 import { CoreEditorExtensions } from "src/ui/extensions";
 import { EditorProps } from "@tiptap/pm/view";
@@ -8,6 +8,8 @@ import { DeleteImage } from "src/types/delete-image";
 import { IMentionSuggestion } from "src/types/mention-suggestion";
 import { RestoreImage } from "src/types/restore-image";
 import { UploadImage } from "src/types/upload-image";
+import { Selection } from "@tiptap/pm/state";
+import { insertContentAtSavedSelection } from "src/helpers/insert-content-at-cursor-position";
 
 interface CustomEditorProps {
   uploadFile: UploadImage;
@@ -70,8 +72,10 @@ export const useEditor = ({
       onCreate: async ({ editor }) => {
         onStart?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
       },
+      onTransaction: async ({ editor }) => {
+        setSavedSelection(editor.state.selection);
+      },
       onUpdate: async ({ editor }) => {
-        // for instant feedback loop
         setIsSubmitting?.("submitting");
         setShouldShowAlert?.(true);
         onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
@@ -83,6 +87,8 @@ export const useEditor = ({
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;
 
+  const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
+
   useImperativeHandle(forwardedRef, () => ({
     clearEditor: () => {
       editorRef.current?.commands.clearContent();
@@ -90,6 +96,11 @@ export const useEditor = ({
     setEditorValue: (content: string) => {
       editorRef.current?.commands.setContent(content);
     },
+    setEditorValueAtCursorPosition: (content: string) => {
+      if (savedSelection) {
+        insertContentAtSavedSelection(editorRef, content, savedSelection);
+      }
+    },
   }));
 
   if (!editor) {

packages/editor/document-editor/src/ui/index.tsx

@@ -55,6 +55,7 @@ interface DocumentEditorProps extends IDocumentEditor {
 interface EditorHandle {
   clearEditor: () => void;
   setEditorValue: (content: string) => void;
+  setEditorValueAtCursorPosition: (content: string) => void;
 }
 
 const DocumentEditor = ({

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -45,6 +45,7 @@ export interface RichTextEditorProps extends IRichTextEditor {
 interface EditorHandle {
   clearEditor: () => void;
   setEditorValue: (content: string) => void;
+  setEditorValueAtCursorPosition: (content: string) => void;
 }
 
 const RichTextEditor = ({