fix: 🐛 scroll view when update plugin

healthwhale · Jul 22, 2022 · 97a5029 · 97a5029
1 parent 824e896
commit 97a5029
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 15 deletions.
diff --git a/packages/plugin-menu/src/index.ts b/packages/plugin-menu/src/index.ts
@@ -7,7 +7,7 @@ import { AtomList, createPlugin } from '@milkdown/utils';
 
 import { Config, defaultConfig, SelectParent } from './default-config';
 import { Manager } from './manager';
-import { HandleDOM, menubar } from './menubar';
+import { HandleDOM, initWrapper, menubar } from './menubar';
 
 export const menuKey = new PluginKey('MILKDOWN_MENU');
 
@@ -23,8 +23,10 @@ export const menuPlugin = createPlugin<string, Options>((utils, options) => {
     const domHandler = options?.domHandler;
 
     let restoreDOM: (() => void) | null = null;
+    let destoryDOM: (() => void) | null = null;
     let menu: HTMLDivElement | null = null;
     let manager: Manager | null = null;
+    let isFirst = true;
 
     const initIfNecessary = (ctx: Ctx, editorView: EditorView) => {
         const config: Config = options?.config
@@ -33,17 +35,29 @@ export const menuPlugin = createPlugin<string, Options>((utils, options) => {
                 : options.config
             : defaultConfig;
 
+        if (isFirst) {
+            isFirst = false;
+            initWrapper(ctx, editorView);
+        }
+
         if (!editorView.editable) {
             return;
         }
 
         if (!menu) {
-            const [_menu, _restoreDOM] = menubar(utils, editorView, ctx, domHandler);
+            const [_menu, _restoreDOM, _destoryDOM] = menubar(utils, editorView, ctx, domHandler);
             menu = _menu;
             restoreDOM = () => {
                 _restoreDOM();
                 menu = null;
                 manager = null;
+                restoreDOM = null;
+            };
+            destoryDOM = () => {
+                _destoryDOM();
+                menu = null;
+                manager = null;
+                destoryDOM = null;
             };
         }
 
@@ -72,7 +86,7 @@ export const menuPlugin = createPlugin<string, Options>((utils, options) => {
                             }
                         },
                         destroy: () => {
-                            restoreDOM?.();
+                            destoryDOM?.();
                         },
                     };
                 },

diff --git a/packages/plugin-menu/src/menubar.ts b/packages/plugin-menu/src/menubar.ts
@@ -14,16 +14,12 @@ export type HandleDOMParams = {
 
 export type HandleDOM = (params: HandleDOMParams) => void;
 
-const restore: HandleDOM = ({ milkdownDOM, editorRoot, menu, menuWrapper }) => {
-    editorRoot.appendChild(milkdownDOM);
-    menuWrapper.remove();
+const restore: HandleDOM = ({ menu }) => {
     menu.remove();
 };
 
-const defaultDOMHandler: HandleDOM = ({ menu, menuWrapper, editorRoot, milkdownDOM }) => {
-    menuWrapper.appendChild(menu);
-    editorRoot.replaceChild(menuWrapper, milkdownDOM);
-    menuWrapper.appendChild(milkdownDOM);
+const defaultDOMHandler: HandleDOM = ({ menu, menuWrapper, milkdownDOM }) => {
+    menuWrapper.insertBefore(menu, milkdownDOM);
 };
 
 const getRoot = (root: string | Node | null | undefined) => {
@@ -39,9 +35,42 @@ const getRoot = (root: string | Node | null | undefined) => {
     return root;
 };
 
+let _menuWrapper: HTMLDivElement | null = null;
+export const initWrapper = (ctx: Ctx, view: EditorView) => {
+    if (_menuWrapper !== null) {
+        throw new Error('Repeated calls to menu wrapper initialization');
+    }
+    _menuWrapper = document.createElement('div');
+    _menuWrapper.classList.add('milkdown-menu-wrapper');
+
+    const root = ctx.get(rootCtx);
+
+    const editorDOM = view.dom;
+    const editorRoot = getRoot(root) as HTMLElement;
+    const milkdownDOM = editorDOM.parentElement;
+
+    if (!milkdownDOM) {
+        throw missingRootElement();
+    }
+
+    editorRoot.replaceChild(_menuWrapper, milkdownDOM);
+    _menuWrapper.appendChild(milkdownDOM);
+};
+
+const destory: HandleDOM = ({ menu, menuWrapper, editorRoot, milkdownDOM }) => {
+    editorRoot.appendChild(milkdownDOM);
+    menuWrapper.remove();
+    menu.remove();
+    _menuWrapper = null;
+};
+
+const missingMenuWrapper = () => new Error('Missing menu wrapper, should init menu wrapper first.');
+
 export const menubar = (utils: Utils, view: EditorView, ctx: Ctx, domHandler: HandleDOM = defaultDOMHandler) => {
-    const menuWrapper = document.createElement('div');
-    menuWrapper.classList.add('milkdown-menu-wrapper');
+    if (!_menuWrapper) {
+        throw missingMenuWrapper();
+    }
+
     const menu = document.createElement('div');
     menu.classList.add('milkdown-menu');
 
@@ -95,21 +124,36 @@ export const menubar = (utils: Utils, view: EditorView, ctx: Ctx, domHandler: Ha
 
     domHandler({
         menu,
-        menuWrapper,
+        menuWrapper: _menuWrapper,
         editorDOM,
         editorRoot,
         milkdownDOM,
     });
 
     const restoreDOM = () => {
+        if (!_menuWrapper) {
+            throw missingMenuWrapper();
+        }
         restore({
             menu,
-            menuWrapper,
+            menuWrapper: _menuWrapper,
+            editorDOM,
+            editorRoot,
+            milkdownDOM,
+        });
+    };
+    const destoryDOM = () => {
+        if (!_menuWrapper) {
+            throw missingMenuWrapper();
+        }
+        destory({
+            menu,
+            menuWrapper: _menuWrapper,
             editorDOM,
             editorRoot,
             milkdownDOM,
         });
     };
 
-    return [menu, restoreDOM] as const;
+    return [menu, restoreDOM, destoryDOM] as const;
 };