@mdaemon/html-editor 1.0.8 → 1.0.9

package/README.md

@@ -524,7 +524,7 @@ const editor = new HTMLEditor(container, {
 The confab skins expect the following CSS custom properties to be defined by the host application:
 
 | Variable | Purpose |
-|----------|---------||
+|----------|---------|
 | `--theme-primary` | Primary brand color (buttons, active states) |
 | `--theme-primary-hover` | Hover state for primary color |
 | `--color-confab-gray-50` to `--color-confab-gray-900` | Gray scale for backgrounds, text, borders |

package/dist/index.d.ts

@@ -480,13 +480,15 @@ export declare class Toolbar {
     private updateInterval;
     private boundClickHandler;
     private boundKeydownHandler;
-    private overflowEl;
+    private buttonsEl;
     private toggleBtn;
+    private resizeObserver;
     constructor(container: HTMLElement, options: ToolbarOptions);
     private get tiptap();
     private get trans();
     private icon;
     private render;
+    private observeOverflow;
     private renderGroups;
     private createToggleButton;
     private toggleOverflow;

package/dist/index.js

@@ -42797,8 +42797,9 @@ class Toolbar {
   updateInterval = null;
   boundClickHandler = null;
   boundKeydownHandler = null;
-  overflowEl = null;
+  buttonsEl = null;
   toggleBtn = null;
+  resizeObserver = null;
   constructor(container, options) {
     this.container = container;
     this.options = options;
@@ -42822,27 +42823,29 @@ class Toolbar {
   render() {
     this.container.innerHTML = "";
     this.container.className = `md-toolbar md-toolbar-${this.options.mode}${this.options.sticky ? " md-toolbar-sticky" : ""}`;
-    const rows = this.options.buttons.split("||");
-    const hasOverflow = rows.length > 1;
-    if (hasOverflow) {
-      const primaryEl = document.createElement("div");
-      primaryEl.className = "md-toolbar-primary";
-      this.renderGroups(rows[0].trim(), primaryEl);
-      this.toggleBtn = this.createToggleButton();
-      primaryEl.appendChild(this.toggleBtn);
-      this.container.appendChild(primaryEl);
-      this.overflowEl = document.createElement("div");
-      this.overflowEl.className = "md-toolbar-overflow";
-      const overflowStr = rows.slice(1).join("||").trim();
-      this.renderGroups(overflowStr, this.overflowEl);
-      this.container.appendChild(this.overflowEl);
-      if (this.state.showMoreButtons) {
-        this.overflowEl.classList.add("md-toolbar-overflow-visible");
-        this.toggleBtn.classList.add("md-toolbar-btn-active");
-      }
-    } else {
-      this.renderGroups(this.options.buttons, this.container);
-    }
+    this.buttonsEl = document.createElement("div");
+    this.buttonsEl.className = "md-toolbar-buttons";
+    const buttonsStr = this.options.buttons.replace(/\|\|/g, "|");
+    this.renderGroups(buttonsStr, this.buttonsEl);
+    this.container.appendChild(this.buttonsEl);
+    this.toggleBtn = this.createToggleButton();
+    this.container.appendChild(this.toggleBtn);
+    if (this.state.showMoreButtons) {
+      this.buttonsEl.classList.add("md-toolbar-expanded");
+      this.toggleBtn.classList.add("md-toolbar-btn-active");
+    }
+    this.observeOverflow();
+  }
+  observeOverflow() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      if (!this.buttonsEl || !this.toggleBtn) return;
+      const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
+      this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
+    });
+    this.resizeObserver.observe(this.buttonsEl);
   }
   renderGroups(buttonsStr, parent) {
     const groups = buttonsStr.split("|").map((g) => g.trim()).filter(Boolean);
@@ -42880,11 +42883,14 @@ class Toolbar {
   }
   toggleOverflow() {
     this.state.showMoreButtons = !this.state.showMoreButtons;
-    if (this.overflowEl) {
-      this.overflowEl.classList.toggle("md-toolbar-overflow-visible", this.state.showMoreButtons);
+    if (this.buttonsEl) {
+      this.buttonsEl.classList.toggle("md-toolbar-expanded", this.state.showMoreButtons);
     }
     if (this.toggleBtn) {
       this.toggleBtn.classList.toggle("md-toolbar-btn-active", this.state.showMoreButtons);
+      if (this.state.showMoreButtons) {
+        this.toggleBtn.style.display = "";
+      }
     }
   }
   createButton(name) {
@@ -43486,7 +43492,7 @@ class Toolbar {
     this.searchReplace = null;
     this.buttonElements.clear();
     this.dropdowns.clear();
-    this.overflowEl = null;
+    this.buttonsEl = null;
     this.toggleBtn = null;
     this.render();
     this.bindEvents();
@@ -43495,6 +43501,10 @@ class Toolbar {
     if (this.updateInterval) {
       clearInterval(this.updateInterval);
     }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
     this.unbindEvents();
     this.charMap?.destroy();
     this.emojiPicker?.destroy();
@@ -46004,8 +46014,8 @@ const availableLocales = Object.keys(locales);
 const TRANSLATION_KEYS = Object.keys(en);
 const lowlight = createLowlight(grammars);
 const fontNames = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva";
-const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize || lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
-const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote || lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link | ltr rtl | searchreplace";
+const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
+const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link | ltr rtl | searchreplace";
 const DEFAULT_FONT_SIZES = "8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt";
 let editorIdCounter = 0;
 let globalTranslate = (key) => key;

package/dist/index.mjs

@@ -42795,8 +42795,9 @@ class Toolbar {
   updateInterval = null;
   boundClickHandler = null;
   boundKeydownHandler = null;
-  overflowEl = null;
+  buttonsEl = null;
   toggleBtn = null;
+  resizeObserver = null;
   constructor(container, options) {
     this.container = container;
     this.options = options;
@@ -42820,27 +42821,29 @@ class Toolbar {
   render() {
     this.container.innerHTML = "";
     this.container.className = `md-toolbar md-toolbar-${this.options.mode}${this.options.sticky ? " md-toolbar-sticky" : ""}`;
-    const rows = this.options.buttons.split("||");
-    const hasOverflow = rows.length > 1;
-    if (hasOverflow) {
-      const primaryEl = document.createElement("div");
-      primaryEl.className = "md-toolbar-primary";
-      this.renderGroups(rows[0].trim(), primaryEl);
-      this.toggleBtn = this.createToggleButton();
-      primaryEl.appendChild(this.toggleBtn);
-      this.container.appendChild(primaryEl);
-      this.overflowEl = document.createElement("div");
-      this.overflowEl.className = "md-toolbar-overflow";
-      const overflowStr = rows.slice(1).join("||").trim();
-      this.renderGroups(overflowStr, this.overflowEl);
-      this.container.appendChild(this.overflowEl);
-      if (this.state.showMoreButtons) {
-        this.overflowEl.classList.add("md-toolbar-overflow-visible");
-        this.toggleBtn.classList.add("md-toolbar-btn-active");
-      }
-    } else {
-      this.renderGroups(this.options.buttons, this.container);
-    }
+    this.buttonsEl = document.createElement("div");
+    this.buttonsEl.className = "md-toolbar-buttons";
+    const buttonsStr = this.options.buttons.replace(/\|\|/g, "|");
+    this.renderGroups(buttonsStr, this.buttonsEl);
+    this.container.appendChild(this.buttonsEl);
+    this.toggleBtn = this.createToggleButton();
+    this.container.appendChild(this.toggleBtn);
+    if (this.state.showMoreButtons) {
+      this.buttonsEl.classList.add("md-toolbar-expanded");
+      this.toggleBtn.classList.add("md-toolbar-btn-active");
+    }
+    this.observeOverflow();
+  }
+  observeOverflow() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      if (!this.buttonsEl || !this.toggleBtn) return;
+      const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
+      this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
+    });
+    this.resizeObserver.observe(this.buttonsEl);
   }
   renderGroups(buttonsStr, parent) {
     const groups = buttonsStr.split("|").map((g) => g.trim()).filter(Boolean);
@@ -42878,11 +42881,14 @@ class Toolbar {
   }
   toggleOverflow() {
     this.state.showMoreButtons = !this.state.showMoreButtons;
-    if (this.overflowEl) {
-      this.overflowEl.classList.toggle("md-toolbar-overflow-visible", this.state.showMoreButtons);
+    if (this.buttonsEl) {
+      this.buttonsEl.classList.toggle("md-toolbar-expanded", this.state.showMoreButtons);
     }
     if (this.toggleBtn) {
       this.toggleBtn.classList.toggle("md-toolbar-btn-active", this.state.showMoreButtons);
+      if (this.state.showMoreButtons) {
+        this.toggleBtn.style.display = "";
+      }
     }
   }
   createButton(name) {
@@ -43484,7 +43490,7 @@ class Toolbar {
     this.searchReplace = null;
     this.buttonElements.clear();
     this.dropdowns.clear();
-    this.overflowEl = null;
+    this.buttonsEl = null;
     this.toggleBtn = null;
     this.render();
     this.bindEvents();
@@ -43493,6 +43499,10 @@ class Toolbar {
     if (this.updateInterval) {
       clearInterval(this.updateInterval);
     }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
     this.unbindEvents();
     this.charMap?.destroy();
     this.emojiPicker?.destroy();
@@ -46002,8 +46012,8 @@ const availableLocales = Object.keys(locales);
 const TRANSLATION_KEYS = Object.keys(en);
 const lowlight = createLowlight(grammars);
 const fontNames = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva";
-const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize || lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
-const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote || lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link | ltr rtl | searchreplace";
+const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
+const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link | ltr rtl | searchreplace";
 const DEFAULT_FONT_SIZES = "8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt";
 let editorIdCounter = 0;
 let globalTranslate = (key) => key;

package/dist/styles.css

@@ -26,8 +26,7 @@
 
 .md-toolbar {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
   padding: 4px;
   background: #f0f0f0;
   border-bottom: 1px solid #ccc;
@@ -39,9 +38,6 @@
   top: 0;
   z-index: 10;
 }
-.md-toolbar.md-toolbar-sliding {
-  flex-wrap: wrap;
-}
 
 .md-toolbar-group {
   display: flex;
@@ -56,28 +52,24 @@
   margin: 0 4px;
 }
 
-.md-toolbar-primary {
+.md-toolbar-buttons {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 2px;
-  width: 100%;
-}
-
-.md-toolbar-overflow {
-  display: none;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 2px;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
+  max-height: 31px;
+  overflow: hidden;
+  transition: max-height 0.2s ease;
 }
-.md-toolbar-overflow.md-toolbar-overflow-visible {
-  display: flex;
+.md-toolbar-buttons.md-toolbar-expanded {
+  max-height: none;
 }
 
 .md-toolbar-toggle-btn {
-  margin-left: auto;
   flex-shrink: 0;
+  align-self: flex-start;
 }
 
 .md-toolbar-btn {
@@ -102,7 +94,7 @@
   background: #d0d0d0;
 }
 .md-toolbar-btn.md-toolbar-btn-active {
-  background: #207ab7;
+  background: #2271b2;
   color: #fff;
 }
 .md-toolbar-btn:disabled {
@@ -197,7 +189,7 @@
   background: #f0f0f0;
 }
 .md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
-  background: #207ab7;
+  background: #2271b2;
   color: #fff;
 }
 
@@ -286,13 +278,13 @@
   padding: 4px 12px;
   border: none;
   border-radius: 3px;
-  background: #207ab7;
+  background: #2271b2;
   color: #fff;
   cursor: pointer;
   font-size: 12px;
 }
 .md-toolbar-colorpicker-apply:hover {
-  background: #1a6399;
+  background: #2761c4;
 }
 
 .md-editor-content {
@@ -340,7 +332,7 @@
   font-size: 13px;
 }
 .md-editor-body a {
-  color: #207ab7;
+  color: #2271b2;
   text-decoration: underline;
 }
 .md-editor-body img {
@@ -452,9 +444,9 @@
   background: #f0f0f0;
 }
 .md-charmap-tab.md-charmap-tab-active {
-  background: #207ab7;
+  background: #2271b2;
   color: #fff;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-charmap-grid {
@@ -477,7 +469,7 @@
 }
 .md-charmap-char:hover {
   background: #f0f0f0;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-charmap-preview {
@@ -527,8 +519,8 @@
   background: #f0f0f0;
 }
 .md-emoji-tab.md-emoji-tab-active {
-  border-color: #207ab7;
-  background: rgba(32, 122, 183, 0.1);
+  border-color: #2271b2;
+  background: rgba(34, 113, 178, 0.1);
 }
 
 .md-emoji-search {
@@ -544,7 +536,7 @@
 }
 .md-emoji-search-input:focus {
   outline: none;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-emoji-grid {
@@ -599,7 +591,7 @@
 }
 .md-searchreplace-input:focus {
   outline: none;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-searchreplace-count {
@@ -643,12 +635,12 @@
   background: #f0f0f0;
 }
 .md-btn.md-btn-primary {
-  background: #207ab7;
-  border-color: #207ab7;
+  background: #2271b2;
+  border-color: #2271b2;
   color: #fff;
 }
 .md-btn.md-btn-primary:hover {
-  background: #1a6399;
+  background: #2761c4;
 }
 
 .md-image-upload-dialog {
@@ -675,9 +667,9 @@
   background: #f0f0f0;
 }
 .md-image-upload-tab.md-image-upload-tab-active {
-  background: #207ab7;
+  background: #2271b2;
   color: #fff;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-image-upload-dropzone {
@@ -694,12 +686,12 @@
   text-align: center;
 }
 .md-image-upload-dropzone:hover {
-  border-color: #207ab7;
-  background: rgba(32, 122, 183, 0.03);
+  border-color: #2271b2;
+  background: rgba(34, 113, 178, 0.03);
 }
 .md-image-upload-dropzone.md-image-upload-dropzone-active {
-  border-color: #207ab7;
-  background: rgba(32, 122, 183, 0.08);
+  border-color: #2271b2;
+  background: rgba(34, 113, 178, 0.08);
 }
 
 .md-image-upload-dropzone-icon {
@@ -736,7 +728,7 @@
 }
 .md-image-upload-row input:focus {
   outline: none;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-image-upload-preview {
@@ -781,7 +773,7 @@
 .md-image-upload-progress-fill {
   height: 100%;
   width: 0%;
-  background: #207ab7;
+  background: #2271b2;
   border-radius: 4px;
   transition: width 0.2s;
 }
@@ -821,7 +813,7 @@
 }
 .md-source-editor-textarea:focus {
   outline: none;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-source-editor-footer {
@@ -859,7 +851,7 @@
 .md-link-editor-input:focus,
 .md-link-editor-select:focus {
   outline: none;
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 
 .md-link-editor-select {
@@ -874,7 +866,7 @@
 }
 
 .md-editor-dragover .md-editor-content {
-  box-shadow: 0 0 10px 1px rgba(32, 122, 183, 0.5) inset;
+  box-shadow: 0 0 10px 1px rgba(34, 113, 178, 0.5) inset;
 }
 
 .md-editor-oxide-dark {
@@ -892,7 +884,7 @@
   background: #2d3e50;
 }
 .md-editor-oxide-dark .md-toolbar-btn.md-toolbar-btn-active {
-  background: #207ab7;
+  background: #2271b2;
 }
 .md-editor-oxide-dark .md-toolbar-dropdown-btn {
   color: #fff;
@@ -946,8 +938,8 @@
   border-color: #364049;
 }
 .md-editor-oxide-dark .md-image-upload-dropzone:hover, .md-editor-oxide-dark .md-image-upload-dropzone.md-image-upload-dropzone-active {
-  border-color: #207ab7;
-  background: rgba(32, 122, 183, 0.1);
+  border-color: #2271b2;
+  background: rgba(34, 113, 178, 0.1);
 }
 .md-editor-oxide-dark .md-image-upload-dropzone-icon {
   color: #666;
@@ -992,12 +984,12 @@
   background: #2d3e50;
 }
 .md-editor-oxide-dark .md-btn.md-btn-primary {
-  background: #207ab7;
-  border-color: #207ab7;
+  background: #2271b2;
+  border-color: #2271b2;
   color: #fff;
 }
 .md-editor-oxide-dark .md-btn.md-btn-primary:hover {
-  background: #1a6399;
+  background: #2761c4;
 }
 .md-editor-oxide-dark .md-source-editor-textarea {
   background: #1a252f;
@@ -1005,7 +997,7 @@
   color: #fff;
 }
 .md-editor-oxide-dark .md-source-editor-textarea:focus {
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 .md-editor-oxide-dark .md-link-editor-input,
 .md-editor-oxide-dark .md-link-editor-select {
@@ -1015,7 +1007,7 @@
 }
 .md-editor-oxide-dark .md-link-editor-input:focus,
 .md-editor-oxide-dark .md-link-editor-select:focus {
-  border-color: #207ab7;
+  border-color: #2271b2;
 }
 .md-editor-oxide-dark .md-link-editor-row label {
   color: #aaa;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdaemon/html-editor",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A TinyMCE-compatible HTML editor built on TipTap",
   "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
   "repository": {