@mdaemon/html-editor 1.0.12 → 1.1.0

package/dist/index.d.ts

@@ -131,6 +131,8 @@ export declare interface EditorConfig {
     toolbar?: string;
     toolbar_mode?: 'sliding' | 'floating' | 'wrap';
     toolbar_sticky?: boolean;
+    toolbar_narrow_breakpoint?: number;
+    toolbar_priority?: Record<string, number>;
     menubar?: boolean;
     contextmenu?: boolean | string;
     quickbars_selection_toolbar?: string;
@@ -369,6 +371,8 @@ export declare interface MDHTMLEditor {
     getTipTap(): Editor | null;
 }
 
+export declare const Mention: Node_2<any, any>;
+
 /**
  * Reset the global translation function to the default identity function.
  * This also clears the customized flag so that the next editor created
@@ -490,6 +494,11 @@ export declare class Toolbar {
     private icon;
     private render;
     private observeOverflow;
+    private scrollHandler;
+    private bindScrollIndicators;
+    private unbindScrollIndicators;
+    private updateScrollIndicators;
+    private getButtonPriority;
     private renderGroups;
     private createToggleButton;
     private toggleOverflow;
@@ -552,6 +561,8 @@ declare interface ToolbarOptions {
     customButtons: Map<string, ToolbarButtonSpec>;
     config: EditorConfig;
     iconSet: IconSet;
+    narrowBreakpoint: number;
+    priorityOverrides: Record<string, number>;
 }
 
 /**

package/dist/index.js

@@ -14316,9 +14316,9 @@ function createInnerSelectionForWholeDocList(tr2) {
   if (!list) {
     return null;
   }
-  const from2 = 1;
-  const to = list.nodeSize - 1;
-  return TextSelection.create(doc2, from2, to);
+  const $start = doc2.resolve(1);
+  const $end = doc2.resolve(list.nodeSize - 1);
+  return TextSelection.between($start, $end);
 }
 var toggleList = (listTypeOrName, itemTypeOrName, keepMarks, attributes = {}) => ({ editor, tr: tr2, state, dispatch, chain, commands, can }) => {
   const { extensions, splittableMarks } = editor.extensionManager;
@@ -14898,6 +14898,7 @@ var Extendable = class {
     });
     extension.name = this.name;
     extension.parent = this.parent;
+    this.child = null;
     return extension;
   }
   extend(extendedConfig = {}) {
@@ -15425,6 +15426,36 @@ var ExtensionManager = class {
       })
     );
   }
+  /**
+   * Destroy the extension manager and clean up all extension references
+   * to prevent memory leaks through parent/child extension chains.
+   *
+   * Walks each extension's full parent chain and nulls every forward
+   * `parent.child → current` link where the parent still points to the
+   * current node. This breaks the retention path from module-scope
+   * singleton roots through deep extend() chains.
+   *
+   * Only ancestor `.child` links matching the current chain are cleared.
+   * The `.parent` pointer on ancestors is never touched — extensions
+   * may be shared across live editors, so their own backward references
+   * and non-matching forward links must remain intact.
+   */
+  destroy() {
+    this.extensions.forEach((extension) => {
+      let current = extension;
+      while (current.parent) {
+        const parent = current.parent;
+        if (parent.child === current) {
+          parent.child = null;
+        }
+        current = parent;
+      }
+    });
+    this.extensions = [];
+    this.baseExtensions = [];
+    this.schema = null;
+    this.editor = null;
+  }
   /**
    * Go through all extensions, create extension storages & setup marks
    * & bind editor event listener.
@@ -15830,12 +15861,23 @@ var Paste = Extension.create({
 });
 var Tabindex = Extension.create({
   name: "tabindex",
+  addOptions() {
+    return {
+      value: void 0
+    };
+  },
   addProseMirrorPlugins() {
     return [
       new Plugin({
         key: new PluginKey("tabindex"),
         props: {
-          attributes: () => this.editor.isEditable ? { tabindex: "0" } : {}
+          attributes: () => {
+            var _a;
+            if (!this.editor.isEditable && this.options.value === void 0) {
+              return {};
+            }
+            return { tabindex: (_a = this.options.value) != null ? _a : "0" };
+          }
         }
       })
     ];
@@ -16166,6 +16208,7 @@ var Editor = class extends EventEmitter {
     this.className = "tiptap";
     this.editorView = null;
     this.isFocused = false;
+    this.destroyed = false;
     this.isInitialized = false;
     this.extensionStorage = {};
     this.instanceId = Math.random().toString(36).slice(2, 9);
@@ -16448,7 +16491,7 @@ var Editor = class extends EventEmitter {
    * Creates an extension manager.
    */
   createExtensionManager() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const coreExtensions = this.options.enableCoreExtensions ? [
       Editable,
       ClipboardTextSerializer.configure({
@@ -16457,7 +16500,9 @@ var Editor = class extends EventEmitter {
       Commands,
       FocusEvents,
       Keymap,
-      Tabindex,
+      Tabindex.configure({
+        value: (_d = (_c = this.options.coreExtensionOptions) == null ? void 0 : _c.tabindex) == null ? void 0 : _d.value
+      }),
       Drop,
       Paste,
       Delete,
@@ -16694,9 +16739,18 @@ var Editor = class extends EventEmitter {
    * Destroy the editor.
    */
   destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
     this.emit("destroy");
     this.unmount();
     this.removeAllListeners();
+    this.extensionManager.destroy();
+    this.extensionManager = null;
+    this.schema = null;
+    this.commandManager = null;
+    this.extensionStorage = {};
   }
   /**
    * Check if the editor is already destroyed.
@@ -20461,6 +20515,25 @@ var BulletList = Node3.create({
     return [inputRule];
   }
 });
+function isSameLineOrderedListToken(token) {
+  var _a, _b;
+  const nestedToken = (_a = token.tokens) == null ? void 0 : _a[0];
+  return Boolean(
+    token.text && ((_b = token.tokens) == null ? void 0 : _b.length) === 1 && (nestedToken == null ? void 0 : nestedToken.type) === "list" && nestedToken.ordered && nestedToken.raw === token.text
+  );
+}
+function parseSameLineOrderedListText(text, helpers) {
+  if (helpers.tokenizeInline) {
+    return helpers.parseInline(helpers.tokenizeInline(text));
+  }
+  return helpers.parseInline([
+    {
+      type: "text",
+      raw: text,
+      text
+    }
+  ]);
+}
 var ListItem = Node3.create({
   name: "listItem",
   addOptions() {
@@ -20491,6 +20564,17 @@ var ListItem = Node3.create({
     const parseBlockChildren = (_a = helpers.parseBlockChildren) != null ? _a : helpers.parseChildren;
     let content = [];
     if (token.tokens && token.tokens.length > 0) {
+      if (isSameLineOrderedListToken(token)) {
+        return {
+          type: "listItem",
+          content: [
+            {
+              type: "paragraph",
+              content: parseSameLineOrderedListText(token.text || "", helpers)
+            }
+          ]
+        };
+      }
       const hasParagraphTokens = token.tokens.some((t) => t.type === "paragraph");
       if (hasParagraphTokens) {
         content = parseBlockChildren(token.tokens);
@@ -20795,6 +20879,36 @@ var ListKeymap = Extension.create({
 });
 var ORDERED_LIST_ITEM_REGEX = /^(\s*)(\d+)\.\s+(.*)$/;
 var INDENTED_LINE_REGEX = /^\s/;
+function isBlockContentLine(line) {
+  const trimmedLine = line.trimStart();
+  return /^[-+*]\s+/.test(trimmedLine) || /^\d+\.\s+/.test(trimmedLine) || /^>\s?/.test(trimmedLine) || /^```/.test(trimmedLine) || /^~~~/.test(trimmedLine);
+}
+function splitItemContent(contentLines) {
+  const paragraphLines = [];
+  const blockLines = [];
+  let reachedBlockBoundary = false;
+  contentLines.forEach((line) => {
+    if (reachedBlockBoundary) {
+      blockLines.push(line);
+      return;
+    }
+    if (line.trim() === "") {
+      reachedBlockBoundary = true;
+      blockLines.push(line);
+      return;
+    }
+    if (paragraphLines.length > 0 && isBlockContentLine(line)) {
+      reachedBlockBoundary = true;
+      blockLines.push(line);
+      return;
+    }
+    paragraphLines.push(line);
+  });
+  return {
+    paragraphLines,
+    blockLines
+  };
+}
 function collectOrderedListItems(lines) {
   const listItems = [];
   let currentLineIndex = 0;
@@ -20807,9 +20921,10 @@ function collectOrderedListItems(lines) {
     }
     const [, indent, number, content] = match;
     const indentLevel = indent.length;
-    let itemContent = content;
+    const itemContentLines = [content];
     let nextLineIndex = currentLineIndex + 1;
     const itemLines = [line];
+    let sawBlankLine = false;
     while (nextLineIndex < lines.length) {
       const nextLine = lines[nextLineIndex];
       const nextMatch = nextLine.match(ORDERED_LIST_ITEM_REGEX);
@@ -20818,21 +20933,27 @@ function collectOrderedListItems(lines) {
       }
       if (nextLine.trim() === "") {
         itemLines.push(nextLine);
-        itemContent += "\n";
+        itemContentLines.push("");
+        sawBlankLine = true;
         nextLineIndex += 1;
       } else if (nextLine.match(INDENTED_LINE_REGEX)) {
         itemLines.push(nextLine);
-        itemContent += `
-${nextLine.slice(indentLevel + 2)}`;
+        itemContentLines.push(nextLine.slice(indentLevel + 2));
         nextLineIndex += 1;
       } else {
-        break;
+        if (sawBlankLine) {
+          break;
+        }
+        itemLines.push(nextLine);
+        itemContentLines.push(nextLine);
+        nextLineIndex += 1;
       }
     }
     listItems.push({
       indent: indentLevel,
       number: parseInt(number, 10),
-      content: itemContent.trim(),
+      content: itemContentLines.join("\n").trim(),
+      contentLines: itemContentLines,
       raw: itemLines.join("\n")
     });
     consumed = nextLineIndex;
@@ -20841,14 +20962,13 @@ ${nextLine.slice(indentLevel + 2)}`;
   return [listItems, consumed];
 }
 function buildNestedStructure(items, baseIndent, lexer) {
-  var _a;
   const result = [];
   let currentIndex = 0;
   while (currentIndex < items.length) {
     const item = items[currentIndex];
     if (item.indent === baseIndent) {
-      const contentLines = item.content.split("\n");
-      const mainText = ((_a = contentLines[0]) == null ? void 0 : _a.trim()) || "";
+      const { paragraphLines, blockLines } = splitItemContent(item.contentLines);
+      const mainText = paragraphLines.join("\n").trim();
       const tokens = [];
       if (mainText) {
         tokens.push({
@@ -20857,7 +20977,7 @@ function buildNestedStructure(items, baseIndent, lexer) {
           tokens: lexer.inlineTokens(mainText)
         });
       }
-      const additionalContent = contentLines.slice(1).join("\n").trim();
+      const additionalContent = blockLines.join("\n").trim();
       if (additionalContent) {
         const blockTokens = lexer.blockTokens(additionalContent);
         tokens.push(...blockTokens);
@@ -25857,6 +25977,14 @@ var Table = Node3.create({
       })
     ];
   },
+  addNodeView() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+    const View = this.options.View;
+    if (isResizable || !View) {
+      return null;
+    }
+    return ({ node, view }) => new View(node, this.options.cellMinWidth, view);
+  },
   extendNodeSchema(extension) {
     const context = {
       name: extension.name,
@@ -42742,6 +42870,15 @@ class LinkEditor {
     }
   }
 }
+const DEFAULT_BUTTON_PRIORITY = {
+  bold: 1,
+  italic: 1,
+  underline: 1,
+  undo: 1,
+  redo: 1,
+  link: 1,
+  forecolor: 1
+};
 const DEFAULT_COLORS = [
   { value: "#000000", label: "Black" },
   { value: "#434343", label: "Dark Gray 4" },
@@ -42806,7 +42943,8 @@ class Toolbar {
     this.options = options;
     this.state = {
       isFullscreen: false,
-      showMoreButtons: false
+      showMoreButtons: false,
+      isNarrow: false
     };
     this.render();
     this.bindEvents();
@@ -42841,12 +42979,79 @@ class Toolbar {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
+    const editorRoot = this.container.closest(".md-editor");
     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";
+      if (editorRoot) {
+        const width = editorRoot.offsetWidth;
+        const breakpoint = this.options.narrowBreakpoint;
+        const wasNarrow = this.state.isNarrow;
+        this.state.isNarrow = width <= breakpoint;
+        editorRoot.classList.toggle("md-editor-narrow", this.state.isNarrow);
+        if (this.state.isNarrow) {
+          this.toggleBtn.style.display = "none";
+          if (this.state.showMoreButtons) {
+            this.state.showMoreButtons = false;
+            this.buttonsEl.classList.remove("md-toolbar-expanded");
+            this.toggleBtn.classList.remove("md-toolbar-btn-active");
+          }
+          this.updateScrollIndicators();
+          if (!wasNarrow) {
+            this.bindScrollIndicators();
+          }
+        } else {
+          if (wasNarrow) {
+            this.unbindScrollIndicators();
+          }
+          const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
+          this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
+        }
+      } else {
+        const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
+        this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
+      }
     });
     this.resizeObserver.observe(this.buttonsEl);
+    if (editorRoot) {
+      this.resizeObserver.observe(editorRoot);
+    }
+  }
+  scrollHandler = null;
+  bindScrollIndicators() {
+    if (!this.buttonsEl) return;
+    this.scrollHandler = () => this.updateScrollIndicators();
+    this.buttonsEl.addEventListener("scroll", this.scrollHandler, { passive: true });
+  }
+  unbindScrollIndicators() {
+    if (this.buttonsEl && this.scrollHandler) {
+      this.buttonsEl.removeEventListener("scroll", this.scrollHandler);
+      this.scrollHandler = null;
+    }
+    this.container.classList.remove("md-toolbar-scroll-start", "md-toolbar-scroll-middle", "md-toolbar-scroll-end");
+  }
+  updateScrollIndicators() {
+    if (!this.buttonsEl) return;
+    const { scrollLeft, scrollWidth, clientWidth } = this.buttonsEl;
+    const maxScroll = scrollWidth - clientWidth;
+    if (maxScroll <= 1) {
+      this.container.classList.remove("md-toolbar-scroll-start", "md-toolbar-scroll-middle", "md-toolbar-scroll-end");
+      return;
+    }
+    const atStart = scrollLeft <= 1;
+    const atEnd = scrollLeft >= maxScroll - 1;
+    this.container.classList.remove("md-toolbar-scroll-start", "md-toolbar-scroll-middle", "md-toolbar-scroll-end");
+    if (atStart) {
+      this.container.classList.add("md-toolbar-scroll-start");
+    } else if (atEnd) {
+      this.container.classList.add("md-toolbar-scroll-end");
+    } else {
+      this.container.classList.add("md-toolbar-scroll-middle");
+    }
+  }
+  getButtonPriority(name) {
+    const overrides = this.options.priorityOverrides;
+    if (overrides[name] !== void 0) return overrides[name];
+    return DEFAULT_BUTTON_PRIORITY[name] ?? 2;
   }
   renderGroups(buttonsStr, parent) {
     const groups = buttonsStr.split("|").map((g) => g.trim()).filter(Boolean);
@@ -42854,13 +43059,18 @@ class Toolbar {
       const groupEl = document.createElement("div");
       groupEl.className = "md-toolbar-group";
       const buttons = group.split(" ").filter(Boolean);
+      let groupMinPriority = 2;
       buttons.forEach((buttonName) => {
         const buttonEl = this.createButton(buttonName);
         if (buttonEl) {
+          const priority = this.getButtonPriority(buttonName);
+          buttonEl.setAttribute("data-priority", String(priority));
+          if (priority < groupMinPriority) groupMinPriority = priority;
           groupEl.appendChild(buttonEl);
           this.buttonElements.set(buttonName, buttonEl);
         }
       });
+      groupEl.setAttribute("data-priority", String(groupMinPriority));
       parent.appendChild(groupEl);
       if (index < groups.length - 1) {
         const separator = document.createElement("div");
@@ -43534,6 +43744,7 @@ class Toolbar {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
     }
+    this.unbindScrollIndicators();
     this.unbindEvents();
     this.charMap?.destroy();
     this.emojiPicker?.destroy();
@@ -43774,6 +43985,54 @@ const SignatureBlock = Node3.create({
     return ["div", mergeAttributes(HTMLAttributes), 0];
   }
 });
+const Mention = Node3.create({
+  name: "mention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      jid: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-jid"),
+        renderHTML: (attributes) => {
+          if (!attributes.jid) return {};
+          return { "data-jid": attributes.jid };
+        }
+      },
+      display: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-display"),
+        renderHTML: (attributes) => {
+          if (!attributes.display) return {};
+          return { "data-display": attributes.display };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span.composer-mention"
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(
+        {
+          class: "composer-mention",
+          contenteditable: "false"
+        },
+        HTMLAttributes
+      ),
+      `@${node.attrs.display}`
+    ];
+  }
+});
 const en = {
   "Bold": "Bold",
   "Italic": "Italic",
@@ -46142,7 +46401,9 @@ class HTMLEditor {
       entity_encoding: config.entity_encoding ?? "raw",
       valid_children: config.valid_children,
       convert_unsafe_embeds: config.convert_unsafe_embeds ?? true,
-      format_empty_lines: config.format_empty_lines ?? true
+      format_empty_lines: config.format_empty_lines ?? true,
+      toolbar_narrow_breakpoint: config.toolbar_narrow_breakpoint,
+      toolbar_priority: config.toolbar_priority
     };
   }
   createEditor() {
@@ -46220,7 +46481,9 @@ class HTMLEditor {
       sticky: this.config.toolbar_sticky ?? true,
       customButtons: this.customButtons,
       config: this.config,
-      iconSet
+      iconSet,
+      narrowBreakpoint: this.config.toolbar_narrow_breakpoint ?? 768,
+      priorityOverrides: this.config.toolbar_priority ?? {}
     });
     if (this.config.auto_focus) {
       setTimeout(() => this.focus(), 10);
@@ -46304,6 +46567,7 @@ class HTMLEditor {
         // We use CodeBlockLowlight instead
       }),
       SignatureBlock,
+      Mention,
       Underline,
       TextStyle,
       FontFamily,
@@ -46565,6 +46829,7 @@ exports.FontSize = FontSize;
 exports.HTMLEditor = HTMLEditor;
 exports.LineHeight = LineHeight;
 exports.LinkEditor = LinkEditor;
+exports.Mention = Mention;
 exports.SearchReplace = SearchReplace;
 exports.SignatureBlock = SignatureBlock;
 exports.SourceEditor = SourceEditor;

package/dist/index.mjs

@@ -14314,9 +14314,9 @@ function createInnerSelectionForWholeDocList(tr2) {
   if (!list) {
     return null;
   }
-  const from2 = 1;
-  const to = list.nodeSize - 1;
-  return TextSelection.create(doc2, from2, to);
+  const $start = doc2.resolve(1);
+  const $end = doc2.resolve(list.nodeSize - 1);
+  return TextSelection.between($start, $end);
 }
 var toggleList = (listTypeOrName, itemTypeOrName, keepMarks, attributes = {}) => ({ editor, tr: tr2, state, dispatch, chain, commands, can }) => {
   const { extensions, splittableMarks } = editor.extensionManager;
@@ -14896,6 +14896,7 @@ var Extendable = class {
     });
     extension.name = this.name;
     extension.parent = this.parent;
+    this.child = null;
     return extension;
   }
   extend(extendedConfig = {}) {
@@ -15423,6 +15424,36 @@ var ExtensionManager = class {
       })
     );
   }
+  /**
+   * Destroy the extension manager and clean up all extension references
+   * to prevent memory leaks through parent/child extension chains.
+   *
+   * Walks each extension's full parent chain and nulls every forward
+   * `parent.child → current` link where the parent still points to the
+   * current node. This breaks the retention path from module-scope
+   * singleton roots through deep extend() chains.
+   *
+   * Only ancestor `.child` links matching the current chain are cleared.
+   * The `.parent` pointer on ancestors is never touched — extensions
+   * may be shared across live editors, so their own backward references
+   * and non-matching forward links must remain intact.
+   */
+  destroy() {
+    this.extensions.forEach((extension) => {
+      let current = extension;
+      while (current.parent) {
+        const parent = current.parent;
+        if (parent.child === current) {
+          parent.child = null;
+        }
+        current = parent;
+      }
+    });
+    this.extensions = [];
+    this.baseExtensions = [];
+    this.schema = null;
+    this.editor = null;
+  }
   /**
    * Go through all extensions, create extension storages & setup marks
    * & bind editor event listener.
@@ -15828,12 +15859,23 @@ var Paste = Extension.create({
 });
 var Tabindex = Extension.create({
   name: "tabindex",
+  addOptions() {
+    return {
+      value: void 0
+    };
+  },
   addProseMirrorPlugins() {
     return [
       new Plugin({
         key: new PluginKey("tabindex"),
         props: {
-          attributes: () => this.editor.isEditable ? { tabindex: "0" } : {}
+          attributes: () => {
+            var _a;
+            if (!this.editor.isEditable && this.options.value === void 0) {
+              return {};
+            }
+            return { tabindex: (_a = this.options.value) != null ? _a : "0" };
+          }
         }
       })
     ];
@@ -16164,6 +16206,7 @@ var Editor = class extends EventEmitter {
     this.className = "tiptap";
     this.editorView = null;
     this.isFocused = false;
+    this.destroyed = false;
     this.isInitialized = false;
     this.extensionStorage = {};
     this.instanceId = Math.random().toString(36).slice(2, 9);
@@ -16446,7 +16489,7 @@ var Editor = class extends EventEmitter {
    * Creates an extension manager.
    */
   createExtensionManager() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const coreExtensions = this.options.enableCoreExtensions ? [
       Editable,
       ClipboardTextSerializer.configure({
@@ -16455,7 +16498,9 @@ var Editor = class extends EventEmitter {
       Commands,
       FocusEvents,
       Keymap,
-      Tabindex,
+      Tabindex.configure({
+        value: (_d = (_c = this.options.coreExtensionOptions) == null ? void 0 : _c.tabindex) == null ? void 0 : _d.value
+      }),
       Drop,
       Paste,
       Delete,
@@ -16692,9 +16737,18 @@ var Editor = class extends EventEmitter {
    * Destroy the editor.
    */
   destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
     this.emit("destroy");
     this.unmount();
     this.removeAllListeners();
+    this.extensionManager.destroy();
+    this.extensionManager = null;
+    this.schema = null;
+    this.commandManager = null;
+    this.extensionStorage = {};
   }
   /**
    * Check if the editor is already destroyed.
@@ -20459,6 +20513,25 @@ var BulletList = Node3.create({
     return [inputRule];
   }
 });
+function isSameLineOrderedListToken(token) {
+  var _a, _b;
+  const nestedToken = (_a = token.tokens) == null ? void 0 : _a[0];
+  return Boolean(
+    token.text && ((_b = token.tokens) == null ? void 0 : _b.length) === 1 && (nestedToken == null ? void 0 : nestedToken.type) === "list" && nestedToken.ordered && nestedToken.raw === token.text
+  );
+}
+function parseSameLineOrderedListText(text, helpers) {
+  if (helpers.tokenizeInline) {
+    return helpers.parseInline(helpers.tokenizeInline(text));
+  }
+  return helpers.parseInline([
+    {
+      type: "text",
+      raw: text,
+      text
+    }
+  ]);
+}
 var ListItem = Node3.create({
   name: "listItem",
   addOptions() {
@@ -20489,6 +20562,17 @@ var ListItem = Node3.create({
     const parseBlockChildren = (_a = helpers.parseBlockChildren) != null ? _a : helpers.parseChildren;
     let content = [];
     if (token.tokens && token.tokens.length > 0) {
+      if (isSameLineOrderedListToken(token)) {
+        return {
+          type: "listItem",
+          content: [
+            {
+              type: "paragraph",
+              content: parseSameLineOrderedListText(token.text || "", helpers)
+            }
+          ]
+        };
+      }
       const hasParagraphTokens = token.tokens.some((t) => t.type === "paragraph");
       if (hasParagraphTokens) {
         content = parseBlockChildren(token.tokens);
@@ -20793,6 +20877,36 @@ var ListKeymap = Extension.create({
 });
 var ORDERED_LIST_ITEM_REGEX = /^(\s*)(\d+)\.\s+(.*)$/;
 var INDENTED_LINE_REGEX = /^\s/;
+function isBlockContentLine(line) {
+  const trimmedLine = line.trimStart();
+  return /^[-+*]\s+/.test(trimmedLine) || /^\d+\.\s+/.test(trimmedLine) || /^>\s?/.test(trimmedLine) || /^```/.test(trimmedLine) || /^~~~/.test(trimmedLine);
+}
+function splitItemContent(contentLines) {
+  const paragraphLines = [];
+  const blockLines = [];
+  let reachedBlockBoundary = false;
+  contentLines.forEach((line) => {
+    if (reachedBlockBoundary) {
+      blockLines.push(line);
+      return;
+    }
+    if (line.trim() === "") {
+      reachedBlockBoundary = true;
+      blockLines.push(line);
+      return;
+    }
+    if (paragraphLines.length > 0 && isBlockContentLine(line)) {
+      reachedBlockBoundary = true;
+      blockLines.push(line);
+      return;
+    }
+    paragraphLines.push(line);
+  });
+  return {
+    paragraphLines,
+    blockLines
+  };
+}
 function collectOrderedListItems(lines) {
   const listItems = [];
   let currentLineIndex = 0;
@@ -20805,9 +20919,10 @@ function collectOrderedListItems(lines) {
     }
     const [, indent, number, content] = match;
     const indentLevel = indent.length;
-    let itemContent = content;
+    const itemContentLines = [content];
     let nextLineIndex = currentLineIndex + 1;
     const itemLines = [line];
+    let sawBlankLine = false;
     while (nextLineIndex < lines.length) {
       const nextLine = lines[nextLineIndex];
       const nextMatch = nextLine.match(ORDERED_LIST_ITEM_REGEX);
@@ -20816,21 +20931,27 @@ function collectOrderedListItems(lines) {
       }
       if (nextLine.trim() === "") {
         itemLines.push(nextLine);
-        itemContent += "\n";
+        itemContentLines.push("");
+        sawBlankLine = true;
         nextLineIndex += 1;
       } else if (nextLine.match(INDENTED_LINE_REGEX)) {
         itemLines.push(nextLine);
-        itemContent += `
-${nextLine.slice(indentLevel + 2)}`;
+        itemContentLines.push(nextLine.slice(indentLevel + 2));
         nextLineIndex += 1;
       } else {
-        break;
+        if (sawBlankLine) {
+          break;
+        }
+        itemLines.push(nextLine);
+        itemContentLines.push(nextLine);
+        nextLineIndex += 1;
       }
     }
     listItems.push({
       indent: indentLevel,
       number: parseInt(number, 10),
-      content: itemContent.trim(),
+      content: itemContentLines.join("\n").trim(),
+      contentLines: itemContentLines,
       raw: itemLines.join("\n")
     });
     consumed = nextLineIndex;
@@ -20839,14 +20960,13 @@ ${nextLine.slice(indentLevel + 2)}`;
   return [listItems, consumed];
 }
 function buildNestedStructure(items, baseIndent, lexer) {
-  var _a;
   const result = [];
   let currentIndex = 0;
   while (currentIndex < items.length) {
     const item = items[currentIndex];
     if (item.indent === baseIndent) {
-      const contentLines = item.content.split("\n");
-      const mainText = ((_a = contentLines[0]) == null ? void 0 : _a.trim()) || "";
+      const { paragraphLines, blockLines } = splitItemContent(item.contentLines);
+      const mainText = paragraphLines.join("\n").trim();
       const tokens = [];
       if (mainText) {
         tokens.push({
@@ -20855,7 +20975,7 @@ function buildNestedStructure(items, baseIndent, lexer) {
           tokens: lexer.inlineTokens(mainText)
         });
       }
-      const additionalContent = contentLines.slice(1).join("\n").trim();
+      const additionalContent = blockLines.join("\n").trim();
       if (additionalContent) {
         const blockTokens = lexer.blockTokens(additionalContent);
         tokens.push(...blockTokens);
@@ -25855,6 +25975,14 @@ var Table = Node3.create({
       })
     ];
   },
+  addNodeView() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+    const View = this.options.View;
+    if (isResizable || !View) {
+      return null;
+    }
+    return ({ node, view }) => new View(node, this.options.cellMinWidth, view);
+  },
   extendNodeSchema(extension) {
     const context = {
       name: extension.name,
@@ -42740,6 +42868,15 @@ class LinkEditor {
     }
   }
 }
+const DEFAULT_BUTTON_PRIORITY = {
+  bold: 1,
+  italic: 1,
+  underline: 1,
+  undo: 1,
+  redo: 1,
+  link: 1,
+  forecolor: 1
+};
 const DEFAULT_COLORS = [
   { value: "#000000", label: "Black" },
   { value: "#434343", label: "Dark Gray 4" },
@@ -42804,7 +42941,8 @@ class Toolbar {
     this.options = options;
     this.state = {
       isFullscreen: false,
-      showMoreButtons: false
+      showMoreButtons: false,
+      isNarrow: false
     };
     this.render();
     this.bindEvents();
@@ -42839,12 +42977,79 @@ class Toolbar {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
+    const editorRoot = this.container.closest(".md-editor");
     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";
+      if (editorRoot) {
+        const width = editorRoot.offsetWidth;
+        const breakpoint = this.options.narrowBreakpoint;
+        const wasNarrow = this.state.isNarrow;
+        this.state.isNarrow = width <= breakpoint;
+        editorRoot.classList.toggle("md-editor-narrow", this.state.isNarrow);
+        if (this.state.isNarrow) {
+          this.toggleBtn.style.display = "none";
+          if (this.state.showMoreButtons) {
+            this.state.showMoreButtons = false;
+            this.buttonsEl.classList.remove("md-toolbar-expanded");
+            this.toggleBtn.classList.remove("md-toolbar-btn-active");
+          }
+          this.updateScrollIndicators();
+          if (!wasNarrow) {
+            this.bindScrollIndicators();
+          }
+        } else {
+          if (wasNarrow) {
+            this.unbindScrollIndicators();
+          }
+          const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
+          this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
+        }
+      } else {
+        const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
+        this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
+      }
     });
     this.resizeObserver.observe(this.buttonsEl);
+    if (editorRoot) {
+      this.resizeObserver.observe(editorRoot);
+    }
+  }
+  scrollHandler = null;
+  bindScrollIndicators() {
+    if (!this.buttonsEl) return;
+    this.scrollHandler = () => this.updateScrollIndicators();
+    this.buttonsEl.addEventListener("scroll", this.scrollHandler, { passive: true });
+  }
+  unbindScrollIndicators() {
+    if (this.buttonsEl && this.scrollHandler) {
+      this.buttonsEl.removeEventListener("scroll", this.scrollHandler);
+      this.scrollHandler = null;
+    }
+    this.container.classList.remove("md-toolbar-scroll-start", "md-toolbar-scroll-middle", "md-toolbar-scroll-end");
+  }
+  updateScrollIndicators() {
+    if (!this.buttonsEl) return;
+    const { scrollLeft, scrollWidth, clientWidth } = this.buttonsEl;
+    const maxScroll = scrollWidth - clientWidth;
+    if (maxScroll <= 1) {
+      this.container.classList.remove("md-toolbar-scroll-start", "md-toolbar-scroll-middle", "md-toolbar-scroll-end");
+      return;
+    }
+    const atStart = scrollLeft <= 1;
+    const atEnd = scrollLeft >= maxScroll - 1;
+    this.container.classList.remove("md-toolbar-scroll-start", "md-toolbar-scroll-middle", "md-toolbar-scroll-end");
+    if (atStart) {
+      this.container.classList.add("md-toolbar-scroll-start");
+    } else if (atEnd) {
+      this.container.classList.add("md-toolbar-scroll-end");
+    } else {
+      this.container.classList.add("md-toolbar-scroll-middle");
+    }
+  }
+  getButtonPriority(name) {
+    const overrides = this.options.priorityOverrides;
+    if (overrides[name] !== void 0) return overrides[name];
+    return DEFAULT_BUTTON_PRIORITY[name] ?? 2;
   }
   renderGroups(buttonsStr, parent) {
     const groups = buttonsStr.split("|").map((g) => g.trim()).filter(Boolean);
@@ -42852,13 +43057,18 @@ class Toolbar {
       const groupEl = document.createElement("div");
       groupEl.className = "md-toolbar-group";
       const buttons = group.split(" ").filter(Boolean);
+      let groupMinPriority = 2;
       buttons.forEach((buttonName) => {
         const buttonEl = this.createButton(buttonName);
         if (buttonEl) {
+          const priority = this.getButtonPriority(buttonName);
+          buttonEl.setAttribute("data-priority", String(priority));
+          if (priority < groupMinPriority) groupMinPriority = priority;
           groupEl.appendChild(buttonEl);
           this.buttonElements.set(buttonName, buttonEl);
         }
       });
+      groupEl.setAttribute("data-priority", String(groupMinPriority));
       parent.appendChild(groupEl);
       if (index < groups.length - 1) {
         const separator = document.createElement("div");
@@ -43532,6 +43742,7 @@ class Toolbar {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
     }
+    this.unbindScrollIndicators();
     this.unbindEvents();
     this.charMap?.destroy();
     this.emojiPicker?.destroy();
@@ -43772,6 +43983,54 @@ const SignatureBlock = Node3.create({
     return ["div", mergeAttributes(HTMLAttributes), 0];
   }
 });
+const Mention = Node3.create({
+  name: "mention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      jid: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-jid"),
+        renderHTML: (attributes) => {
+          if (!attributes.jid) return {};
+          return { "data-jid": attributes.jid };
+        }
+      },
+      display: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-display"),
+        renderHTML: (attributes) => {
+          if (!attributes.display) return {};
+          return { "data-display": attributes.display };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span.composer-mention"
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(
+        {
+          class: "composer-mention",
+          contenteditable: "false"
+        },
+        HTMLAttributes
+      ),
+      `@${node.attrs.display}`
+    ];
+  }
+});
 const en = {
   "Bold": "Bold",
   "Italic": "Italic",
@@ -46140,7 +46399,9 @@ class HTMLEditor {
       entity_encoding: config.entity_encoding ?? "raw",
       valid_children: config.valid_children,
       convert_unsafe_embeds: config.convert_unsafe_embeds ?? true,
-      format_empty_lines: config.format_empty_lines ?? true
+      format_empty_lines: config.format_empty_lines ?? true,
+      toolbar_narrow_breakpoint: config.toolbar_narrow_breakpoint,
+      toolbar_priority: config.toolbar_priority
     };
   }
   createEditor() {
@@ -46218,7 +46479,9 @@ class HTMLEditor {
       sticky: this.config.toolbar_sticky ?? true,
       customButtons: this.customButtons,
       config: this.config,
-      iconSet
+      iconSet,
+      narrowBreakpoint: this.config.toolbar_narrow_breakpoint ?? 768,
+      priorityOverrides: this.config.toolbar_priority ?? {}
     });
     if (this.config.auto_focus) {
       setTimeout(() => this.focus(), 10);
@@ -46302,6 +46565,7 @@ class HTMLEditor {
         // We use CodeBlockLowlight instead
       }),
       SignatureBlock,
+      Mention,
       Underline,
       TextStyle,
       FontFamily,
@@ -46564,6 +46828,7 @@ export {
   HTMLEditor,
   LineHeight,
   LinkEditor,
+  Mention,
   SearchReplace,
   SignatureBlock,
   SourceEditor,

package/dist/styles.css

@@ -48,6 +48,7 @@
   align-items: flex-start;
   padding: 4px;
   background: #f0f0f0;
+  --md-toolbar-bg: #f0f0f0;
   border-bottom: 1px solid #ccc;
   gap: 2px;
   min-height: 39px;
@@ -340,9 +341,12 @@
   min-height: 0;
   overflow: auto;
   background: #fff;
+  display: flex;
+  flex-direction: column;
 }
 
 .md-editor-body {
+  flex: 1;
   padding: 16px;
   min-height: 200px;
   outline: none;
@@ -982,6 +986,7 @@
 }
 .md-editor-oxide-dark .md-toolbar {
   background: #1a252f;
+  --md-toolbar-bg: #1a252f;
   border-color: #364049;
 }
 .md-editor-oxide-dark .md-toolbar-btn {
@@ -1127,6 +1132,7 @@
 }
 .md-editor-confab .md-toolbar {
   background: var(--color-confab-gray-50, #f9fafb);
+  --md-toolbar-bg: var(--color-confab-gray-50, #f9fafb);
   border-color: var(--color-confab-gray-200, #e5e7eb);
 }
 .md-editor-confab .md-toolbar-btn {
@@ -1290,6 +1296,7 @@
 }
 .md-editor-confab-dark .md-toolbar {
   background: var(--color-dark-bg-secondary, #1e1e1e);
+  --md-toolbar-bg: var(--color-dark-bg-secondary, #1e1e1e);
   border-color: var(--color-dark-border, #333);
 }
 .md-editor-confab-dark .md-toolbar-btn {
@@ -1486,4 +1493,108 @@
 }
 .md-editor-confab-dark .md-link-editor-row label {
   color: var(--color-dark-text-muted, #888);
+}
+
+.md-editor-narrow .md-toolbar-buttons {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-height: none;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+.md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar {
+  height: 4px;
+}
+.md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-track {
+  background: transparent;
+}
+.md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+.md-editor-narrow .md-toolbar-toggle-btn {
+  display: none !important;
+}
+.md-editor-narrow .md-toolbar-group {
+  flex-shrink: 0;
+}
+.md-editor-narrow .md-toolbar-separator {
+  flex-shrink: 0;
+}
+
+@media (pointer: coarse) {
+  .md-editor-narrow .md-toolbar-buttons {
+    scrollbar-width: none;
+  }
+  .md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar {
+    display: none;
+  }
+}
+.md-editor-oxide-dark.md-editor-narrow .md-toolbar-buttons,
+.md-editor-confab-dark.md-editor-narrow .md-toolbar-buttons {
+  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+}
+.md-editor-oxide-dark.md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-thumb,
+.md-editor-confab-dark.md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.md-editor-narrow .md-toolbar {
+  position: relative;
+}
+.md-editor-narrow .md-toolbar::before, .md-editor-narrow .md-toolbar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.md-editor-narrow .md-toolbar::before {
+  left: 0;
+  background: linear-gradient(to right, var(--md-toolbar-bg, #f0f0f0), transparent);
+}
+.md-editor-narrow .md-toolbar::after {
+  right: 0;
+  background: linear-gradient(to left, var(--md-toolbar-bg, #f0f0f0), transparent);
+}
+.md-editor-narrow .md-toolbar.md-toolbar-scroll-start::after {
+  opacity: 1;
+}
+.md-editor-narrow .md-toolbar.md-toolbar-scroll-middle::before, .md-editor-narrow .md-toolbar.md-toolbar-scroll-middle::after {
+  opacity: 1;
+}
+.md-editor-narrow .md-toolbar.md-toolbar-scroll-end::before {
+  opacity: 1;
+}
+
+@media (pointer: coarse) {
+  .md-editor .md-toolbar {
+    min-height: 52px;
+  }
+  .md-editor:not(.md-editor-narrow) .md-editor .md-toolbar-buttons {
+    max-height: 44px;
+  }
+  .md-editor:not(.md-editor-narrow) .md-editor .md-toolbar-buttons.md-toolbar-expanded {
+    max-height: none;
+  }
+  .md-editor .md-toolbar-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .md-editor .md-toolbar-dropdown-btn {
+    min-height: 44px;
+  }
+  .md-editor .md-toolbar-colorpicker-btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  .md-editor .md-toolbar-separator {
+    height: 32px;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdaemon/html-editor",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "A TinyMCE-compatible HTML editor built on TipTap",
   "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
   "repository": {
@@ -60,24 +60,24 @@
   },
   "license": "LGPL-3.0-or-later",
   "dependencies": {
-    "@tiptap/core": "^3.22.3",
-    "@tiptap/extension-character-count": "^3.22.3",
-    "@tiptap/extension-code-block-lowlight": "^3.22.3",
-    "@tiptap/extension-color": "^3.22.3",
-    "@tiptap/extension-font-family": "^3.22.3",
-    "@tiptap/extension-highlight": "^3.22.3",
-    "@tiptap/extension-image": "^3.22.3",
-    "@tiptap/extension-link": "^3.22.3",
-    "@tiptap/extension-placeholder": "^3.22.3",
-    "@tiptap/extension-table": "^3.22.3",
-    "@tiptap/extension-table-cell": "^3.22.3",
-    "@tiptap/extension-table-header": "^3.22.3",
-    "@tiptap/extension-table-row": "^3.22.3",
-    "@tiptap/extension-text-align": "^3.22.3",
-    "@tiptap/extension-text-style": "^3.22.3",
-    "@tiptap/extension-underline": "^3.22.3",
-    "@tiptap/pm": "^3.22.3",
-    "@tiptap/starter-kit": "^3.22.3",
+    "@tiptap/core": "^3.23.1",
+    "@tiptap/extension-character-count": "^3.23.1",
+    "@tiptap/extension-code-block-lowlight": "^3.23.1",
+    "@tiptap/extension-color": "^3.23.1",
+    "@tiptap/extension-font-family": "^3.23.1",
+    "@tiptap/extension-highlight": "^3.23.1",
+    "@tiptap/extension-image": "^3.23.1",
+    "@tiptap/extension-link": "^3.23.1",
+    "@tiptap/extension-placeholder": "^3.23.1",
+    "@tiptap/extension-table": "^3.23.1",
+    "@tiptap/extension-table-cell": "^3.23.1",
+    "@tiptap/extension-table-header": "^3.23.1",
+    "@tiptap/extension-table-row": "^3.23.1",
+    "@tiptap/extension-text-align": "^3.23.1",
+    "@tiptap/extension-text-style": "^3.23.1",
+    "@tiptap/extension-underline": "^3.23.1",
+    "@tiptap/pm": "^3.23.1",
+    "@tiptap/starter-kit": "^3.23.1",
     "lowlight": "^3.3.0"
   },
   "devDependencies": {