@ones-editor/editor 2.1.1-beta.76 → 2.1.1-beta.78

package/@ones-editor/ui/src/readonly-toolbar/index.d.ts

@@ -17,7 +17,7 @@ export declare class ReadonlyToolbar implements OnesEditorCustom {
     isInBlock(block: BlockElement, event: MouseEvent): boolean;
     handleButtonClick: (toolbar: AbstractCommandBar, item: CommandItem) => void;
     handleClose: () => void;
-    handleClosing: (bar: unknown, event: MouseEvent) => boolean;
+    handleClosing: (bar: unknown, event: MouseEvent | TouchEvent) => boolean;
     bindEvents(): void;
     unbindEvents(): void;
     handleDocumentMouseDown: (event: MouseEvent) => void;

package/@ones-editor/ui/src/toolbar/toolbar-handler.d.ts

@@ -23,7 +23,7 @@ export default class OnesEditorToolbar implements OnesEditorHoveringBlockFilter,
     isInBlock(block: BlockElement, event: MouseEvent): boolean;
     handleButtonClick: (toolbar: AbstractCommandBar, item: CommandItem) => void;
     handleClose: () => void;
-    handleClosing: (bar: unknown, event: MouseEvent) => boolean;
+    handleClosing: (bar: unknown, event: MouseEvent | TouchEvent) => boolean;
     bindEvents(): void;
     unbindEvents(): void;
     handleDocumentMouseDown: (event: MouseEvent) => void;

package/@ones-editor/ui-base/src/command-bar/command-bar.d.ts

@@ -22,7 +22,7 @@ export default abstract class CommandBar extends TypedEmitter<CommandBarEvents>
     get isSubCommandBar(): boolean;
     updateItems(items: CommandItem[]): void;
     handleDocumentKeydown: (event: KeyboardEvent) => boolean;
-    protected handleDocumentMouseDown: (event: MouseEvent) => void;
+    protected handleDocumentMouseDown: (event: MouseEvent | TouchEvent) => void;
     protected handleHidden: () => void;
     protected handleShown: () => void;
     protected handleShow: () => void;

package/@ones-editor/ui-base/src/command-bar/types.d.ts

@@ -8,7 +8,7 @@ export interface CommandBarEvents {
     'click': (bar: AbstractCommandBar, item: CommandItem, elem: HTMLElement) => void;
     'close': (bar: AbstractCommandBar) => void;
     'selectionChange': (bar: AbstractCommandBar, id: string) => void;
-    'closing': (bar: AbstractCommandBar, event: MouseEvent) => boolean | undefined;
+    'closing': (bar: AbstractCommandBar, event: MouseEvent | TouchEvent) => boolean | undefined;
     'subBarShown': (bar: AbstractCommandBar, subBar: AbstractCommandBar) => void;
 }
 export interface ManualShowCommandBarOptions {

package/@ones-editor/ui-base/src/dialog/manual-close-dialog.d.ts

@@ -20,6 +20,6 @@ export default class ManualCloseDialog extends ManualCommandBar {
         getReferenceClientRect?: GetReferenceClientRect | null | undefined;
     }): void;
     get dialogContent(): HTMLElement | ((item: CommandItem) => HTMLElement);
-    handleDocumentMouseDown: (event: MouseEvent) => void;
+    handleDocumentMouseDown: () => void;
     static getCommandItems(content: HTMLElement, options?: ManualCloseDialogOptions): CommandItem[];
 }

package/dist/index.js

@@ -2641,6 +2641,12 @@ div.editor-root div.editor-content div[data-type=editor-container] div[data-type
 div.editor-root div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] > span.math-box .mathjax-tex-text.mathjax-error {
   color: var(--color-0);
 }
+div.editor-root div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] img.mathjax {
+  -webkit-touch-callout: none;
+}
+div.editor-root.readonly div.editor-content div[data-type=editor-container] div[data-type=editor-block] div[data-type=block-content] img.mathjax {
+  -webkit-touch-callout: default;
+}
 div.editor-root div.editor-content div[data-type=editor-container] .embed-block.selected[data-embed-type=math] > div[data-type=block-content].mathjax-overflow::before {
   width: var(--mathjax-width, "100%");
 }
@@ -8934,11 +8940,12 @@ var __publicField = (obj, key, value) => {
     return mouseEvent;
   }
   function ensureIsMobileEvent(events2) {
-    return events2 instanceof TouchEvent;
+    return events2.type.startsWith("touch");
   }
-  function bindDbClick(elem, handler) {
+  function bindDbClick(editor, elem, handler) {
     let clickCount = 0;
     function simulateDoubleClick(event) {
+      editor.focus();
       clickCount++;
       if (clickCount === 1) {
         setTimeout(() => {
@@ -8954,25 +8961,13 @@ var __publicField = (obj, key, value) => {
       elem.removeEventListener("click", simulateDoubleClick);
     };
   }
-  const getVisualViewportHeightOffset = () => {
-    var _a, _b;
-    if (!clientType.isMobile) {
-      return 0;
-    }
-    let topWindow = window;
-    if (window.top) {
-      topWindow = window.top;
-    }
-    const visualViewportHeight = (_b = (_a = topWindow.visualViewport) == null ? void 0 : _a.height) != null ? _b : topWindow.innerHeight || topWindow.document.documentElement.clientHeight;
-    return Math.max(topWindow.innerHeight - visualViewportHeight, 40);
-  };
   class ScrollDomElement {
     constructor(element) {
       __publicField(this, "element");
       this.element = element;
     }
     getClientHeight() {
-      return this.element.clientHeight - getVisualViewportHeightOffset();
+      return this.element.clientHeight;
     }
     getHorizontalScroll() {
       return this.element.scrollLeft;
@@ -9072,7 +9067,7 @@ var __publicField = (obj, key, value) => {
     verticalOffset: 0
   };
   async function animateScrollTo(numberOrCoordsOrElement, userOptions = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (!WINDOW_EXISTS) {
       return new Promise((resolve) => {
         resolve(false);
@@ -9139,10 +9134,11 @@ var __publicField = (obj, key, value) => {
     const maxVerticalScroll = elementToScroll.getMaxVerticalScroll();
     const initialVerticalScroll = elementToScroll.getVerticalScroll();
     if (!options.verticalOffset) {
+      const clientHeight = (_d = (_c = options.getClientHeight) == null ? void 0 : _c.call(options)) != null ? _d : elementToScroll.getClientHeight();
       if (initialVerticalScroll < y) {
-        y -= elementToScroll.getClientHeight() * 3 / 4;
+        y -= clientHeight * 3 / 4;
       } else {
-        y -= elementToScroll.getClientHeight() * 1 / 4;
+        y -= clientHeight * 1 / 4;
       }
     }
     if (y > maxVerticalScroll) {
@@ -11344,7 +11340,7 @@ var __publicField = (obj, key, value) => {
         container.onmousedown = this.handleMouseDown;
       }
       if (clientType.isIOS) {
-        this.dbClickRef = bindDbClick(container, this.handleDblClick);
+        this.dbClickRef = bindDbClick(this.editor, container, this.handleDblClick);
       } else {
         container.ondblclick = this.handleDblClick;
       }
@@ -25043,10 +25039,9 @@ var __publicField = (obj, key, value) => {
     const x1 = rect.x < 0 ? 0 : rect.x;
     const y1 = rect.y < 0 ? 0 : rect.y;
     const x2 = rect.right > window.innerWidth ? window.innerWidth : rect.right;
-    let y2 = rect.bottom > window.innerHeight ? window.innerHeight : rect.bottom;
-    if (clientType.isIOS) {
-      y2 -= getVisualViewportHeightOffset();
-    }
+    const mobileClient = editor.options.componentsOptions.mobile;
+    const innerHeight = clientType.isMobile ? mobileClient.getViewPortHeight() : window.innerHeight;
+    const y2 = rect.bottom > innerHeight ? innerHeight : rect.bottom;
     return new DOMRect(x1, y1, x2 - x1, y2 - y1);
   }
   function isBlockPositionVisible(editor, pos) {
@@ -25102,10 +25097,12 @@ var __publicField = (obj, key, value) => {
           disableHorizontal: false
         });
       }
+      const mobileClient = editor.options.componentsOptions.mobile;
       animateScrollTo(target, {
         elementToScroll: (_a = options.elementToScroll) != null ? _a : getScrollContainer$1(target),
         disableHorizontal: true,
-        verticalOffset: options == null ? void 0 : options.verticalOffset
+        verticalOffset: options == null ? void 0 : options.verticalOffset,
+        getClientHeight: mobileClient && clientType.isMobile ? mobileClient.getViewPortHeight : void 0
       });
     } else if (target.scrollIntoView) {
       target.scrollIntoView({
@@ -40160,7 +40157,11 @@ ${codeText}
       });
       parent.appendChild(this.content);
       document.addEventListener("keydown", this.handleDocumentKeydown);
-      document.addEventListener("mousedown", this.handleDocumentMouseDown);
+      if (clientType.isMobile) {
+        document.addEventListener("touchend", this.handleDocumentMouseDown);
+      } else {
+        document.addEventListener("mousedown", this.handleDocumentMouseDown);
+      }
     }
     initCommandBarElement(elem) {
       addClass(elem, "toolbar", "fixed");
@@ -40183,6 +40184,7 @@ ${codeText}
       super.destroy();
       document.removeEventListener("keydown", this.handleDocumentKeydown);
       document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+      document.removeEventListener("touchend", this.handleDocumentMouseDown);
     }
     getCommandBarRoot() {
       return this.content.parentElement;
@@ -40202,7 +40204,7 @@ ${codeText}
         disablePageScroll: true,
         ...options
       });
-      __publicField(this, "handleDocumentMouseDown", (event) => {
+      __publicField(this, "handleDocumentMouseDown", () => {
       });
     }
     initCommandBarElement(elem) {
@@ -40355,7 +40357,7 @@ ${codeText}
         });
         this.clearSelectedItem();
         document.addEventListener("keydown", this.handleDocumentKeydown);
-        document.addEventListener("mousedown", this.handleDocumentMouseDown);
+        document.addEventListener("touchend", this.handleDocumentMouseDown);
         setTimeout(() => {
           var _a2, _b2;
           const rect = document.body.clientHeight;
@@ -40381,6 +40383,8 @@ ${codeText}
       (_a = this.tippyInstance) == null ? void 0 : _a.destroy();
       this.tippyInstance = null;
       super.destroy();
+      document.removeEventListener("keydown", this.handleDocumentKeydown);
+      document.removeEventListener("touchend", this.handleDocumentMouseDown);
     }
     get isVisible() {
       var _a, _b;
@@ -41954,8 +41958,15 @@ ${codeText}
     if (popperRect) {
       const bottom = activeRect.reduce((acc, cur) => acc > cur.bottom ? acc : cur.bottom, 0);
       if (bottom > popperRect.top) {
-        const scrollContainer = editor.scrollContainer;
-        scrollContainer.scrollTop += bottom - popperRect.top + 20;
+        const scrollContainer2 = editor.scrollContainer;
+        scrollContainer2.scrollTop += bottom - popperRect.top + 20;
+        return;
+      }
+      const top = activeRect.reduce((acc, cur) => acc < cur.top ? acc : cur.top, Infinity);
+      const scrollContainer = editor.scrollContainer;
+      const containerRect = scrollContainer.getBoundingClientRect();
+      if (top < containerRect.top) {
+        scrollContainer.scrollTop -= containerRect.top - top + 20;
       }
     }
   };
@@ -49782,7 +49793,7 @@ ${codeText}
       __publicField(this, "onShow", () => {
         setTimeout(() => {
           var _a;
-          (_a = this.form.linkText) == null ? void 0 : _a.getField().focus();
+          (_a = this.form.linkUrl) == null ? void 0 : _a.getField().focus();
         }, 400);
       });
       __publicField(this, "showPopup", (options) => {
@@ -50045,7 +50056,7 @@ ${codeText}
       return [
         {
           id: "insert-link",
-          name: clientType.isMobile ? i18n$1.t("link.title") : i18n$1.t("quickMenu.inlineBox.link"),
+          name: i18n$1.t("quickMenu.inlineBox.link"),
           icon: LinkIcon,
           states: [],
           subText: getShortcutById("insert-link")
@@ -59120,7 +59131,13 @@ $$${mathData.mathjaxText}$$
           return this.editProvider.getAvailableCommands(editor, block, range, { child });
         }
         if (((_b = this.options) == null ? void 0 : _b.linkMode) === "insert" && !child) {
-          return this.insertProvider.getAvailableCommands(editor, block, range, { ...params, isFilter: true });
+          const commands = this.insertProvider.getAvailableCommands(editor, block, range, { ...params, isFilter: true });
+          commands.forEach((command) => {
+            if (command.id === "insert-link") {
+              command.name = i18n$1.t("link.title");
+            }
+          });
+          return commands;
         }
         return [];
       });
@@ -62400,6 +62417,7 @@ ${codeText}
       return editor.addCustom("markdown-converter-interceptors", () => new MarkdownConverterInterceptors());
     }
   }
+  const DISABLE_MOBILE_CONVERTERS = ["mermaid", "flowchart", "plantuml"];
   const ENTER_CONVERTER = {
     mermaid: {
       blockType: "embed",
@@ -62526,6 +62544,9 @@ ${codeText}
     const block = editor.getBlockByIndex(containerId, blockIndex);
     const text2 = toPlainText(splitText(editor.getBlockText(block), offset).left);
     const converters = type === "enter" ? ENTER_CONVERTER : SPACE_CONVERTER;
+    DISABLE_MOBILE_CONVERTERS.forEach((key) => {
+      delete converters[key];
+    });
     for (const [, converter] of Object.entries(converters)) {
       if (!text2.match(converter.reg))
         continue;
@@ -69753,7 +69774,8 @@ ${codeText}
     return editor.undoManager.runInGroup(() => {
       var _a, _b;
       const item = options.item;
-      const cols = (_a = item.colCount) != null ? _a : 5;
+      const defaultColCount = clientType.isMobile ? 3 : 5;
+      const cols = (_a = item.colCount) != null ? _a : defaultColCount;
       const rows = (_b = item.rowCount) != null ? _b : 3;
       const ret = createEmptyTableData(editor, { cols, rows });
       if (!ret) {
@@ -78467,6 +78489,8 @@ ${content}
       __publicField(this, "createMobileCommandItem", (items) => {
         const mobileWrap = this.getMobileCommandElement();
         const content = mobileWrap.querySelector(".mobile-item-content");
+        const input2 = mobileWrap.querySelector("input");
+        input2.value = "";
         this.createMobileItems(content, items, "");
         setTimeout(() => {
           const clientHeight = this.editor.scrollContainer.clientHeight;
@@ -80071,26 +80095,29 @@ ${content}
     constructor(editor) {
       __publicField(this, "commandBar");
       __publicField(this, "observer");
+      __publicField(this, "timer");
+      __publicField(this, "mobileClient");
       __publicField(this, "toggleDelay", clientType.isSafari ? 800 : 100);
-      __publicField(this, "preHeight", this.virtualViewportHeight);
+      __publicField(this, "preHeight", 0);
       __publicField(this, "layoutBar", debounce__default.default(() => {
-        const offsetHeight = Math.max(this.clientHeight - this.virtualViewportHeight, 0);
-        if (clientType.isIOS) {
-          if (this.preHeight > this.virtualViewportHeight) {
+        var _a, _b, _c, _d, _e;
+        const offsetHeight = (_b = (_a = this.mobileClient) == null ? void 0 : _a.getOffsetHeight()) != null ? _b : 0;
+        if (clientType.isIOS && this.mobileClient) {
+          if (this.preHeight > this.mobileClient.virtualViewportHeight) {
             editorScrollIntoView(this.editor);
           }
         }
         this.commandBar.bar.style.bottom = `${offsetHeight}px`;
-        if (this.preHeight !== this.virtualViewportHeight) {
+        if (this.preHeight !== ((_c = this.mobileClient) == null ? void 0 : _c.virtualViewportHeight)) {
           this.commandBar.layoutSubBar();
         }
-        this.preHeight = this.virtualViewportHeight;
+        this.preHeight = (_e = (_d = this.mobileClient) == null ? void 0 : _d.virtualViewportHeight) != null ? _e : 0;
       }, this.toggleDelay));
       __publicField(this, "handScroll", debounce__default.default(() => {
         const input2 = this.editor.input.getInput();
-        if (input2) {
+        if (input2 && this.mobileClient) {
           const inputRect = input2.getBoundingClientRect();
-          if (inputRect.bottom > this.virtualViewportHeight || inputRect.top < 0) {
+          if (inputRect.bottom > this.mobileClient.virtualViewportHeight || inputRect.top < 0) {
             input2.style.top = `${this.editor.scrollContainer.scrollTop}px`;
           }
         }
@@ -80101,6 +80128,7 @@ ${content}
       __publicField(this, "handleFocusOut", () => {
         this.layoutBar();
       });
+      var _a, _b;
       this.editor = editor;
       this.commandBar = new MobileToolbarHandler(editor, document.body);
       this.observer = new ActiveElementObserver({
@@ -80109,23 +80137,19 @@ ${content}
       });
       this.layoutBar();
       this.editor.scrollContainer.addEventListener("scroll", this.handScroll);
-    }
-    get window() {
-      if (window.top) {
-        return window.top;
+      this.mobileClient = this.editor.options.componentsOptions.mobile;
+      this.preHeight = (_b = (_a = this.mobileClient) == null ? void 0 : _a.virtualViewportHeight) != null ? _b : 0;
+      if (clientType.isAndroid) {
+        this.timer = setInterval(() => {
+          var _a2, _b2;
+          if (((_a2 = this.mobileClient) == null ? void 0 : _a2.virtualViewportHeight) !== this.preHeight || ((_b2 = this.mobileClient) == null ? void 0 : _b2.virtualViewportOffsetTop) !== 0) {
+            this.layoutBar();
+          }
+        }, 1e3);
       }
-      return window;
-    }
-    get virtualViewportHeight() {
-      var _a, _b;
-      const virtualViewportHeight = (_b = (_a = this.window.visualViewport) == null ? void 0 : _a.height) != null ? _b : this.clientHeight;
-      return virtualViewportHeight;
-    }
-    get clientHeight() {
-      const clientHeight = this.window.document.body.clientHeight;
-      return clientHeight;
     }
     destroy() {
+      clearInterval(this.timer);
       this.observer.destroy();
       this.commandBar.destroy();
       this.editor.scrollContainer.removeEventListener("scroll", this.handScroll);
@@ -80213,7 +80237,6 @@ ${content}
           return false;
         }
         if (!range.isSimple()) {
-          this.editor.selection.setRange(range);
           return true;
         }
         const block = this.editor.getBlockById(range.start.blockId);
@@ -86716,7 +86739,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.1-beta.76";
+    editor.version = "2.1.1-beta.78";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -86817,7 +86840,7 @@ ${data2.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.1.1-beta.76";
+    editor.version = "2.1.1-beta.78";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -132983,7 +133006,6 @@ ${data2.flowchartText}
   exports2.getTextOpLength = getTextOpLength;
   exports2.getTextWidth = getTextWidth;
   exports2.getToolbar = getToolbar;
-  exports2.getVisualViewportHeightOffset = getVisualViewportHeightOffset;
   exports2.groupEachCommand = groupEachCommand;
   exports2.handleBlockElementUpdated = handleBlockElementUpdated$1;
   exports2.hasAltOnly = hasAltOnly;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { Embed, Box, i18n, OnesEditor, OnesEditorUser, OnesEditorUserPermission, OnesEditorBlockHook, OnesEditorCommandProvider, LogLevel, Block, ShortcutRecords, OnesEditorBlockRenderer, BuildResourceUrlOptions, UploadResourceOptions, UploadResourceResult } from '../@ones-editor/core';
+import { Embed, Box, i18n, OnesEditor, OnesEditorUser, OnesEditorUserPermission, OnesEditorBlockHook, OnesEditorCommandProvider, LogLevel, Block, ShortcutRecords, OnesEditorBlockRenderer, BuildResourceUrlOptions, UploadResourceOptions, UploadResourceResult, MobileClient } from '../@ones-editor/core';
 import { DrawIoOptions } from '../@ones-editor/drawio-embed';
 import { FlowCharEmbedOptions, MermaidEmbedOptions, PlantumlEmbedOptions } from '../@ones-editor/graph-embed';
 import { ImageOptions } from '../@ones-editor/image-embed';
@@ -42,6 +42,7 @@ export type EditorComponentOptions = {
     mathjax?: MathjaxOptions;
     link?: LinkOptions;
     columns?: EditorConfigLayoutOptions;
+    mobile?: MobileClient;
 };
 export type EditorEvents = {
     onClickLink?: (editor: OnesEditor, event: MouseEvent, link: Element) => void;

package/package.json

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