@ones-editor/editor 2.1.1-beta.11 → 2.1.1-beta.13

package/dist/index.js

@@ -64301,17 +64301,43 @@ ${codeText}
         id: "add-comment",
         name: i18n$1.t("embedProperties.addComment"),
         icon: CommentIcon$1
+      }, {
+        id: "separator",
+        name: "",
+        type: "separator"
       }]);
       this.editor = editor;
       this.block = block;
       this.properties = properties;
     }
     get commands() {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (this.editor.readonly || clientType.isMobile) {
         return [];
       }
-      let standardCommands = this._commands;
+      let standardCommands = [];
+      if ((_a = this.properties) == null ? void 0 : _a.presetIds) {
+        this.properties.presetIds.forEach((id) => {
+          const command = this._commands.find((item) => item.id === id);
+          if (command) {
+            standardCommands.push(command);
+          }
+        });
+      }
+      if (((_b = this.properties) == null ? void 0 : _b.extCommands) && Array.isArray(this.properties.extCommands)) {
+        standardCommands.push(...this.properties.extCommands);
+      }
+      if (((_c = this.properties) == null ? void 0 : _c.extCommands) instanceof Function) {
+        standardCommands.push(...this.properties.extCommands(this.editor, this.block));
+      }
+      if ((_d = this.properties) == null ? void 0 : _d.extIds) {
+        this.properties.extIds.forEach((id) => {
+          const command = this._commands.find((item) => item.id === id);
+          if (command) {
+            standardCommands.push(command);
+          }
+        });
+      }
       const { enableComments = true } = this.editor.options;
       if (!enableComments) {
         standardCommands = standardCommands.filter((command) => command.id !== "add-comment");
@@ -64321,24 +64347,7 @@ ${codeText}
           item.states = this.editor.isBlockWritable(this.block) ? [] : ["disabled"];
         }
       });
-      let commands = ((_a = this.properties) == null ? void 0 : _a.presetIds) ? standardCommands.filter((item) => {
-        var _a2, _b2;
-        return (_b2 = (_a2 = this.properties) == null ? void 0 : _a2.presetIds) == null ? void 0 : _b2.includes(item.id);
-      }) : [...standardCommands];
-      if ((_c = (_b = this.properties) == null ? void 0 : _b.extCommands) == null ? void 0 : _c.length) {
-        if (commands.length) {
-          commands.push({
-            id: genId(),
-            type: "separator",
-            name: ""
-          });
-        }
-        commands.push(...this.properties.extCommands);
-      }
-      if (commands.length <= 3) {
-        commands = commands.filter((command) => command.id !== "separator");
-      }
-      return commands;
+      return standardCommands;
     }
     executeCommand(editor, block, item) {
       var _a, _b;
@@ -64469,16 +64478,6 @@ ${codeText}
       this.editor = editor;
       this.block = block;
     }
-    createIconItem(icon, active, parent) {
-      if (!icon)
-        return null;
-      const className = ["style-icon", "text-style-item"];
-      if (active) {
-        className.push("active");
-      }
-      const button2 = createIconButton(icon, className, parent);
-      return button2;
-    }
     get commands() {
       if (this.editor.readonly) {
         return this._commands.filter((item) => item.id === "download");
@@ -64486,14 +64485,9 @@ ${codeText}
       const currentAlign = this.block.getAttribute("data-style-align");
       const items = this._commands.map((item) => {
         if (item.id === currentAlign) {
-          return {
-            ...item,
-            element: () => {
-              const container = createElement("div", ["image-tooltip-align-style-section"], null);
-              this.createIconItem(item.icon, true, container);
-              return container;
-            }
-          };
+          const states = item.states || [];
+          states.push("checked");
+          return { ...item, states };
         }
         return item;
       });
@@ -80488,77 +80482,40 @@ ${codeText}
     }
     addDrawioEmptyStatus(embed);
   }
-  class DrawIoBlockCommands extends StandardEmbedBlockCommands {
-    constructor(editor, block) {
-      super(editor, block, {
-        handleExecuteCommand(editor2, block2, item) {
-          if (item.id === "edit") {
-            const data2 = editor2.getBlockData(block2).embedData;
-            editGraph(editor2, block2, data2, false);
-            return true;
-          }
-          if (item.id === "download") {
-            const image = block2.querySelector(".editor-drawio-content img");
-            if (!(image instanceof HTMLImageElement))
-              return true;
-            downloadImageAsPng(image.src);
+  function getBlockProperties$5(editor, block) {
+    const properties = getStandardEmbedBlockProperties(editor, block, {
+      handleExecuteCommand: (editor2, block2, item) => {
+        if (item.id === "edit") {
+          const data2 = editor2.getBlockData(block2).embedData;
+          editGraph(editor2, block2, data2, false);
+          return true;
+        }
+        if (item.id === "download") {
+          const image = block2.querySelector(".editor-drawio-content img");
+          if (!(image instanceof HTMLImageElement))
             return true;
-          }
-          return false;
+          downloadImageAsPng(image.src);
+          return true;
         }
-      });
-      __publicField(this, "group", "hovering-toolbar");
-      __publicField(this, "_commands", [
-        {
-          id: "edit",
-          name: i18n$1.t("graph.edit"),
-          icon: EditIcon
-        },
-        {
+        return false;
+      },
+      extCommands: (editor2, block2) => {
+        if (editor2.readonly) {
+          return [];
+        }
+        const blockContent = getBlockContent(block2);
+        const drawioImg = blockContent.querySelector(".editor-drawio-content img");
+        return [{
           id: "download",
           name: i18n$1.t("common.downloadAsImage"),
-          icon: DownloadIcon$1
-        },
-        {
-          id: "separator",
-          type: "separator",
-          name: ""
-        },
-        {
-          id: "add-comment",
-          name: i18n$1.t("graph.comment"),
-          icon: CommentIcon$1
-        }
-      ]);
-      this.editor = editor;
-      this.block = block;
-    }
-    get commands() {
-      let commands;
-      if (this.editor.readonly) {
-        commands = this._commands.filter((command) => command.id === "download");
-      } else {
-        commands = super.commands;
-      }
-      const blockContent = getBlockContent(this.block);
-      const drawioImg = blockContent.querySelector(".editor-drawio-content img");
-      if (!drawioImg) {
-        commands.forEach((command) => {
-          if (command.id === "download") {
-            command.states = ["disabled"];
-          }
-        });
-      }
-      return commands;
-    }
-  }
-  function getBlockProperties$5(editor, block) {
-    return {
-      blockCommands: {
-        "hovering-toolbar": new DrawIoBlockCommands(editor, block)
+          icon: DownloadIcon$1,
+          states: !drawioImg ? ["disabled"] : []
+        }];
       },
-      abstract: i18n$1.t("drawio.abstract")
-    };
+      presetIds: ["edit"],
+      extIds: ["separator", "add-comment"]
+    });
+    return { ...properties, abstract: i18n$1.t("drawio.abstract") };
   }
   const enUS$5 = {
     drawio: {
@@ -80787,80 +80744,57 @@ ${codeText}
     flowchart: "https://flowchart.js.org/",
     plantuml: "https://plantuml.com/"
   };
-  class GraphBlockCommands extends StandardEmbedBlockCommands {
-    constructor(editor, block, graphType, properties) {
-      super(editor, block, properties);
-      __publicField(this, "group", "hovering-toolbar");
-      __publicField(this, "_commands", [
-        {
-          id: "edit",
-          name: i18n$1.t("graph.edit"),
-          icon: EditIcon
-        },
-        {
-          id: "download",
-          name: i18n$1.t("common.downloadAsImage"),
-          icon: DownloadIcon$1
-        },
+  class GraphBlockCommands {
+    constructor(graphType, properties) {
+      __publicField(this, "presetIds", ["edit"]);
+      __publicField(this, "extIds", ["separator", "add-comment"]);
+      this.graphType = graphType;
+      this.properties = properties;
+    }
+    extCommands(editor, block) {
+      const commands = [
         {
           id: "help",
           name: i18n$1.t("graph.help"),
           icon: HelpIcon
-        },
-        {
-          id: "separator",
-          type: "separator",
-          name: ""
-        },
-        {
-          id: "add-comment",
-          name: i18n$1.t("graph.comment"),
-          icon: CommentIcon$1
         }
-      ]);
-      this.editor = editor;
-      this.block = block;
-      this.graphType = graphType;
-      this.properties = properties;
-    }
-    get commands() {
-      let commands;
-      if (this.editor.readonly) {
-        commands = this._commands.filter((command) => command.id === "download");
-      } else {
-        commands = super.commands;
+      ];
+      if (editor.readonly) {
+        return commands;
       }
-      const blockContent = getBlockContent(this.block);
+      const blockContent = getBlockContent(block);
       const graphImg = blockContent.querySelector("img.graph-embed-image");
       const graphImgSrc = graphImg == null ? void 0 : graphImg.src;
-      if (!graphImgSrc) {
-        commands.forEach((command) => {
-          if (command.id === "download") {
-            command.states = ["disabled"];
-          }
-        });
-      }
+      commands.unshift({
+        id: "download",
+        name: i18n$1.t("common.downloadAsImage"),
+        icon: DownloadIcon$1,
+        states: !graphImgSrc ? ["disabled"] : []
+      });
       return commands;
     }
-    executeCommand(editor, block, item) {
+    handleExecuteCommand(editor, block, item) {
       var _a, _b;
       if ((_b = (_a = this.properties) == null ? void 0 : _a.handleExecuteCommand) == null ? void 0 : _b.call(_a, editor, block, item)) {
-        return;
+        return true;
       }
-      if (item.id === "edit")
-        ;
-      else if (item.id === "help") {
+      if (item.id === "help") {
         window.open(GraphDocumentUrl[this.graphType]);
+        return true;
       }
+      if (item.id === "download") {
+        const graphImage = block.querySelector("img.graph-embed-image");
+        if (!(graphImage instanceof HTMLImageElement))
+          return true;
+        downloadImageAsPng(graphImage.src);
+        return true;
+      }
+      return false;
     }
   }
   function getGraphEmbedBlockProperties(editor, block, type, properties) {
-    return {
-      blockCommands: {
-        "hovering-toolbar": new GraphBlockCommands(editor, block, type, properties)
-      },
-      abstract: lodash.exports.capitalize(type)
-    };
+    const standardProperties = getStandardEmbedBlockProperties(editor, block, new GraphBlockCommands(type, properties));
+    return { ...standardProperties, abstract: lodash.exports.capitalize(type) };
   }
   class GraphBase {
     constructor(editor, graphType, codeEmbedDataKey) {
@@ -81095,20 +81029,6 @@ ${codeText}
             this.editGraph(content);
             return true;
           }
-          if (item.id === "add-comment") {
-            if (editor.readonly) {
-              return true;
-            }
-            addCommentToBlock(editor, block2);
-            return true;
-          }
-          if (item.id === "download") {
-            const graphImage = block2.querySelector("img.graph-embed-image");
-            if (!(graphImage instanceof HTMLImageElement))
-              return true;
-            downloadImageAsPng(graphImage.src);
-            return true;
-          }
           return false;
         }
       });
@@ -82289,30 +82209,15 @@ ${data2.flowchartText}
       this.editor = editor;
       this.block = block;
     }
-    createIconItem(icon, active, parent) {
-      if (!icon)
-        return null;
-      const className = ["style-icon", "text-style-item"];
-      if (active) {
-        className.push("active");
-      }
-      const button2 = createIconButton(icon, className, parent);
-      return button2;
-    }
     get commands() {
       if (this.editor.readonly)
         return [];
       const currentAlign = this.block.getAttribute("data-style-align");
       const items = this._commands.map((item) => {
         if (item.id === currentAlign) {
-          return {
-            ...item,
-            element: () => {
-              const container = createElement("div", ["video-tooltip-align-style-section"], null);
-              this.createIconItem(item.icon, true, container);
-              return container;
-            }
-          };
+          const states = item.states || [];
+          states.push("checked");
+          return { ...item, states };
         }
         return item;
       });
@@ -84939,7 +84844,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.1-beta.11";
+    editor.version = "2.1.1-beta.13";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -85036,7 +84941,7 @@ ${data2.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.1.1-beta.11";
+    editor.version = "2.1.1-beta.13";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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