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

package/dist/index.js

@@ -3952,6 +3952,9 @@ div.editor-root.readonly div.editor-content div[data-type=editor-container] div[
 .editor-root .editor-content div[data-type=editor-block].comment.active::after {
   display: none;
 }
+.editor-root .editor-content div[data-type=editor-block].comment.active > div[data-type=block-content] {
+  outline: none;
+}
 .editor-root .editor-content div[data-type=editor-block] div[data-type=block-tools] .block-comment-button {
   all: unset;
   position: absolute;
@@ -7119,7 +7122,7 @@ div.editor-root.readonly div.editor-content div[data-type=editor-container] .emb
   flex-shrink: 0;
   height: 40px;
   padding: 10px 20px;
-  gap: 20px;
+  gap: 6px;
   background: var(--Background-Default-o-color-bg-weak, #f7f8fa);
   border-bottom: 1px solid var(--border-color);
 }
@@ -7183,6 +7186,61 @@ div.editor-root.readonly div.editor-content div[data-type=editor-container] .emb
   margin-left: -5px;
   cursor: col-resize;
 }
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .custom-scrollbar, .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container textarea,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .custom-scrollbar,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container textarea,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .custom-scrollbar,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container textarea {
+  overflow: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  /* Handle */
+  /* Handle on hover */
+}
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .custom-scrollbar:hover, .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container textarea:hover,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .custom-scrollbar:hover,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container textarea:hover,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .custom-scrollbar:hover,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container textarea:hover {
+  scrollbar-color: var(--other-o-color-scrollbar, #bebfc2) transparent;
+  overflow-y: scroll !important;
+}
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .custom-scrollbar:focus, .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container textarea:focus,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .custom-scrollbar:focus,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container textarea:focus,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .custom-scrollbar:focus,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container textarea:focus {
+  scrollbar-color: var(--other-o-color-scrollbar, #bebfc2) transparent;
+}
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-track, .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-track,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-track,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-track,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-track,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-thumb, .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: transparent;
+}
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-thumb:hover, .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-thumb:hover,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-thumb:hover,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-thumb:hover,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .custom-scrollbar::-webkit-scrollbar-thumb:hover,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--other-o-color-scrollbar, #bebfc2);
+}
+.embed-block[data-embed-type=mermaid] div[data-type=block-content] .custom-scrollbar:hover::-webkit-scrollbar-thumb, .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container textarea:hover::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .custom-scrollbar:hover::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container textarea:hover::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .custom-scrollbar:hover::-webkit-scrollbar-thumb,
+.embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container textarea:hover::-webkit-scrollbar-thumb {
+  background: var(--other-o-color-scrollbar, #bebfc2);
+}
 .embed-block[data-embed-type=mermaid] div[data-type=block-content] .embed-code-editor-container,
 .embed-block[data-embed-type=flowchart] div[data-type=block-content] .embed-code-editor-container,
 .embed-block[data-embed-type=plantuml] div[data-type=block-content] .embed-code-editor-container {
@@ -7237,11 +7295,14 @@ div.editor-root.readonly div.editor-content div[data-type=editor-container] .emb
   max-width: 100%;
   max-height: 100%;
 }
-div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=mermaid]:not(.highlighted).selected > div[data-type=block-content]::before,
-div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=flowchart]:not(.highlighted).selected > div[data-type=block-content]::before,
-div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=plantuml]:not(.highlighted).selected > div[data-type=block-content]::before {
+div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=mermaid].no-highlighted.selected > div[data-type=block-content]::before,
+div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=flowchart].no-highlighted.selected > div[data-type=block-content]::before,
+div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=plantuml].no-highlighted.selected > div[data-type=block-content]::before {
   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] {
+  min-width: 290px;
+}
 div.comment-editor-root [data-type=editor-container].root .embed-block[data-embed-type=mermaid],
 div.comment-editor-root [data-type=editor-container].root .embed-block[data-embed-type=flowchart],
 div.comment-editor-root [data-type=editor-container].root .embed-block[data-embed-type=plantuml] {
@@ -81671,6 +81732,24 @@ ${content}
           }
         }
       });
+      __publicField(this, "handleClick", (e2) => {
+        const target = e2.target;
+        if (target instanceof HTMLElement) {
+          const blockElement = getParentBlock(target);
+          assert(logger$k, blockElement, "blockElement does not exist");
+          if (!hasClass(target, "embed-graph-header")) {
+            addClass(blockElement, "no-highlighted");
+          } else {
+            removeClass(blockElement, "no-highlighted");
+          }
+        }
+      });
+      __publicField(this, "handleSelectionChanged", (editor) => {
+        const block = editor.selection.focusedBlock;
+        if (block !== this.block) {
+          removeClass(this.block, "no-highlighted");
+        }
+      });
       __publicField(this, "handleInputFocusChange", (focused, id) => {
         const block = this.editor.getBlockById(id);
         if (focused) {
@@ -81740,6 +81819,7 @@ ${content}
       }));
       this.editor = editor;
       this.editor.addListener("readonlyChanged", this.handleReadonlyChanged);
+      this.editor.addListener("selectionChanged", this.handleSelectionChanged);
       GraphExclusiveHandler.get(editor).addListener("onExclusiveBlock", this.handleExclusiveBlock);
     }
     get block() {
@@ -81751,6 +81831,7 @@ ${content}
     destroy() {
       var _a, _b, _c;
       this.editor.removeListener("readonlyChanged", this.handleReadonlyChanged);
+      this.editor.removeListener("selectionChanged", this.handleSelectionChanged);
       (_a = this.layout) == null ? void 0 : _a.destroy();
       (_b = this.viewSelect) == null ? void 0 : _b.destroy();
       (_c = this.drawHandler) == null ? void 0 : _c.destroy();
@@ -81764,7 +81845,6 @@ ${content}
     createEmbedContent(content, blockData) {
       const { code, src, height, flex = DEFAULT_FLEX, view } = this.getGraphData(blockData);
       const header = createElement("div", ["embed-graph-header"], content, i18n$1.t(`graph.${this.graphType}`));
-      bindPreventSelect(header, this.handleBlockFocus);
       this.viewSelect = new ViewSelect(header);
       this.viewSelect.addListener("viewChange", this.updateLayoutData);
       const left = createElement("div", ["embed-graph-left"], null);
@@ -81785,6 +81865,7 @@ ${content}
           return;
         }
         const blockElement = this.editor.getBlockById(blockData.id);
+        blockElement.addEventListener("mousedown", this.handleClick, { capture: true });
         EmbedBlockResizer.register(this.editor, blockElement, { maxHeight: GRAPH_MAX_HEIGHT, minHeight: GRAPH_MIN_HEIGHT });
       });
     }
@@ -88976,7 +89057,7 @@ ${data2.plantumlText}
         }
       }
     });
-    editor.version = "2.2.14-beta.14";
+    editor.version = "2.2.14-beta.15";
     return editor;
   }
   function isDoc(doc2) {
@@ -89077,7 +89158,7 @@ ${data2.plantumlText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.2.14-beta.14";
+    editor.version = "2.2.14-beta.15";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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