@ones-editor/editor 2.8.36 → 2.8.37-beta.1

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

@@ -3,13 +3,13 @@ import { TypedEmitter } from 'tiny-typed-emitter';
 import type { GetReferenceClientRect, Placement } from 'tippy.js';
 export { Placement };
 export interface CommandBarEvents {
-    'show': (bar: AbstractCommandBar) => void;
-    'shown': (bar: AbstractCommandBar) => void;
-    'click': (bar: AbstractCommandBar, item: CommandItem, elem: HTMLElement) => void;
-    'close': (bar: AbstractCommandBar) => void;
-    'selectionChange': (bar: AbstractCommandBar, id: string) => void;
-    'closing': (bar: AbstractCommandBar, event: MouseEvent | TouchEvent) => boolean | undefined;
-    'subBarShown': (bar: AbstractCommandBar, subBar: AbstractCommandBar) => void;
+    show: (bar: AbstractCommandBar) => void;
+    shown: (bar: AbstractCommandBar) => void;
+    click: (bar: AbstractCommandBar, item: CommandItem, elem: HTMLElement) => void;
+    close: (bar: AbstractCommandBar) => void;
+    selectionChange: (bar: AbstractCommandBar, id: string) => void;
+    closing: (bar: AbstractCommandBar, event: MouseEvent | TouchEvent) => boolean | undefined;
+    subBarShown: (bar: AbstractCommandBar, subBar: AbstractCommandBar) => void;
 }
 export interface ManualShowCommandBarOptions {
     placement?: Placement;
@@ -50,6 +50,7 @@ export type CommandBarContentElement = HTMLElement & {
     __neverUse: 'CommandBarContentElement';
 };
 export interface CommandBarOptions {
+    rootId?: string;
     id?: string;
     parentItem?: CommandItem;
     itemElementTag?: keyof HTMLElementTagNameMap;

package/dist/index.js

@@ -8875,6 +8875,35 @@ div.editor-root.compact.no-heading-collapse.no-block-menu > .editor-content {
 }
 [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;
+}
+.editor-main-toolbar-root {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.editor-main-toolbar-root .editor-main-toolbar-resizer {
+  position: relative;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+.editor-main-toolbar-root .editor-main-toolbar-resizer .editor-main-toolbar-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+.editor-main-toolbar-root .editor-main-toolbar-resizer .editor-main-toolbar-container .editor-command-bar-root {
+  overflow: hidden !important;
+}
+.editor-main-toolbar-root [data-command-bar-root-id=main-toolbar-fullscreen] {
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }`)),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;
@@ -41754,6 +41783,9 @@ ${codeText}
       }
       const content = createElement("div", ["editor-command-bar-root"], null);
       content.setAttribute("data-keep-editor-focus", "");
+      if (this.options.rootId) {
+        content.setAttribute("data-command-bar-root-id", this.options.rootId);
+      }
       if (this.options.header) {
         const headerElem = createElement("div", ["editor-command-bar-header"], null);
         if (this.options.header instanceof Function) {
@@ -54814,7 +54846,7 @@ ${codeText}
     const svg = await mathjax2Svg(editor, tex);
     const data2 = svg;
     const file2 = new File([data2], "math.svg");
-    const path = await editor.doc.uploadResource(file2);
+    const path = await editor.doc.uploadResource(file2, { resourceType: "graph" });
     return path.resourceId;
   }
   async function convertAndUploadMathjaxForEmbed(editor, tex) {
@@ -54822,7 +54854,7 @@ ${codeText}
     const perfectState = analyzeMathjaxSvgWidth(svg);
     const data2 = svg;
     const file2 = new File([data2], "math.svg");
-    const path = await editor.doc.uploadResource(file2);
+    const path = await editor.doc.uploadResource(file2, { resourceType: "graph" });
     return {
       resourceId: path.resourceId,
       ...perfectState
@@ -64826,7 +64858,8 @@ $$${mathData.mathjaxText}$$
         const res = await this.editor.doc.uploadResource(file2, {
           onProgress: (progress) => {
             setImageUploading(imageContainer, progress);
-          }
+          },
+          resourceType: "image"
         });
         removeClass(imageContainer, "uploading");
         this.images[index2].src = res.resourceId;
@@ -68803,7 +68836,7 @@ ${codeText}
                 }
                 const fileName = `image.${ext}`;
                 const file2 = new File([blob], fileName, { type: mimeString });
-                const ret = await editor.doc.uploadResource(file2);
+                const ret = await editor.doc.uploadResource(file2, { resourceType: "paste" });
                 return ret.resourceId;
               }
               return src;
@@ -85902,7 +85935,7 @@ ${docStr}
     const file2 = new File([buffer], `${genId()}.svg`, {
       type: "image/svg+xml"
     });
-    const ret = await editor.doc.uploadResource(file2);
+    const ret = await editor.doc.uploadResource(file2, { resourceType: "graph" });
     return ret.resourceId;
   }
   const _MermaidInstance = class extends GraphBase {
@@ -86140,7 +86173,7 @@ ${data2.mermaidText}
     const file2 = new File([buffer], `${genId()}.svg`, {
       type: "image/svg+xml"
     });
-    const resource = await editor.doc.uploadResource(file2);
+    const resource = await editor.doc.uploadResource(file2, { resourceType: "graph" });
     return resource.resourceId;
   }
   const _FlowChartInstance = class extends GraphBase {
@@ -86595,7 +86628,7 @@ ${data2.flowchartText}
       });
       const targetBlock = editor.findBlockById(getBlockId(block));
       if (targetBlock) {
-        const res = await editor.doc.uploadResource(file2);
+        const res = await editor.doc.uploadResource(file2, { resourceType: "graph" });
         const { resourceId } = res;
         const oldData = editor.getBlockData(targetBlock);
         const oldEmbedData = oldData.embedData;
@@ -86647,31 +86680,40 @@ ${data2.flowchartText}
         const xml = drawIoData.xmlSvg || drawIoData.xml || "";
         switch (msg.event) {
           case "configure":
-            iframe.contentWindow.postMessage(JSON.stringify({
-              action: "configure",
-              config: {
-                defaultFonts: ["Humor Sans", "Helvetica", "Times New Roman"]
-              }
-            }), "*");
+            iframe.contentWindow.postMessage(
+              JSON.stringify({
+                action: "configure",
+                config: {
+                  defaultFonts: ["Humor Sans", "Helvetica", "Times New Roman"]
+                }
+              }),
+              "*"
+            );
             break;
           case "init":
-            iframe.contentWindow.postMessage(JSON.stringify({
-              action: "load",
-              saveAndExit: 1,
-              noSaveBtn: 1,
-              noExitBtn: 0,
-              xml
-            }), "*");
+            iframe.contentWindow.postMessage(
+              JSON.stringify({
+                action: "load",
+                saveAndExit: 1,
+                noSaveBtn: 1,
+                noExitBtn: 0,
+                xml
+              }),
+              "*"
+            );
             loaded();
             loadingHandler.removeLoading();
             break;
           case "save":
             exportFlag = "save";
-            iframe.contentWindow.postMessage(JSON.stringify({
-              action: "export",
-              format: "xmlsvg",
-              spin: "Saving graph"
-            }), "*");
+            iframe.contentWindow.postMessage(
+              JSON.stringify({
+                action: "export",
+                format: "xmlsvg",
+                spin: "Saving graph"
+              }),
+              "*"
+            );
             break;
           case "export":
             if (exportFlag !== "auto") {
@@ -86697,12 +86739,15 @@ ${data2.flowchartText}
                     allowRetry: true,
                     onOk: () => {
                       setTimeout(() => {
-                        drawioIframeWindow.postMessage(JSON.stringify({
-                          action: "export",
-                          format: "xmlsvg",
-                          spin: i18n$1.t("drawio.save"),
-                          autoSave: exportFlag
-                        }), "*");
+                        drawioIframeWindow.postMessage(
+                          JSON.stringify({
+                            action: "export",
+                            format: "xmlsvg",
+                            spin: i18n$1.t("drawio.save"),
+                            autoSave: exportFlag
+                          }),
+                          "*"
+                        );
                       }, 1e3);
                     },
                     onClose: () => {
@@ -86768,12 +86813,15 @@ ${data2.flowchartText}
         if (!drawioIframe || !drawioIframe.contentWindow) {
           return;
         }
-        drawioIframe.contentWindow.postMessage(JSON.stringify({
-          action: "export",
-          format: "xmlsvg",
-          spin: "Saving graph",
-          autoSave: true
-        }), "*");
+        drawioIframe.contentWindow.postMessage(
+          JSON.stringify({
+            action: "export",
+            format: "xmlsvg",
+            spin: "Saving graph",
+            autoSave: true
+          }),
+          "*"
+        );
       }, SAVE_DELAY_TIME);
     };
     const exit = () => {
@@ -86913,10 +86961,12 @@ ${data2.flowchartText}
   }
   function updateGraphByXml(mxFile, embed, editor) {
     assert(logger$i, editor, "parameter missing");
-    initDrawIo(editor).then(() => loopCheckResourceWasLoaded({
-      checker: () => !!(window.mxUtils && window.mxGraph && window.mxCodec),
-      maxRetryTime: 5e3
-    })).then(() => {
+    initDrawIo(editor).then(
+      () => loopCheckResourceWasLoaded({
+        checker: () => !!(window.mxUtils && window.mxGraph && window.mxCodec),
+        maxRetryTime: 5e3
+      })
+    ).then(() => {
       const { mxUtils, mxGraph: MxGraph, mxCodec: MxCodec, Graph } = window;
       assert(logger$i, mxUtils, "External resource loading exception: mxUtils");
       assert(logger$i, MxGraph, "External resource loading exception: MxGraph");
@@ -86936,7 +86986,10 @@ ${data2.flowchartText}
         const raw = atob(diagramBase64);
         const pako = window.pako;
         assert(logger$i, pako, "External resource loading exception: pako");
-        const encodedXml = pako.inflateRaw(Uint8Array.from(raw, (c) => c.charCodeAt(0)), { to: "string" });
+        const encodedXml = pako.inflateRaw(
+          Uint8Array.from(raw, (c) => c.charCodeAt(0)),
+          { to: "string" }
+        );
         const xml = decodeURIComponent(encodedXml);
         xmlDoc = mxUtils.parseXml(xml);
       } else {
@@ -87270,7 +87323,7 @@ ${data2.flowchartText}
       if (!plantumlImgFile) {
         return await Promise.resolve(url);
       }
-      const uploadResourceResult = await editor.doc.uploadResource(plantumlImgFile);
+      const uploadResourceResult = await editor.doc.uploadResource(plantumlImgFile, { resourceType: "graph" });
       return uploadResourceResult.resourceId;
     } catch (error2) {
       return Promise.resolve(url);
@@ -90805,7 +90858,8 @@ ${data2.plantumlText}
           const { resourceId } = await editor.doc.uploadResource(file2, {
             onProgress: (progress) => {
               this.renderProgress(progress, file2);
-            }
+            },
+            resourceType: "media"
           });
           const { name, type, size } = file2;
           const newBlockData = {
@@ -90943,7 +90997,11 @@ ${data2.plantumlText}
     renderEmpty(blockData) {
       assert(logger$9, this.abstract, "no abstract");
       assert(logger$9, this.mediaContainer, "The media element not exist");
-      const empty = createElement("div", ["media-empty", "embed-selected-content", "embed-hover-content"], this.mediaContainer);
+      const empty = createElement(
+        "div",
+        ["media-empty", "embed-selected-content", "embed-hover-content"],
+        this.mediaContainer
+      );
       empty.innerHTML = this.abstract.mediaIcon;
       this.updateMediaContent(empty);
       const { editor } = this.options;
@@ -90964,7 +91022,7 @@ ${data2.plantumlText}
           }
           await editor.doc.addResources([resourceId]);
           const serviceAppId = (_b = (_a = editor.doc).getServerMeta) == null ? void 0 : _b.call(_a).appId;
-          if (resourceUrl !== blockData.embedData.src && (serviceAppId && blockData.embedData.src.includes(serviceAppId))) {
+          if (resourceUrl !== blockData.embedData.src && serviceAppId && blockData.embedData.src.includes(serviceAppId)) {
             const block = getParentBlock(content);
             if (block && !editor.readonly && editor.isBlockWritable(block)) {
               const newBlockData = cloneDeep__default.default(blockData);
@@ -94101,11 +94159,11 @@ ${JSON.stringify(error2, null, 2)}`);
         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");
+          const resizer = content.closest(".editor-main-toolbar-resizer");
           this.observer = new ResizeObserver(() => {
             this.updateItems();
           });
-          this.observer.observe(toolbar2);
+          this.observer.observe(resizer);
           editor.addCustom("main-toolbar-more-item", () => this);
         }
       });
@@ -94223,8 +94281,6 @@ ${JSON.stringify(error2, null, 2)}`);
       new AlignCenterItem(),
       new AlignRightItem(),
       new SeparatorItem(),
-      new InsertImageItem(),
-      new SeparatorItem(),
       new InsertItem(editor),
       new SeparatorItem(),
       new FindReplaceItem(),
@@ -94296,8 +94352,9 @@ ${JSON.stringify(error2, null, 2)}`);
   });
   const style = "";
   class MainToolbar {
-    constructor(editor, parent) {
+    constructor(editor, parent, options = {}) {
       __publicField(this, "toolbar");
+      __publicField(this, "toolbarFullScreen");
       __publicField(this, "handleClick", (bar2, item) => {
         const command = item;
         if (command.onClick) {
@@ -94334,7 +94391,11 @@ ${JSON.stringify(error2, null, 2)}`);
         this.updateState();
       });
       this.editor = editor;
-      this.toolbar = new FixedToolbar(parent, this.getItems(), {
+      this.options = options;
+      const root2 = createElement("div", ["editor-main-toolbar-root"], parent);
+      const container = createElement("div", ["editor-main-toolbar-resizer"], root2);
+      const resizer = createElement("div", ["editor-main-toolbar-container"], container);
+      this.toolbar = new FixedToolbar(resizer, this.getItems(), {
         tooltipId: editor.clientId,
         id: "main-toolbar"
       });
@@ -94346,9 +94407,31 @@ ${JSON.stringify(error2, null, 2)}`);
         destroy: () => {
         }
       }));
+      if (options.enableFullScreen) {
+        const fullScreenItem = {
+          id: "main-toolbar-fullscreen",
+          icon: FullScreenIcon,
+          name: i18n$1.t("toolbar.fullscreen")
+        };
+        this.toolbarFullScreen = new FixedToolbar(root2, [fullScreenItem], {
+          tooltipId: editor.clientId,
+          id: "main-toolbar-fullscreen",
+          rootId: "main-toolbar-fullscreen"
+        });
+        this.toolbarFullScreen.addListener("click", (bar2, item) => {
+          var _a;
+          if (item.id === "main-toolbar-fullscreen") {
+            (_a = options.onFullScreenClick) == null ? void 0 : _a.call(options, this.editor, item);
+            this.handleSelectionChanged();
+          }
+        });
+      }
     }
     destroy() {
+      var _a;
       this.toolbar.destroy();
+      this.editor.removeListener("selectionChanged", this.handleSelectionChanged);
+      (_a = this.toolbarFullScreen) == null ? void 0 : _a.destroy();
     }
     setItems(items) {
       this.toolbar.updateItems(items);
@@ -94641,7 +94724,7 @@ ${JSON.stringify(error2, null, 2)}`);
         }
       }
     });
-    editor.version = "2.8.36";
+    editor.version = "2.8.37-beta.1";
     return editor;
   }
   function isDoc(doc2) {
@@ -94755,7 +94838,7 @@ ${JSON.stringify(error2, null, 2)}`);
       }
     });
     OnesEditorToolbar.register(editor);
-    editor.version = "2.8.36";
+    editor.version = "2.8.37-beta.1";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ones-editor/editor",
-  "version": "2.8.36",
+  "version": "2.8.37-beta.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {