@ones-editor/editor 2.1.7-beta.35 → 2.1.7-beta.37

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

@@ -39,12 +39,13 @@ export default abstract class CommandBar extends TypedEmitter<CommandBarEvents>
     private handleItemMouseLeave;
     protected handleItemClick: (event: MouseEvent | TouchEvent) => void;
     private showSubCommandBar;
+    getSubBarCreateOptions(item: CommandItem): CommandBarOptions;
     isInCommandBar(target: EventTarget | null): boolean;
     createCommandItem(item: CommandItem): CommandItemElement;
     getItemById(id: string): CommandItem;
     getSelectedItem(): CommandItem | null;
     protected getItemElementId(elem: CommandItemElement): string;
-    protected getItemElementById(id: string): CommandItemElement;
+    getItemElementById(id: string): CommandItemElement;
     protected getParentCommandItemElement(target: EventTarget | null): CommandItemElement | null;
     protected createCommandBarContent(items: CommandItem[]): HTMLElement;
     handleWheel: (e: WheelEvent) => void;

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

@@ -7,6 +7,7 @@ export default class FixedToolbar extends CommandBar {
     protected initCommandBarElement(elem: HTMLElement): void;
     protected initItemElement(item: CommandItem, elem: CommandItemElement): void;
     close(): void;
+    getSubBarCreateOptions: (item: CommandItem) => CommandBarOptions;
     getSubBarOptions: (item: CommandItem) => ManualShowCommandBarOptions;
     destroy(): void;
     protected getCommandBarRoot(): HTMLElement | null;

package/dist/index.js

@@ -913,6 +913,9 @@ div.tippy-box button {
   --separator-color: #e8e8e8;
   --warn-color: #fdf4f4;
 }
+.editor-command-bar.toolbar .command-item.hidden, .editor-command-bar.menu .command-item.hidden {
+  display: none;
+}
 .editor-command-bar.fixed.toolbar {
   box-shadow: none;
 }
@@ -8179,6 +8182,9 @@ div.editor-root.compact.no-heading-collapse.no-block-menu > .editor-content {
 .editor-command-bar.toolbar[data-fixed-toolbar-id=main-toolbar] .command-item[data-button-id=paragraph] .toolbar-item-name-container {
   flex-grow: 1;
   flex-shrink: 0;
+}
+[data-command-bar-id=main-toolbar-more-menu] .editor-command-bar.toolbar .command-item.hidden, [data-command-bar-id=main-toolbar-more-menu] .editor-command-bar.menu .command-item.hidden {
+  display: flex;
 }`)),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -8914,7 +8920,7 @@ var __publicField = (obj, key, value) => {
     return ResizeObserverSPI2;
   }();
   var observers = typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : new MapShim();
-  var ResizeObserver = function() {
+  var ResizeObserver$1 = function() {
     function ResizeObserver2(callback) {
       if (!(this instanceof ResizeObserver2)) {
         throw new TypeError("Cannot call a class as a function.");
@@ -8933,7 +8939,7 @@ var __publicField = (obj, key, value) => {
     "unobserve",
     "disconnect"
   ].forEach(function(method) {
-    ResizeObserver.prototype[method] = function() {
+    ResizeObserver$1.prototype[method] = function() {
       var _a;
       return (_a = observers.get(this))[method].apply(_a, arguments);
     };
@@ -8942,7 +8948,7 @@ var __publicField = (obj, key, value) => {
     if (typeof global$1.ResizeObserver !== "undefined") {
       return global$1.ResizeObserver;
     }
-    return ResizeObserver;
+    return ResizeObserver$1;
   }();
   class AssertError extends Error {
     constructor(message) {
@@ -40311,9 +40317,11 @@ ${codeText}
       if (!elem) {
         return;
       }
-      const subBar = _CommandBar.createSubCommandBar(item, (_d = this.closeable) != null ? _d : this, subMenuId ? {
-        id: subMenuId
-      } : {});
+      const createOptions = {
+        id: subMenuId,
+        ...this.getSubBarCreateOptions(item)
+      };
+      const subBar = _CommandBar.createSubCommandBar(item, (_d = this.closeable) != null ? _d : this, createOptions);
       this.subBar = subBar;
       this.subBar.on("click", (bar2, item2, elem2) => {
         this.emit("click", bar2, item2, elem2);
@@ -40336,6 +40344,11 @@ ${codeText}
       this.subBar.manualShow(elem, this.getSubBarOptions(item));
       addClass(elem, "active");
     }
+    getSubBarCreateOptions(item) {
+      return {
+        id: item.childrenMenuId
+      };
+    }
     isInCommandBar(target) {
       if (!target || !(target instanceof Node)) {
         return false;
@@ -40470,6 +40483,9 @@ ${codeText}
         if (item.element && item.setCloseable) {
           item.setCloseable((_a = this.closeable) != null ? _a : this);
         }
+        if (item.hidden) {
+          addClass(elem, "hidden");
+        }
       });
       if (this.options.footer) {
         const footerElem = createElement("div", ["menu-item", "editor-command-bar", "footer"], null);
@@ -41100,6 +41116,12 @@ ${codeText}
         }
         return true;
       });
+      __publicField(this, "getSubBarCreateOptions", (item) => {
+        const options = {
+          autoClose: true
+        };
+        return options;
+      });
       __publicField(this, "getSubBarOptions", (item) => {
         var _a;
         const options = {
@@ -88739,7 +88761,7 @@ ${data2.flowchartText}
   }
   class SeparatorItem {
     constructor() {
-      __publicField(this, "id", `separator-${Date.now()}`);
+      __publicField(this, "id", `separator-${genId()}`);
       __publicField(this, "type", "separator");
       __publicField(this, "name", "");
     }
@@ -88922,6 +88944,120 @@ ${data2.flowchartText}
       }
     }
   }
+  class MoreItem {
+    constructor(editor) {
+      __publicField(this, "name", i18n$1.t("commands.more"));
+      __publicField(this, "id", "more");
+      __publicField(this, "manualShowChildren", true);
+      __publicField(this, "childrenPlacement", "bottom-start");
+      __publicField(this, "children", []);
+      __publicField(this, "hidden");
+      __publicField(this, "fixedToolbar");
+      __publicField(this, "observer");
+      __publicField(this, "icon", MoreIcon$1);
+      __publicField(this, "childrenType", "toolbar");
+      __publicField(this, "childrenMenuId", "main-toolbar-more-menu");
+      setTimeout(() => {
+        var _a;
+        this.fixedToolbar = (_a = editor.findCustom("main-toolbar-fixed-toolbar")) == null ? void 0 : _a.toolbar;
+        if (this.fixedToolbar) {
+          const content = this.fixedToolbar.content;
+          const toolbar2 = content.closest(".editor-command-bar-root");
+          this.observer = new ResizeObserver(() => {
+            this.updateItems();
+          });
+          this.observer.observe(toolbar2);
+          editor.addCustom("main-toolbar-more-item", () => this);
+        }
+      });
+    }
+    destroy() {
+      var _a;
+      (_a = this.observer) == null ? void 0 : _a.disconnect();
+    }
+    onClick(editor, item) {
+      var _a;
+      const subBar = (_a = this.fixedToolbar) == null ? void 0 : _a.subBar;
+      if (subBar) {
+        subBar.options.autoClose = true;
+      }
+    }
+    updateItems() {
+      const toolbar2 = this.fixedToolbar;
+      if (!toolbar2) {
+        return;
+      }
+      const items = toolbar2.items;
+      const moreIndex = items.findIndex((item) => item === this);
+      if (moreIndex === -1) {
+        return;
+      }
+      const content = toolbar2.content;
+      const toolbarRoot = content.closest(".editor-command-bar-root");
+      const toolbarRect = toolbarRoot.getBoundingClientRect();
+      const toolbarRight = toolbarRect.right;
+      items.forEach((item) => {
+        const elem = toolbar2.getItemElementById(item.id);
+        if (item === this) {
+          addClass(elem, "hidden");
+        } else {
+          removeClass(elem, "hidden");
+        }
+      });
+      const positions = /* @__PURE__ */ new Map();
+      items.forEach((item) => {
+        const elem = toolbar2.getItemElementById(item.id);
+        positions.set(item.id, elem.getBoundingClientRect().right);
+      });
+      const lastItem = moreIndex === items.length - 1 ? items[items.length - 2] : items[items.length - 1];
+      const lastElem = toolbar2.getItemElementById(lastItem.id);
+      if (lastElem.getBoundingClientRect().right <= toolbarRight) {
+        this.hidden = true;
+        items.forEach((item) => {
+          if (item === this) {
+            return;
+          }
+          item.hidden = false;
+        });
+        toolbar2.updateItems(items);
+        return;
+      }
+      let fixedWidth = 0;
+      const last = items[items.length - 1];
+      if (last !== this) {
+        const elem = toolbar2.getItemElementById(last.id);
+        const lastRight = elem.getBoundingClientRect().right;
+        const prevItem = items[moreIndex - 1];
+        const prevElem = toolbar2.getItemElementById(prevItem.id);
+        const prevRight = prevElem.getBoundingClientRect().right;
+        fixedWidth = lastRight - prevRight;
+      }
+      const moreWidth = 24;
+      const maxRight = toolbarRight - moreWidth - fixedWidth - 10;
+      const moreItems = [];
+      items.forEach((item, index2) => {
+        if (item === this) {
+          return;
+        }
+        const right = positions.get(item.id);
+        if (!right) {
+          return;
+        }
+        const isFixedItem = index2 > moreIndex;
+        if (isFixedItem) {
+          item.hidden = false;
+          return;
+        }
+        item.hidden = right > maxRight;
+        if (item.hidden) {
+          moreItems.push(item);
+        }
+      });
+      this.hidden = moreItems.length === 0;
+      this.children = moreItems;
+      toolbar2.updateItems(items);
+    }
+  }
   function getToolbarDefaultItems(editor) {
     return [
       new UndoItem(),
@@ -88953,7 +89089,8 @@ ${data2.flowchartText}
       new InsertItem(editor),
       new SeparatorItem(),
       new FindReplaceItem(),
-      new CommentItem()
+      new CommentItem(),
+      new MoreItem(editor)
     ];
   }
   const zhCN = {
@@ -89032,6 +89169,11 @@ ${data2.flowchartText}
       this.toolbar.addListener("click", this.handleClick);
       this.editor.addListener("selectionChanged", this.handleSelectionChanged);
       this.updateState();
+      editor.addCustom("main-toolbar-fixed-toolbar", () => ({
+        toolbar: this.toolbar,
+        destroy: () => {
+        }
+      }));
     }
     destroy() {
       this.toolbar.destroy();
@@ -89268,7 +89410,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.7-beta.35";
+    editor.version = "2.1.7-beta.37";
     return editor;
   }
   function isDoc(doc2) {
@@ -89382,7 +89524,7 @@ ${data2.flowchartText}
       }
     }
     OnesEditorToolbar.register(editor);
-    editor.version = "2.1.7-beta.35";
+    editor.version = "2.1.7-beta.37";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -135247,6 +135389,7 @@ ${data2.flowchartText}
   exports2.MobileCommandHandler = MobileCommandHandler;
   exports2.MobileLinkProvider = MobileLinkProvider;
   exports2.MobileTableCommandProvider = MobileTableCommandProvider;
+  exports2.MoreItem = MoreItem;
   exports2.OnesEditorAutoSuggest = OnesEditorAutoSuggest;
   exports2.OnesEditorCustomDataWrapper = OnesEditorCustomDataWrapper;
   exports2.OnesEditorExclusiveBlock = OnesEditorExclusiveBlock;

package/package.json

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