Revert "Use Tiptap mobile editor inside workspace"

This reverts commit b48b0c68d6.

apps/web/src/components/EditorPane.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useRef, useState, useEffect, useCallback, useMemo, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
+import { useRef, useState, useEffect, useCallback, useMemo, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
 import { useQueryClient, useMutation } from "@tanstack/react-query";
 import { NodeViewWrapper, ReactNodeViewRenderer, useEditor, EditorContent, type Editor, type NodeViewProps } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -50,6 +50,7 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@
 import { EditorToolbar } from "./EditorToolbar";
 import { RevisionHistoryDialog } from "./dialogs/RevisionHistoryDialog";
 import { api } from "@/lib/api";
+import { openStandaloneMobileEditor } from "@/lib/mobile-editor";
 import { cn, formatDateTime, parseTagsText } from "@/lib/utils";
 import { docToMarkdown, markdownToDoc, type Notebook, type MemoDetail, type TiptapDoc } from "@edgeever/shared";
 import { compressImageForUpload } from "@/lib/image-compression";
@@ -69,10 +70,6 @@ const MIN_IMAGE_WIDTH_PERCENT = 25;
 const MAX_IMAGE_WIDTH_PERCENT = 100;
 const IMAGE_WIDTH_PRESETS = [35, 50, 72, 100];
 
-const MobileStandaloneTiptapEditor = lazy(() =>
-  import("./MobileStandaloneTiptapEditor").then((module) => ({ default: module.MobileStandaloneTiptapEditor }))
-);
-
 type NoteSearchMatch = {
   from: number;
   to: number;
@@ -949,6 +946,12 @@ export const EditorPane = (props: EditorPaneProps) => {
       (mobileDefaultEditRequested || mobileNativeEditMemoId === props.memo.id)
   );
 
+  useEffect(() => {
+    if (isMobileViewport && mobileDefaultEditRequested && props.memo?.id) {
+      openStandaloneMobileEditor(props.memo.id);
+    }
+  }, [isMobileViewport, mobileDefaultEditRequested, props.memo?.id]);
+
   useEffect(() => {
     const mediaQuery = window.matchMedia(MOBILE_EDITOR_QUERY);
     const updateMobileViewport = () => setIsMobileViewport(mediaQuery.matches);
@@ -963,21 +966,11 @@ export const EditorPane = (props: EditorPaneProps) => {
     setMobileNativeEditMemoId(null);
   }, [props.memo?.id]);
 
-  if (mobileNativeEditingActive && props.memo) {
-    const activeMemoId = props.memo.id;
-
+  if (mobileNativeEditingActive) {
     return (
-      <Suspense fallback={<div className="flex h-full min-h-0 items-center justify-center bg-white text-sm font-medium text-slate-400">加载编辑器</div>}>
-        <MobileStandaloneTiptapEditor
-          memoId={activeMemoId}
-          onSaved={props.onSaved}
-          onLeave={() => {
-            props.onMobileDefaultEditConsumed();
-            setMobileNativeEditMemoId(null);
-            props.onBackToList();
-          }}
-        />
-      </Suspense>
+      <div className="flex h-full min-h-0 items-center justify-center bg-white text-sm font-medium text-slate-400">
+        打开编辑器
+      </div>
     );
   }
 
@@ -988,6 +981,7 @@ export const EditorPane = (props: EditorPaneProps) => {
       onRequestMobileNativeEdit={() => {
         if (props.memo?.id && !readOnly) {
           setMobileNativeEditMemoId(props.memo.id);
+          openStandaloneMobileEditor(props.memo.id);
         }
       }}
     />

apps/web/src/components/MobileStandaloneTiptapEditor.tsx

@@ -4,7 +4,6 @@ import StarterKit from "@tiptap/starter-kit";
 import Image from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
 import { docToMarkdown, emptyDoc, type MemoDetail, type Notebook, type TiptapDoc } from "@edgeever/shared";
-import "@/styles/mobile-markdown-editor.css";
 import {
   MobileEditorFallback,
   MobileEditorHeader,
@@ -41,14 +40,12 @@ type MobileStandaloneTiptapEditorProps = {
   memoId?: string | null;
   returnTo?: string;
   onLeave?: () => void;
-  onSaved?: (memo: MemoDetail) => void | Promise<void>;
 };
 
 export const MobileStandaloneTiptapEditor = ({
   memoId: memoIdProp,
   returnTo: returnToProp,
   onLeave,
-  onSaved,
 }: MobileStandaloneTiptapEditorProps = {}) => {
   const params = useMemo(() => getMobileEditorParams(), []);
   const memoId = memoIdProp ?? params.get("memoId");
@@ -239,7 +236,6 @@ export const MobileStandaloneTiptapEditor = ({
 
         memoRef.current = data.memo;
         setMemo(data.memo);
-        await onSaved?.(data.memo);
         lastSavedSnapshotRef.current = currentSnapshot();
         dirtyRef.current = false;
         if (draftKey) {
@@ -266,7 +262,7 @@ export const MobileStandaloneTiptapEditor = ({
         currentSavePromiseRef.current = null;
       }
     },
-    [currentSnapshot, draftKey, onSaved, persistLocalDraft, setSaveStateStable]
+    [currentSnapshot, draftKey, persistLocalDraft, setSaveStateStable]
   );
 
   useEffect(() => {
@@ -361,7 +357,6 @@ export const MobileStandaloneTiptapEditor = ({
 
       memoRef.current = data.memo;
       setMemo(data.memo);
-      await onSaved?.(data.memo);
       setSaveStateStable("saved");
       window.setTimeout(() => {
         if (!dirtyRef.current && !savingRef.current && !leavingRef.current) {

apps/web/src/components/WorkspaceApp.tsx

@@ -27,6 +27,7 @@ import {
 import { MemoListPane, MemoSelectionActionBar } from "./MemoListPane";
 import { AppConfirmDialog, MemoDeleteConfirmDialog, NotebookNameDialog } from "./dialogs/ConfirmDialogs";
 import { api } from "@/lib/api";
+import { openStandaloneMobileEditor } from "@/lib/mobile-editor";
 import { cn } from "@/lib/utils";
 import { createExcerpt, docToText, type Notebook, type AuthUser, type MemoSummary, type MemoDetail } from "@edgeever/shared";
 import type {
@@ -1258,6 +1259,10 @@ export const WorkspaceApp = ({
       setCreatedMemoEditId(data.memo.id);
       setSelectedMemoId(data.memo.id);
       setActivePane("editor");
+
+      if (!isDesktopViewport()) {
+        openStandaloneMobileEditor(data.memo.id);
+      }
     },
   });
 

apps/web/src/mobile-edit.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { MobileStandaloneTiptapEditor } from "@/components/MobileStandaloneTiptapEditor";
+import "./styles/mobile-markdown-editor.css";
 
 const root = document.getElementById("mobile-editor-root");