@ones-editor/editor 2.2.8-beta.12 → 2.2.8-beta.13

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

@@ -16,7 +16,7 @@ export default abstract class CommandBar extends TypedEmitter<CommandBarEvents>
     constructor(items: CommandItem[], closeable?: Closeable, options?: CommandBarOptions);
     close(reason: CloseReason): void;
     click(item: CommandItem, target: HTMLElement): void;
-    createPopperOptions(): Partial<import("@popperjs/core").Options>;
+    createPopperOptions(flip?: boolean): Partial<import("@popperjs/core").Options>;
     destroy(): void;
     abstract readonly isVisible: boolean;
     get isSubCommandBar(): boolean;

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

@@ -67,6 +67,7 @@ export interface CommandBarOptions {
     padding?: number;
     beforeClose?: (event?: MouseEvent | TouchEvent) => boolean;
     showName?: boolean;
+    maxWidth?: number | string;
 }
 export type CreateManualCommandBarFunction = (parentItem: CommandItem, closeable: Closeable, options?: CommandBarOptions) => AbstractManualCommandBar;
 export type PopoverOptions = {

package/dist/index.js

@@ -879,8 +879,7 @@ div.tippy-box button {
   overflow-y: auto;
 }
 .editor-command-bar.toolbar {
-  max-width: 90vw;
-  overflow-x: auto;
+  width: max-content;
 }
 .editor-command-bar.fixed.mobile, .editor-command-bar.toolbar.mobile {
   gap: 16px;
@@ -40117,44 +40116,54 @@ ${codeText}
     click(item, target) {
       this.emit("click", this, item, target);
     }
-    createPopperOptions() {
-      var _a, _b, _c;
+    createPopperOptions(flip = false) {
+      var _a, _b, _c, _d;
       const popperOptions = { modifiers: [] };
       const overflowBoundary = this.options.overflowBoundary;
       const padding = this.options.padding;
       if (overflowBoundary) {
-        (_a = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _a.push({
-          name: "customHide",
-          enabled: true,
-          phase: "main",
-          fn: ({ state }) => {
-            const popper = state.elements.popper;
-            const popperRect = popper.getBoundingClientRect();
-            const overflowBoundaryRect = overflowBoundary.getBoundingClientRect();
-            const topCheck = popperRect.top < overflowBoundaryRect.top;
-            const bottomCheck = popperRect.bottom > overflowBoundaryRect.bottom;
-            const leftCheck = popperRect.left < overflowBoundaryRect.left;
-            const rightCheck = popperRect.right > overflowBoundaryRect.right;
-            if (topCheck || bottomCheck || leftCheck || rightCheck) {
-              popper.setAttribute("data-tippy-hidden", "");
-            } else {
-              popper.removeAttribute("data-tippy-hidden");
+        if (flip) {
+          (_a = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _a.push({
+            name: "flip",
+            options: {
+              boundary: overflowBoundary,
+              fallbackPlacements: ["top", "bottom"]
             }
-          }
-        });
+          });
+        } else {
+          (_b = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _b.push({
+            name: "hide",
+            enabled: true,
+            phase: "main",
+            fn: debounce__default.default(({ state }) => {
+              const popper = state.elements.popper;
+              const popperRect = popper.getBoundingClientRect();
+              const overflowBoundaryRect = overflowBoundary.getBoundingClientRect();
+              const topCheck = popperRect.top < overflowBoundaryRect.top;
+              const bottomCheck = popperRect.bottom > overflowBoundaryRect.bottom;
+              const leftCheck = popperRect.left < overflowBoundaryRect.left;
+              const rightCheck = popperRect.right > overflowBoundaryRect.right;
+              if (topCheck || bottomCheck || leftCheck || rightCheck) {
+                popper.setAttribute("data-tippy-hidden", "");
+              } else {
+                popper.removeAttribute("data-tippy-hidden");
+              }
+            }, 10)
+          });
+          (_c = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _c.push({
+            name: "flip",
+            enabled: false
+          });
+        }
       }
       if (padding) {
-        (_b = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _b.push({
+        (_d = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _d.push({
           name: "preventOverflow",
           options: {
             padding
           }
         });
       }
-      (_c = popperOptions == null ? void 0 : popperOptions.modifiers) == null ? void 0 : _c.push({
-        name: "flip",
-        enabled: false
-      });
       return popperOptions;
     }
     destroy() {
@@ -40518,7 +40527,7 @@ ${codeText}
       });
     }
     manualShow(target, options) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (this.isVisible) {
         return;
       }
@@ -40533,15 +40542,15 @@ ${codeText}
         triggerTarget: null,
         hideOnClick: false,
         placement: (_a = options == null ? void 0 : options.placement) != null ? _a : "bottom-start",
-        maxWidth: 650,
-        arrow: (_b = options == null ? void 0 : options.arrow) != null ? _b : this.options.tippyArrow,
+        maxWidth: (_b = this.options.maxWidth) != null ? _b : 650,
+        arrow: (_c = options == null ? void 0 : options.arrow) != null ? _c : this.options.tippyArrow,
         appendTo: document.body,
         onShow: this.handleShow,
         onHidden: this.handleHidden,
         onShown: this.handleShown,
         theme: options == null ? void 0 : options.theme,
         getReferenceClientRect: options == null ? void 0 : options.getReferenceClientRect,
-        offset: (_c = options == null ? void 0 : options.offset) != null ? _c : [0, 0],
+        offset: (_d = options == null ? void 0 : options.offset) != null ? _d : [0, 0],
         popperOptions: this.createPopperOptions()
       });
       if (options == null ? void 0 : options.point) {
@@ -41028,6 +41037,7 @@ ${codeText}
       super(items, closeable, {
         itemElementTag: "button",
         tippyArrow: false,
+        maxWidth: clientType.isMobile ? "90vw" : "max-content",
         ...options
       });
     }
@@ -41292,7 +41302,7 @@ ${codeText}
           theme: options == null ? void 0 : options.theme,
           getReferenceClientRect: options == null ? void 0 : options.getReferenceClientRect,
           offset: (_c = options == null ? void 0 : options.offset) != null ? _c : [0, 0],
-          popperOptions: this.createPopperOptions()
+          popperOptions: this.createPopperOptions(true)
         });
         this.clearSelectedItem();
         document.addEventListener("keydown", this.handleDocumentKeydown);
@@ -68688,7 +68698,7 @@ ${codeText}
     }
     commands(editor, blockElement, child) {
       var _a;
-      if (editor.readonly) {
+      if (editor.readonly || clientType.isMobile) {
         return void 0;
       }
       const data2 = getBlockId(blockElement);
@@ -88378,7 +88388,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.2.8-beta.12";
+    editor.version = "2.2.8-beta.13";
     return editor;
   }
   function isDoc(doc2) {
@@ -88473,7 +88483,7 @@ ${data2.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.2.8-beta.12";
+    editor.version = "2.2.8-beta.13";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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