Merge branch 'fix/image-refocus-pages' into chore/page-transactions

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

@@ -107,5 +107,5 @@ export const useEditor = ({
     return null;
   }
 
-  return editor;
+  return { editor, savedSelection };
 };

packages/editor/core/src/lib/editor-commands.ts

@@ -2,6 +2,7 @@ import { Editor, Range } from "@tiptap/core";
 import { startImageUpload } from "src/ui/plugins/upload-image";
 import { findTableAncestor } from "src/lib/utils";
 import { UploadImage } from "src/types/upload-image";
+import { Selection } from "@tiptap/pm/state";
 
 export const toggleHeadingOne = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).clearNodes().setNode("heading", { level: 1 }).run();
@@ -113,6 +114,7 @@ export const insertImageCommand = (
   editor: Editor,
   uploadFile: UploadImage,
   setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
+  savedSelection?: Selection | null,
   range?: Range
 ) => {
   if (range) editor.chain().focus().deleteRange(range).run();
@@ -122,7 +124,9 @@ export const insertImageCommand = (
   input.onchange = async () => {
     if (input.files?.length) {
       const file = input.files[0];
-      const pos = editor.view.state.selection.from;
+      const pos = savedSelection?.anchor ?? editor.view.state.selection.from;
+      // __AUTO_GENERATED_PRINT_VAR_START__
+      console.log("insertImageCommand#(anon)#if pos: %s", pos); // __AUTO_GENERATED_PRINT_VAR_END__
       startImageUpload(file, editor.view, pos, uploadFile, setIsSubmitting);
     }
   };

packages/editor/core/src/ui/menus/menu-items/index.tsx

@@ -33,6 +33,7 @@ import {
 } from "src/lib/editor-commands";
 import { LucideIconType } from "src/types/lucide-icon";
 import { UploadImage } from "src/types/upload-image";
+import { Selection } from "@tiptap/pm/state";
 
 export interface EditorMenuItem {
   name: string;
@@ -135,10 +136,13 @@ export const TableItem = (editor: Editor): EditorMenuItem => ({
 export const ImageItem = (
   editor: Editor,
   uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
+  savedSelection?: Selection | null
 ): EditorMenuItem => ({
   name: "image",
   isActive: () => editor?.isActive("image"),
-  command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
+  command: () => {
+    insertImageCommand(editor, uploadFile, setIsSubmitting, savedSelection);
+  },
   icon: ImageIcon,
 });

packages/editor/core/src/ui/plugins/upload-image.tsx

@@ -134,6 +134,7 @@ export async function startImageUpload(
     const transaction = view.state.tr.insert(pos - 1, node).setMeta(uploadKey, { remove: { id } });
 
     view.dispatch(transaction);
+    view.focus();
   } catch (error) {
     console.error("Upload error: ", error);
     removePlaceholder(view, id);

packages/editor/core/src/ui/read-only/extensions.tsx

@@ -73,7 +73,6 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   }),
   TiptapUnderline,
   TextStyle,
-  Color,
   TaskList.configure({
     HTMLAttributes: {
       class: "not-prose pl-2",

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

@@ -105,7 +105,7 @@ const DocumentEditor = ({
     setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
   };
 
-  const editor = useEditor({
+  const editorVal = useEditor({
     onChange(json, html) {
       updateMarkings(json);
       onChange(json, html);
@@ -128,6 +128,11 @@ const DocumentEditor = ({
     extensions: DocumentEditorExtensions(uploadFile, setHideDragHandleFunction, setIsSubmitting),
   });
 
+  if (!editorVal) {
+    return null;
+  }
+
+  const { editor, savedSelection } = editorVal;
   if (!editor) {
     return null;
   }
@@ -166,14 +171,21 @@ const DocumentEditor = ({
         documentDetails={documentDetails}
         isSubmitting={isSubmitting}
       />
-      <div className="flex-shrink-0 md:hidden border-b border-custom-border-200 pl-3 py-2">
-        {uploadFile && <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} />}
+      <div className="flex-shrink-0 border-b border-custom-border-200 py-2 pl-3 md:hidden">
+        {uploadFile && (
+          <FixedMenu
+            savedSelection={savedSelection}
+            editor={editor}
+            uploadFile={uploadFile}
+            setIsSubmitting={setIsSubmitting}
+          />
+        )}
       </div>
-      <div className="flex h-full w-full overflow-y-auto frame-renderer">
-        <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-72 hidden md:block">
+      <div className="frame-renderer flex h-full w-full overflow-y-auto">
+        <div className="sticky top-0 hidden h-full w-56 flex-shrink-0 md:block lg:w-72">
           <SummarySideBar editor={editor} markings={markings} sidePeekVisible={sidePeekVisible} />
         </div>
-        <div className="h-full w-full md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
+        <div className="page-renderer h-full w-full md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]">
           <PageRenderer
             tabIndex={tabIndex}
             onActionCompleteHandler={onActionCompleteHandler}

packages/editor/document-editor/src/ui/menu/fixed-menu.tsx

@@ -19,6 +19,7 @@ import {
   EditorMenuItem,
   UploadImage,
 } from "@plane/editor-core";
+import { Selection } from "@tiptap/pm/state";
 
 export type BubbleMenuItem = EditorMenuItem;
 
@@ -26,10 +27,11 @@ type EditorBubbleMenuProps = {
   editor: Editor;
   uploadFile: UploadImage;
   setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  savedSelection?: Selection | null;
 };
 
 export const FixedMenu = (props: EditorBubbleMenuProps) => {
-  const { editor, uploadFile, setIsSubmitting } = props;
+  const { editor, uploadFile, setIsSubmitting, savedSelection } = props;
 
   const basicMarkItems: BubbleMenuItem[] = [
     HeadingOneItem(editor),
@@ -48,7 +50,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   function getComplexItems(): BubbleMenuItem[] {
     const items: BubbleMenuItem[] = [TableItem(editor)];
 
-    items.push(ImageItem(editor, uploadFile, setIsSubmitting));
+    items.push(ImageItem(editor, uploadFile, setIsSubmitting, savedSelection));
     return items;
   }
 

packages/editor/extensions/src/extensions/slash-commands.tsx

@@ -186,7 +186,7 @@ const getSuggestionItems =
         searchTerms: ["img", "photo", "picture", "media"],
         icon: <ImageIcon className="h-3.5 w-3.5" />,
         command: ({ editor, range }: CommandProps) => {
-          insertImageCommand(editor, uploadFile, setIsSubmitting, range);
+          insertImageCommand(editor, uploadFile, setIsSubmitting, null, range);
         },
       },
       {

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

@@ -79,7 +79,7 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
     tabIndex,
   } = props;
 
-  const editor = useEditor({
+  const editorVal = useEditor({
     onChange,
     cancelUploadImage,
     debouncedUpdatesEnabled,
@@ -101,8 +101,10 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
     customClassName,
   });
 
-  if (!editor) return null;
+  if (!editorVal) return null;
 
+  const { editor } = editorVal;
+  if (!editor) return null;
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">

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

@@ -80,7 +80,7 @@ const RichTextEditor = ({
     setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
   };
 
-  const editor = useEditor({
+  const editorVal = useEditor({
     onChange,
     debouncedUpdatesEnabled,
     setIsSubmitting,
@@ -107,6 +107,9 @@ const RichTextEditor = ({
   //   if (editor && initialValue && editor.getHTML() != initialValue) editor.commands.setContent(initialValue);
   // }, [editor, initialValue]);
   //
+  if (!editorVal) return null;
+
+  const { editor } = editorVal;
   if (!editor) return null;
 
   return (