@ones-editor/editor 2.2.14-beta.15 → 2.2.14-beta.16

package/dist/index.js

@@ -7109,14 +7109,19 @@ div.editor-root.readonly div.editor-content div[data-type=editor-container] .emb
 .embed-block[data-embed-type=flowchart] div[data-type=block-content],
 .embed-block[data-embed-type=plantuml] div[data-type=block-content] {
   --border-color: #e5e5e5;
-  display: flex;
-  flex-direction: column;
   outline: 1px solid var(--border-color);
   border-radius: 3px;
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-header,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-header,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-header {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header {
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -7126,58 +7131,58 @@ div.editor-root.readonly div.editor-content div[data-type=editor-container] .emb
   background: var(--Background-Default-o-color-bg-weak, #f7f8fa);
   border-bottom: 1px solid var(--border-color);
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-header .editor-command-bar-root,
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-header .editor-command-bar,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-header .editor-command-bar-root,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-header .editor-command-bar,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-header .editor-command-bar-root,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-header .editor-command-bar {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header .editor-command-bar-root,
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header .editor-command-bar,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header .editor-command-bar-root,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header .editor-command-bar,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header .editor-command-bar-root,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-header .editor-command-bar {
   background-color: transparent;
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content {
   position: relative;
   display: flex;
   flex-direction: column;
   height: calc(100% - 40px);
   flex: 1;
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content .graph-content,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content .graph-content,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content .graph-content {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content {
   flex: 1;
   display: flex;
   height: 100%;
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left {
   border-right: 1px solid var(--border-color);
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left,
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-right,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-right,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-right {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left,
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-right,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-right,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-right {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   padding: 10px;
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left > div,
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-right > div,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left > div,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-right > div,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-left > div,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content .graph-content .embed-graph-right > div {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left > div,
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-right > div,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left > div,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-right > div,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-left > div,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .graph-content .embed-graph-right > div {
   flex: 1;
 }
-.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-content .resize-gripper,
-.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-content .resize-gripper,
-.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-content .resize-gripper {
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .resize-gripper,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .resize-gripper,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper .embed-graph-content .resize-gripper {
   position: absolute;
   top: 0;
   width: 10px;
@@ -7301,6 +7306,9 @@ div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container
   background-color: transparent;
 }
 div[data-type=editor-block].layout-block .layout-column-container > .container-blocks > .embed-block[data-embed-type=mermaid] div[data-type=block-content], div[data-type=editor-block].layout-block .layout-column-container > .container-blocks > .embed-block[data-embed-type=flowchart] div[data-type=block-content], div[data-type=editor-block].layout-block .layout-column-container > .container-blocks > .embed-block[data-embed-type=plantuml] div[data-type=block-content] {
+  overflow-x: auto;
+}
+div[data-type=editor-block].layout-block .layout-column-container > .container-blocks > .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-graph-wrapper, div[data-type=editor-block].layout-block .layout-column-container > .container-blocks > .embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-graph-wrapper, div[data-type=editor-block].layout-block .layout-column-container > .container-blocks > .embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-graph-wrapper {
   min-width: 290px;
 }
 div.comment-editor-root [data-type=editor-container].root .embed-block[data-embed-type=mermaid],
@@ -81842,8 +81850,9 @@ ${content}
       const oldCode = this.getGraphData(data2).code;
       return oldCode !== code;
     }
-    createEmbedContent(content, blockData) {
+    createEmbedContent(blockContent, blockData) {
       const { code, src, height, flex = DEFAULT_FLEX, view } = this.getGraphData(blockData);
+      const content = createElement("div", ["embed-graph-wrapper"], blockContent);
       const header = createElement("div", ["embed-graph-header"], content, i18n$1.t(`graph.${this.graphType}`));
       this.viewSelect = new ViewSelect(header);
       this.viewSelect.addListener("viewChange", this.updateLayoutData);
@@ -81858,13 +81867,16 @@ ${content}
       const realView = this.getRealView(view);
       this.viewSelect.setSelectedView(realView);
       this.updateLayout(realView, flex);
-      this.updateHeight(content, height);
+      this.updateHeight(blockContent, height);
       this.updateDraw(src, code);
       setTimeout(() => {
         if (clientType.isMobile) {
           return;
         }
         const blockElement = this.editor.getBlockById(blockData.id);
+        if (!this.editor.readonly) {
+          addClass(blockElement, "no-highlighted");
+        }
         blockElement.addEventListener("mousedown", this.handleClick, { capture: true });
         EmbedBlockResizer.register(this.editor, blockElement, { maxHeight: GRAPH_MAX_HEIGHT, minHeight: GRAPH_MIN_HEIGHT });
       });
@@ -81987,6 +81999,9 @@ ${content}
     static get(editor, id) {
       return editor.addCustom(`${MERMAID_TYPE}_${id}`, () => new _MermaidInstance(editor));
     }
+    static destroyCustom(editor, id) {
+      editor.destroyCustom(`${MERMAID_TYPE}_${id}`);
+    }
     code2ObjectUrl(code) {
       return mermaidCodeToObjectUrl(this.editor, code);
     }
@@ -82113,8 +82128,7 @@ ${data2.mermaidText}
   }
   function handleDeleteBlock$2(editor, block) {
     const blockId = getBlockId(block);
-    const mermaid = MermaidInstance.get(editor, blockId);
-    mermaid.destroy();
+    MermaidInstance.destroyCustom(editor, blockId);
   }
   const MermaidEmbed = {
     embedType: MERMAID_TYPE,
@@ -89057,7 +89071,7 @@ ${data2.plantumlText}
         }
       }
     });
-    editor.version = "2.2.14-beta.15";
+    editor.version = "2.2.14-beta.16";
     return editor;
   }
   function isDoc(doc2) {
@@ -89158,7 +89172,7 @@ ${data2.plantumlText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.2.14-beta.15";
+    editor.version = "2.2.14-beta.16";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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