@ones-editor/editor 2.1.1-beta.46 → 2.1.1-beta.49

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { OnesEditor, DocObject, OnesEditorDoc } from '../@ones-editor/core';
 import * as OnesEditorIcons from '../@ones-editor/ui-base/src/icons';
 import { OnesEditorVersionsDialog, VersionDialogOptions } from '../@ones-editor/versions';
 import { CalloutQuickMenuItemFilter } from '../@ones-editor/callout-block';
+import { MobileCommandHandler } from '../@ones-editor/mobile-helper';
 import { LayoutQuickMenuItemFilter, isLayoutBlock } from '../@ones-editor/layout-block';
 import ShareDBDocVersionsProvider from './versions/versions-provider';
 import { CreateLocalEditorOptions, CreateOnesEditorOptions } from './types';
@@ -32,7 +33,7 @@ export { resetListStart, getListAllNextBrothers, toMindmap, Mindmap } from '../@
 export * from '../@ones-editor/exclusive-block';
 export * from '../@ones-editor/templates';
 export * from 'tiny-typed-emitter';
-export { ShareDBDocVersionsProvider, OnesEditorIcons, isLayoutBlock, LayoutQuickMenuItemFilter, CalloutQuickMenuItemFilter };
+export { ShareDBDocVersionsProvider, OnesEditorIcons, isLayoutBlock, LayoutQuickMenuItemFilter, CalloutQuickMenuItemFilter, MobileCommandHandler };
 export type { FileBoxData, FileEmbedData } from '../@ones-editor/file';
 export { type DocListBlock } from '../@ones-editor/list-block';
 export declare function createOnesEditor(root: HTMLElement, options: CreateOnesEditorOptions): Promise<OnesEditor>;

package/dist/index.js

@@ -6322,7 +6322,7 @@ div[data-command-bar-id=mobile-bottom-menu] .mobile-menu-wrap.editor-mention .co
 .command-item[data-id=preset-1] {
   background-color: #fff0d9 !important;
 }.command-m-bar {
-  position: sticky;
+  position: fixed;
   z-index: 111;
   bottom: 0;
   height: 40px;
@@ -78992,7 +78992,6 @@ ${content}
       removeClass(this.endGripper, "active");
     }
   }
-  const mobile = "";
   class InsertMenuProvider extends ProxyProvider {
     constructor(editor) {
       super();
@@ -79295,40 +79294,62 @@ ${content}
       this.mobileToolbar.destroy();
     }
   }
+  class ActiveElementObserver {
+    constructor(options) {
+      __publicField(this, "handleFocusIn", (event) => {
+        if (this.isFormElement(event.target)) {
+          this.options.onFocused();
+        }
+      });
+      __publicField(this, "handleFocusOut", (event) => {
+        if (this.isFormElement(event.target)) {
+          this.options.onBlurred();
+        }
+      });
+      this.options = options;
+      document.addEventListener("focusin", this.handleFocusIn);
+      document.addEventListener("focusout", this.handleFocusOut);
+    }
+    isFormElement(element) {
+      return element.tagName === "INPUT" || element.tagName === "TEXTAREA";
+    }
+    destroy() {
+      document.removeEventListener("focusin", this.handleFocusIn);
+      document.removeEventListener("focusout", this.handleFocusOut);
+    }
+  }
+  const mobile = "";
   class MobileCommandHandler {
     constructor(editor) {
       __publicField(this, "commandBar");
+      __publicField(this, "observer");
       __publicField(this, "showKeyboard", false);
-      __publicField(this, "initViewportHeight", window.visualViewport.height);
-      __publicField(this, "toggle", () => {
-        if (this.isKeyboardShow) {
-          const offsetHeight = Math.max(document.body.clientHeight - this.virtualViewportHeight - document.documentElement.scrollTop - this.virtualViewportOffsetTop, 0);
-          this.commandBar.bar.style.bottom = `${offsetHeight}px`;
-        } else {
-          this.commandBar.bar.style.bottom = "0px";
-        }
-      });
-      __publicField(this, "handleViewportScroll", () => {
-        this.setDebugInfo();
-        this.toggle();
-      });
+      __publicField(this, "initViewportHeight", this.window.visualViewport.height);
+      __publicField(this, "toggle", debounce__default.default(() => {
+        const offsetHeight = Math.max(this.clientHeight - this.virtualViewportHeight, 0);
+        this.commandBar.bar.style.bottom = `${offsetHeight}px`;
+      }, 100));
       __publicField(this, "handleFocusIn", () => {
         if (!this.showKeyboard) {
           this.showKeyboard = true;
         }
+        this.setDebugInfo();
+        this.toggle();
       });
-      __publicField(this, "handleFocusOut", (event) => {
+      __publicField(this, "handleFocusOut", () => {
         if (this.showKeyboard) {
           this.showKeyboard = false;
         }
+        this.setDebugInfo();
+        this.toggle();
       });
-      var _a, _b;
       this.editor = editor;
       this.commandBar = new MobileToolbarHandler(editor, document.body);
-      document.addEventListener("focusin", this.handleFocusIn);
-      document.addEventListener("focusout", this.handleFocusOut);
-      (_a = window == null ? void 0 : window.visualViewport) == null ? void 0 : _a.addEventListener("scroll", this.handleViewportScroll);
-      (_b = window == null ? void 0 : window.visualViewport) == null ? void 0 : _b.addEventListener("resize", this.handleViewportScroll);
+      this.observer = new ActiveElementObserver({
+        onFocused: this.handleFocusIn,
+        onBlurred: this.handleFocusOut
+      });
+      this.toggle();
       setTimeout(() => {
         const container = this.commandBar.bar.firstChild;
         if (container.scrollWidth > container.clientWidth) {
@@ -79339,24 +79360,31 @@ ${content}
       }, 500);
     }
     destroy() {
-      var _a, _b;
-      document.removeEventListener("focusin", this.handleFocusIn);
-      document.removeEventListener("focusout", this.handleFocusOut);
-      (_a = window == null ? void 0 : window.visualViewport) == null ? void 0 : _a.removeEventListener("scroll", this.handleViewportScroll);
-      (_b = window == null ? void 0 : window.visualViewport) == null ? void 0 : _b.removeEventListener("resize", this.handleViewportScroll);
+      this.observer.destroy();
+      this.commandBar.destroy();
     }
     get isKeyboardShow() {
       const isKeyboardShow = this.virtualViewportHeight < this.initViewportHeight;
       return isKeyboardShow;
     }
     get virtualViewportHeight() {
-      const virtualViewportHeight = window.visualViewport.height;
+      const virtualViewportHeight = this.window.visualViewport.height;
       return virtualViewportHeight;
     }
+    get clientHeight() {
+      const clientHeight = this.window.document.body.clientHeight;
+      return clientHeight;
+    }
     get virtualViewportOffsetTop() {
-      const virtualViewportOffsetTop = window.visualViewport.offsetTop;
+      const virtualViewportOffsetTop = this.window.visualViewport.offsetTop;
       return virtualViewportOffsetTop;
     }
+    get window() {
+      if (window.parent) {
+        return window.parent;
+      }
+      return window;
+    }
     setDebugInfo() {
       setInterval(() => {
         const visualViewport = document.querySelector("#visualViewport");
@@ -79364,18 +79392,18 @@ ${content}
         const clientHeight = document.querySelector("#clientHeight");
         const bottom = document.querySelector("#bottom");
         visualViewport.innerText = JSON.stringify({
-          height: window.visualViewport.height,
-          offsetTop: window.visualViewport.offsetTop,
-          scale: window.visualViewport.scale,
-          pageTop: window.visualViewport.pageTop,
-          onscroll: window.visualViewport.onscroll
+          height: this.window.visualViewport.height,
+          offsetTop: this.window.visualViewport.offsetTop,
+          scale: this.window.visualViewport.scale,
+          pageTop: this.window.visualViewport.pageTop,
+          onscroll: this.window.visualViewport.onscroll
         });
         scrollTop.innerText = JSON.stringify(document.documentElement.scrollTop);
-        clientHeight.innerText = `${JSON.stringify(document.body.clientHeight)} , offset: ${document.body.offsetTop}`;
+        clientHeight.innerText = `${JSON.stringify(this.clientHeight)} , offset: ${Math.max(this.clientHeight - this.virtualViewportHeight, 0)}`;
         const bottomOffset = this.commandBar.bar.style.bottom;
         bottom.innerText = JSON.stringify(bottomOffset);
         const d = document.querySelector("#debug");
-        d.style.top = `${window.visualViewport.offsetTop}px`;
+        d.style.top = `${this.window.visualViewport.offsetTop}px`;
       }, 1e3);
     }
   }
@@ -85778,7 +85806,6 @@ ${data2.flowchartText}
       editor.addCustom("editor-tooltip", () => new OnesEditorTooltip(editor));
     } else {
       editor.addCustom("mobile-helper", () => new OnesEditorMobileHelper(editor));
-      editor.addCustom("mobile-command", () => new MobileCommandHandler(editor));
     }
     editor.addListener("clickLink", (editor2, event, link2) => {
       var _a2;
@@ -85819,7 +85846,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.1-beta.46";
+    editor.version = "2.1.1-beta.49";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -85890,7 +85917,6 @@ ${data2.flowchartText}
       (_i = editor.findCustom("editor-block-menu")) == null ? void 0 : _i.addFilter("layout-quick-menu-filter", LayoutQuickMenuItemFilter.init(editor));
     } else {
       editor.addCustom("mobile-helper", () => new OnesEditorMobileHelper(editor));
-      editor.addCustom("mobile-command", () => new MobileCommandHandler(editor));
     }
     editor.addCustom("image-paste-handler", () => new ImagePasteHandler(editor));
     if (enableComments) {
@@ -85918,7 +85944,7 @@ ${data2.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.1.1-beta.46";
+    editor.version = "2.1.1-beta.49";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -131723,6 +131749,7 @@ ${data2.flowchartText}
   exports2.MarkdownInputHandler = MarkdownInputHandler;
   exports2.MaxUserError = MaxUserError;
   exports2.Mindmap = Mindmap;
+  exports2.MobileCommandHandler = MobileCommandHandler;
   exports2.MobileLinkProvider = MobileLinkProvider;
   exports2.OnesEditorAutoSuggest = OnesEditorAutoSuggest;
   exports2.OnesEditorCustomDataWrapper = OnesEditorCustomDataWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ones-editor/editor",
-  "version": "2.1.1-beta.46",
+  "version": "2.1.1-beta.49",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",