@ni/nimble-components 33.12.1 → 34.0.1

package/dist/all-components-bundle.js

@@ -5264,7 +5264,7 @@
    * Returns all displayed elements inside of a root node that match a provided selector
    */
   function getDisplayedNodes(rootNode, selector) {
-      if (!rootNode || false || !isHTMLElement(rootNode)) {
+      if (!rootNode || !selector || !isHTMLElement(rootNode)) {
           return;
       }
       const nodes = Array.from(rootNode.querySelectorAll(selector));
@@ -11497,7 +11497,7 @@
        */
       getValidValue(value) {
           var _a, _b;
-          let validValue = parseFloat(parseFloat(value).toPrecision(12));
+          let validValue = parseFloat(parseFloat(value).toPrecision(15));
           if (isNaN(validValue)) {
               validValue = "";
           }
@@ -26827,7 +26827,7 @@ so this becomes the fallback color for the slot */ ''}
                 ?required="${x => x.required}"
                 size="${x => x.size}"
                 type="text"
-                inputmode="numeric"
+                inputmode="text"
                 min="${x => x.min}"
                 max="${x => x.max}"
                 step="${x => x.step}"
@@ -26889,11 +26889,53 @@ so this becomes the fallback color for the slot */ ''}
           this.appearance = NumberFieldAppearance.underline;
           this.fullBleed = false;
           this.appearanceReadOnly = false;
+          this.decimalSeparator = '.';
+          this.inputFilterRegExp = this.buildFilterRegExp(this.decimalSeparator);
+          this.langSubscriber = {
+              handleChange: () => this.updateDecimalSeparatorAndInputFilter()
+          };
       }
       connectedCallback() {
           super.connectedCallback();
           // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148
           this.control.setAttribute('role', 'spinbutton');
+          this.updateDecimalSeparatorAndInputFilter();
+          lang.subscribe(this.langSubscriber, this);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          lang.unsubscribe(this.langSubscriber, this);
+      }
+      sanitizeInput(inputText) {
+          return inputText.replace(this.inputFilterRegExp, '');
+      }
+      // this.value <-- this.control.value
+      syncValueFromInnerControl() {
+          this.value = this.decimalSeparator !== '.'
+              ? this.control.value.replace(this.decimalSeparator, '.')
+              : this.control.value;
+      }
+      // this.value --> this.control.value
+      syncValueToInnerControl() {
+          this.control.value = this.decimalSeparator !== '.'
+              ? this.value.replace('.', this.decimalSeparator)
+              : this.value;
+      }
+      updateDecimalSeparatorAndInputFilter() {
+          const previousSeparator = this.decimalSeparator;
+          this.decimalSeparator = this.getSeparatorForLanguange(lang.getValueFor(this));
+          if (this.decimalSeparator !== previousSeparator) {
+              this.inputFilterRegExp = this.buildFilterRegExp(this.decimalSeparator);
+              this.control.value = this.control.value.replace(previousSeparator, this.decimalSeparator);
+          }
+      }
+      getSeparatorForLanguange(language) {
+          return Intl.NumberFormat(language)
+              .formatToParts(1.1)
+              .find(x => x.type === 'decimal').value;
+      }
+      buildFilterRegExp(decimalSeparator) {
+          return new RegExp(`[^0-9\\-+e${decimalSeparator}]`, 'g');
       }
   }
   __decorate([
@@ -27564,7 +27606,7 @@ so this becomes the fallback color for the slot */ ''}
       position in this fragment. The result object will be reused
       (overwritten) the next time the function is called. @internal
       */
-      findIndex(pos, round = -1) {
+      findIndex(pos) {
           if (pos == 0)
               return retIndex(0, pos);
           if (pos == this.size)
@@ -27574,7 +27616,7 @@ so this becomes the fallback color for the slot */ ''}
           for (let i = 0, curPos = 0;; i++) {
               let cur = this.child(i), end = curPos + cur.nodeSize;
               if (end >= pos) {
-                  if (end == pos || round > 0)
+                  if (end == pos)
                       return retIndex(i + 1, end);
                   return retIndex(i, curPos);
               }
@@ -28535,7 +28577,7 @@ so this becomes the fallback color for the slot */ ''}
       `blockSeparator` is given, it will be inserted to separate text
       from different block nodes. If `leafText` is given, it'll be
       inserted for every non-text leaf node encountered, otherwise
-      [`leafText`](https://prosemirror.net/docs/ref/#model.NodeSpec^leafText) will be used.
+      [`leafText`](https://prosemirror.net/docs/ref/#model.NodeSpec.leafText) will be used.
       */
       textBetween(from, to, blockSeparator, leafText) {
           return this.content.textBetween(from, to, blockSeparator, leafText);
@@ -29745,8 +29787,8 @@ so this becomes the fallback color for the slot */ ''}
               let type = this.marks[prop], excl = type.spec.excludes;
               type.excluded = excl == null ? [type] : excl == "" ? [] : gatherMarks(this, excl.split(" "));
           }
-          this.nodeFromJSON = this.nodeFromJSON.bind(this);
-          this.markFromJSON = this.markFromJSON.bind(this);
+          this.nodeFromJSON = json => Node$2.fromJSON(this, json);
+          this.markFromJSON = json => Mark$1.fromJSON(this, json);
           this.topNodeType = this.nodes[this.spec.topNode || "doc"];
           this.cached.wrappings = Object.create(null);
       }
@@ -29782,20 +29824,6 @@ so this becomes the fallback color for the slot */ ''}
           return type.create(attrs);
       }
       /**
-      Deserialize a node from its JSON representation. This method is
-      bound.
-      */
-      nodeFromJSON(json) {
-          return Node$2.fromJSON(this, json);
-      }
-      /**
-      Deserialize a mark from its JSON representation. This method is
-      bound.
-      */
-      markFromJSON(json) {
-          return Mark$1.fromJSON(this, json);
-      }
-      /**
       @internal
       */
       nodeType(name) {
@@ -29977,7 +30005,7 @@ so this becomes the fallback color for the slot */ ''}
       /**
       Construct a DOM parser using the parsing rules listed in a
       schema's [node specs](https://prosemirror.net/docs/ref/#model.NodeSpec.parseDOM), reordered by
-      [priority](https://prosemirror.net/docs/ref/#model.ParseRule.priority).
+      [priority](https://prosemirror.net/docs/ref/#model.GenericParseRule.priority).
       */
       static fromSchema(schema) {
           return schema.cached.domParser ||
@@ -30001,7 +30029,7 @@ so this becomes the fallback color for the slot */ ''}
       if (preserveWhitespace != null)
           return (preserveWhitespace ? OPT_PRESERVE_WS : 0) |
               (preserveWhitespace === "full" ? OPT_PRESERVE_WS_FULL : 0);
-      return type && type.whitespace == "pre" ? OPT_PRESERVE_WS | OPT_PRESERVE_WS_FULL : base & -5;
+      return type && type.whitespace == "pre" ? OPT_PRESERVE_WS | OPT_PRESERVE_WS_FULL : base & ~OPT_OPEN_LEFT;
   }
   class NodeContext {
       constructor(type, attrs, marks, solid, match, options) {
@@ -30728,6 +30756,8 @@ so this becomes the fallback color for the slot */ ''}
                   let space = name.indexOf(" ");
                   if (space > 0)
                       dom.setAttributeNS(name.slice(0, space), name.slice(space + 1), attrs[name]);
+                  else if (name == "style" && dom.style)
+                      dom.style.cssText = attrs[name];
                   else
                       dom.setAttribute(name, attrs[name]);
               }
@@ -33437,7 +33467,7 @@ so this becomes the fallback color for the slot */ ''}
               throw new RangeError("Selection passed to setSelection must point at the current document");
           this.curSelection = selection;
           this.curSelectionFor = this.steps.length;
-          this.updated = (this.updated | UPDATED_SEL) & -3;
+          this.updated = (this.updated | UPDATED_SEL) & ~UPDATED_MARKS;
           this.storedMarks = null;
           return this;
       }
@@ -33488,7 +33518,7 @@ so this becomes the fallback color for the slot */ ''}
       */
       addStep(step, doc) {
           super.addStep(step, doc);
-          this.updated = this.updated & -3;
+          this.updated = this.updated & ~UPDATED_MARKS;
           this.storedMarks = null;
       }
       /**
@@ -41834,7 +41864,7 @@ so this becomes the fallback color for the slot */ ''}
                           dropEvent = event;
                           if (!isDroppedFromProseMirror) {
                               const dragFromOtherEditor = tiptapDragFromOtherEditor;
-                              if (dragFromOtherEditor) {
+                              if (dragFromOtherEditor === null || dragFromOtherEditor === void 0 ? void 0 : dragFromOtherEditor.isEditable) {
                                   // setTimeout to avoid the wrong content after drop, timeout arg can't be empty or 0
                                   setTimeout(() => {
                                       const selection = dragFromOtherEditor.state.selection;
@@ -42385,7 +42415,7 @@ so this becomes the fallback color for the slot */ ''}
       tr.deleteRange(originRange.from, originRange.to);
       const newPos = tr.mapping.map(targetPos);
       tr.insert(newPos, contentSlice.content);
-      tr.setSelection(new TextSelection(tr.doc.resolve(newPos - 1)));
+      tr.setSelection(new TextSelection(tr.doc.resolve(Math.max(newPos - 1, 0))));
       return true;
   };
 
@@ -42817,25 +42847,42 @@ so this becomes the fallback color for the slot */ ''}
               ...options,
           };
           let content;
-          try {
-              content = createNodeFromContent(value, editor.schema, {
-                  parseOptions: {
-                      preserveWhitespace: 'full',
-                      ...options.parseOptions,
-                  },
-                  errorOnInvalidContent: (_a = options.errorOnInvalidContent) !== null && _a !== void 0 ? _a : editor.options.enableContentCheck,
-              });
-          }
-          catch (e) {
+          const emitContentError = (error) => {
               editor.emit('contentError', {
                   editor,
-                  error: e,
+                  error,
                   disableCollaboration: () => {
                       if (editor.storage.collaboration) {
                           editor.storage.collaboration.isDisabled = true;
                       }
                   },
               });
+          };
+          const parseOptions = {
+              preserveWhitespace: 'full',
+              ...options.parseOptions,
+          };
+          // If `emitContentError` is enabled, we want to check the content for errors
+          // but ignore them (do not remove the invalid content from the document)
+          if (!options.errorOnInvalidContent && !editor.options.enableContentCheck && editor.options.emitContentError) {
+              try {
+                  createNodeFromContent(value, editor.schema, {
+                      parseOptions,
+                      errorOnInvalidContent: true,
+                  });
+              }
+              catch (e) {
+                  emitContentError(e);
+              }
+          }
+          try {
+              content = createNodeFromContent(value, editor.schema, {
+                  parseOptions,
+                  errorOnInvalidContent: (_a = options.errorOnInvalidContent) !== null && _a !== void 0 ? _a : editor.options.enableContentCheck,
+              });
+          }
+          catch (e) {
+              emitContentError(e);
               return false;
           }
           let { from, to } = typeof position === 'number' ? { from: position, to: position } : { from: position.from, to: position.to };
@@ -44662,6 +44709,10 @@ so this becomes the fallback color for the slot */ ''}
               const isBlock = node.isBlock && !node.isTextblock;
               const isNonTextAtom = node.isAtom && !node.isText;
               const targetPos = this.pos + offset + (isNonTextAtom ? 0 : 1);
+              // Check if targetPos is within valid document range
+              if (targetPos < 0 || targetPos > this.resolvedPos.doc.nodeSize - 2) {
+                  return;
+              }
               const $pos = this.resolvedPos.doc.resolve(targetPos);
               if (!isBlock && $pos.depth <= this.depth) {
                   return;
@@ -44861,6 +44912,7 @@ img.ProseMirror-separator {
               enablePasteRules: true,
               enableCoreExtensions: true,
               enableContentCheck: false,
+              emitContentError: false,
               onBeforeCreate: () => null,
               onCreate: () => null,
               onUpdate: () => null,
@@ -58880,6 +58932,13 @@ img.ProseMirror-separator {
     return filtered;
   }
 
+  // From DOMPurify
+  // https://github.com/cure53/DOMPurify/blob/main/src/regexp.ts
+  const UNICODE_WHITESPACE_PATTERN = '[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]';
+  const UNICODE_WHITESPACE_REGEX = new RegExp(UNICODE_WHITESPACE_PATTERN);
+  const UNICODE_WHITESPACE_REGEX_END = new RegExp(`${UNICODE_WHITESPACE_PATTERN}$`);
+  const UNICODE_WHITESPACE_REGEX_GLOBAL = new RegExp(UNICODE_WHITESPACE_PATTERN, 'g');
+
   /**
    * Check if the provided tokens form a valid link structure, which can either be a single link token
    * or a link token surrounded by parentheses or square brackets.
@@ -58936,14 +58995,16 @@ img.ProseMirror-separator {
                       textBlock = nodesInChangedRanges[0];
                       textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, textBlock.pos + textBlock.node.nodeSize, undefined, ' ');
                   }
-                  else if (nodesInChangedRanges.length
-                      // We want to make sure to include the block seperator argument to treat hard breaks like spaces.
-                      && newState.doc.textBetween(newRange.from, newRange.to, ' ', ' ').endsWith(' ')) {
+                  else if (nodesInChangedRanges.length) {
+                      const endText = newState.doc.textBetween(newRange.from, newRange.to, ' ', ' ');
+                      if (!UNICODE_WHITESPACE_REGEX_END.test(endText)) {
+                          return;
+                      }
                       textBlock = nodesInChangedRanges[0];
                       textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, newRange.to, undefined, ' ');
                   }
                   if (textBlock && textBeforeWhitespace) {
-                      const wordsBeforeWhitespace = textBeforeWhitespace.split(' ').filter(s => s !== '');
+                      const wordsBeforeWhitespace = textBeforeWhitespace.split(UNICODE_WHITESPACE_REGEX).filter(Boolean);
                       if (wordsBeforeWhitespace.length <= 0) {
                           return false;
                       }
@@ -59055,10 +59116,6 @@ img.ProseMirror-separator {
           },
       });
   }
-  // From DOMPurify
-  // https://github.com/cure53/DOMPurify/blob/main/src/regexp.js
-  // eslint-disable-next-line no-control-regex
-  const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
   function isAllowedUri(uri, protocols) {
       const allowedProtocols = [
           'http',
@@ -59081,9 +59138,7 @@ img.ProseMirror-separator {
           });
       }
       return (!uri
-          || uri
-              .replace(ATTR_WHITESPACE, '')
-              .match(new RegExp(
+          || uri.replace(UNICODE_WHITESPACE_REGEX_GLOBAL, '').match(new RegExp(
           // eslint-disable-next-line no-useless-escape
           `^(?:(?:${allowedProtocols.join('|')}):|[^a-z]|[a-z0-9+.\-]+(?:[^a-z+.\-:]|$))`, 'i')));
   }
@@ -59378,7 +59433,7 @@ img.ProseMirror-separator {
    * This utility allows you to create suggestions.
    * @see https://tiptap.dev/api/utilities/suggestion
    */
-  function Suggestion({ pluginKey = SuggestionPluginKey, editor, char = '@', allowSpaces = false, allowToIncludeChar = false, allowedPrefixes = [' '], startOfLine = false, decorationTag = 'span', decorationClass = 'suggestion', command = () => null, items = () => [], render = () => ({}), allow = () => true, findSuggestionMatch: findSuggestionMatch$1 = findSuggestionMatch, }) {
+  function Suggestion({ pluginKey = SuggestionPluginKey, editor, char = '@', allowSpaces = false, allowToIncludeChar = false, allowedPrefixes = [' '], startOfLine = false, decorationTag = 'span', decorationClass = 'suggestion', decorationContent = '', decorationEmptyClass = 'is-empty', command = () => null, items = () => [], render = () => ({}), allow = () => true, findSuggestionMatch: findSuggestionMatch$1 = findSuggestionMatch, }) {
       let props;
       const renderer = render === null || render === void 0 ? void 0 : render();
       const plugin = new Plugin({
@@ -59488,7 +59543,9 @@ img.ProseMirror-separator {
                   //   * a composition is active (see: https://github.com/ueberdosis/tiptap/issues/1449)
                   if (isEditable && (empty || editor.view.composing)) {
                       // Reset active state if we just left the previous suggestion range
-                      if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
+                      if ((from < prev.range.from || from > prev.range.to)
+                          && !composing
+                          && !prev.composing) {
                           next.active = false;
                       }
                       // Try to match against where our cursor currently is
@@ -59502,11 +59559,17 @@ img.ProseMirror-separator {
                       });
                       const decorationId = `id_${Math.floor(Math.random() * 0xffffffff)}`;
                       // If we found a match, update the current state to show it
-                      if (match && allow({
-                          editor, state, range: match.range, isActive: prev.active,
-                      })) {
+                      if (match
+                          && allow({
+                              editor,
+                              state,
+                              range: match.range,
+                              isActive: prev.active,
+                          })) {
                           next.active = true;
-                          next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
+                          next.decorationId = prev.decorationId
+                              ? prev.decorationId
+                              : decorationId;
                           next.range = match.range;
                           next.query = match.query;
                           next.text = match.text;
@@ -59540,15 +59603,21 @@ img.ProseMirror-separator {
               },
               // Setup decorator on the currently active suggestion.
               decorations(state) {
-                  const { active, range, decorationId } = plugin.getState(state);
+                  const { active, range, decorationId, query, } = plugin.getState(state);
                   if (!active) {
                       return null;
                   }
+                  const isEmpty = !(query === null || query === void 0 ? void 0 : query.length);
+                  const classNames = [decorationClass];
+                  if (isEmpty) {
+                      classNames.push(decorationEmptyClass);
+                  }
                   return DecorationSet.create(state.doc, [
                       Decoration.inline(range.from, range.to, {
                           nodeName: decorationTag,
-                          class: decorationClass,
+                          class: classNames.join(' '),
                           'data-decoration-id': decorationId,
+                          'data-decoration-content': decorationContent,
                       }),
                   ]);
               },
@@ -59558,10 +59627,91 @@ img.ProseMirror-separator {
   }
 
   /**
-   * The plugin key for the mention plugin.
-   * @default 'mention'
+   * Returns the suggestion options for a trigger of the Mention extension. These
+   * options are used to create a `Suggestion` ProseMirror plugin. Each plugin lets
+   * you define a different trigger that opens the Mention menu. For example,
+   * you can define a `@` trigger to mention users and a `#` trigger to mention
+   * tags.
+   *
+   * @param param0 The configured options for the suggestion
+   * @returns
+   */
+  function getSuggestionOptions({ editor: tiptapEditor, overrideSuggestionOptions, extensionName, char = '@', }) {
+      const pluginKey = new PluginKey();
+      return {
+          editor: tiptapEditor,
+          char,
+          pluginKey,
+          command: ({ editor, range, props }) => {
+              var _a, _b, _c;
+              // increase range.to by one when the next node is of type "text"
+              // and starts with a space character
+              const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+              const overrideSpace = (_a = nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.text) === null || _a === void 0 ? void 0 : _a.startsWith(' ');
+              if (overrideSpace) {
+                  range.to += 1;
+              }
+              editor
+                  .chain()
+                  .focus()
+                  .insertContentAt(range, [
+                  {
+                      type: extensionName,
+                      attrs: { ...props, mentionSuggestionChar: char },
+                  },
+                  {
+                      type: 'text',
+                      text: ' ',
+                  },
+              ])
+                  .run();
+              // get reference to `window` object from editor element, to support cross-frame JS usage
+              (_c = (_b = editor.view.dom.ownerDocument.defaultView) === null || _b === void 0 ? void 0 : _b.getSelection()) === null || _c === void 0 ? void 0 : _c.collapseToEnd();
+          },
+          allow: ({ state, range }) => {
+              const $from = state.doc.resolve(range.from);
+              const type = state.schema.nodes[extensionName];
+              const allow = !!$from.parent.type.contentMatch.matchType(type);
+              return allow;
+          },
+          ...overrideSuggestionOptions,
+      };
+  }
+
+  /**
+   * Returns the suggestions for the mention extension.
+   *
+   * @param options The extension options
+   * @returns the suggestions
+   */
+  function getSuggestions(options) {
+      return (options.options.suggestions.length ? options.options.suggestions : [options.options.suggestion]).map(suggestion => getSuggestionOptions({
+          // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility
+          editor: options.editor,
+          overrideSuggestionOptions: suggestion,
+          extensionName: options.name,
+          char: suggestion.char,
+      }));
+  }
+  /**
+   * Returns the suggestion options of the mention that has a given character trigger. If not
+   * found, it returns the first suggestion.
+   *
+   * @param options The extension options
+   * @param char The character that triggers the mention
+   * @returns The suggestion options
    */
-  const MentionPluginKey = new PluginKey('mention');
+  function getSuggestionFromChar(options, char) {
+      const suggestions = getSuggestions(options);
+      const suggestion = suggestions.find(s => s.char === char);
+      if (suggestion) {
+          return suggestion;
+      }
+      if (suggestions.length) {
+          return suggestions[0];
+      }
+      return null;
+  }
   /**
    * This extension allows you to insert mentions into the editor.
    * @see https://www.tiptap.dev/api/extensions/mention
@@ -59572,55 +59722,21 @@ img.ProseMirror-separator {
       addOptions() {
           return {
               HTMLAttributes: {},
-              renderText({ options, node }) {
-                  var _a;
-                  return `${options.suggestion.char}${(_a = node.attrs.label) !== null && _a !== void 0 ? _a : node.attrs.id}`;
+              renderText({ node, suggestion }) {
+                  var _a, _b;
+                  return `${(_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.char) !== null && _a !== void 0 ? _a : '@'}${(_b = node.attrs.label) !== null && _b !== void 0 ? _b : node.attrs.id}`;
               },
               deleteTriggerWithBackspace: false,
-              renderHTML({ options, node }) {
-                  var _a;
+              renderHTML({ options, node, suggestion }) {
+                  var _a, _b;
                   return [
                       'span',
                       mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),
-                      `${options.suggestion.char}${(_a = node.attrs.label) !== null && _a !== void 0 ? _a : node.attrs.id}`,
+                      `${(_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.char) !== null && _a !== void 0 ? _a : '@'}${(_b = node.attrs.label) !== null && _b !== void 0 ? _b : node.attrs.id}`,
                   ];
               },
-              suggestion: {
-                  char: '@',
-                  pluginKey: MentionPluginKey,
-                  command: ({ editor, range, props }) => {
-                      var _a, _b, _c;
-                      // increase range.to by one when the next node is of type "text"
-                      // and starts with a space character
-                      const nodeAfter = editor.view.state.selection.$to.nodeAfter;
-                      const overrideSpace = (_a = nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.text) === null || _a === void 0 ? void 0 : _a.startsWith(' ');
-                      if (overrideSpace) {
-                          range.to += 1;
-                      }
-                      editor
-                          .chain()
-                          .focus()
-                          .insertContentAt(range, [
-                          {
-                              type: this.name,
-                              attrs: props,
-                          },
-                          {
-                              type: 'text',
-                              text: ' ',
-                          },
-                      ])
-                          .run();
-                      // get reference to `window` object from editor element, to support cross-frame JS usage
-                      (_c = (_b = editor.view.dom.ownerDocument.defaultView) === null || _b === void 0 ? void 0 : _b.getSelection()) === null || _c === void 0 ? void 0 : _c.collapseToEnd();
-                  },
-                  allow: ({ state, range }) => {
-                      const $from = state.doc.resolve(range.from);
-                      const type = state.schema.nodes[this.name];
-                      const allow = !!$from.parent.type.contentMatch.matchType(type);
-                      return allow;
-                  },
-              },
+              suggestions: [],
+              suggestion: {},
           };
       },
       group: 'inline',
@@ -59653,6 +59769,16 @@ img.ProseMirror-separator {
                       };
                   },
               },
+              // When there are multiple types of mentions, this attribute helps distinguish them
+              mentionSuggestionChar: {
+                  default: '@',
+                  parseHTML: element => element.getAttribute('data-mention-suggestion-char'),
+                  renderHTML: attributes => {
+                      return {
+                          'data-mention-suggestion-char': attributes.mentionSuggestionChar,
+                      };
+                  },
+              },
           };
       },
       parseHTML() {
@@ -59663,6 +59789,7 @@ img.ProseMirror-separator {
           ];
       },
       renderHTML({ node, HTMLAttributes }) {
+          const suggestion = getSuggestionFromChar(this, node.attrs.mentionSuggestionChar);
           if (this.options.renderLabel !== undefined) {
               console.warn('renderLabel is deprecated use renderText and renderHTML instead');
               return [
@@ -59671,6 +59798,7 @@ img.ProseMirror-separator {
                   this.options.renderLabel({
                       options: this.options,
                       node,
+                      suggestion,
                   }),
               ];
           }
@@ -59679,6 +59807,7 @@ img.ProseMirror-separator {
           const html = this.options.renderHTML({
               options: mergedOptions,
               node,
+              suggestion,
           });
           if (typeof html === 'string') {
               return [
@@ -59690,17 +59819,16 @@ img.ProseMirror-separator {
           return html;
       },
       renderText({ node }) {
+          const args = {
+              options: this.options,
+              node,
+              suggestion: getSuggestionFromChar(this, node.attrs.mentionSuggestionChar),
+          };
           if (this.options.renderLabel !== undefined) {
               console.warn('renderLabel is deprecated use renderText and renderHTML instead');
-              return this.options.renderLabel({
-                  options: this.options,
-                  node,
-              });
+              return this.options.renderLabel(args);
           }
-          return this.options.renderText({
-              options: this.options,
-              node,
-          });
+          return this.options.renderText(args);
       },
       addKeyboardShortcuts() {
           return {
@@ -59718,17 +59846,27 @@ img.ProseMirror-separator {
                           return false;
                       }
                   });
+                  // Store node and position for later use
+                  let mentionNode = new Node$2();
+                  let mentionPos = 0;
+                  state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+                      if (node.type.name === this.name) {
+                          isMention = true;
+                          mentionNode = node;
+                          mentionPos = pos;
+                          return false;
+                      }
+                  });
+                  if (isMention) {
+                      tr.insertText(this.options.deleteTriggerWithBackspace ? '' : mentionNode.attrs.mentionSuggestionChar, mentionPos, mentionPos + mentionNode.nodeSize);
+                  }
                   return isMention;
               }),
           };
       },
       addProseMirrorPlugins() {
-          return [
-              Suggestion({
-                  editor: this.editor,
-                  ...this.options.suggestion,
-              }),
-          ];
+          // Create a plugin for each suggestion configuration
+          return getSuggestions(this).map(Suggestion);
       },
   });
 
@@ -60091,7 +60229,8 @@ img.ProseMirror-separator {
                   mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
                   this.options.renderText({
                       options: this.options,
-                      node
+                      node,
+                      suggestion: null
                   })
               ];
           }
@@ -68183,7 +68322,7 @@ focus outline in that case.
       return value;
     }
   }
-  const approxEqual = (a, b) => Math.abs(a - b) <= 1;
+  const approxEqual = (a, b) => Math.abs(a - b) < 1.01;
   const debounce = (targetWindow, fn, ms) => {
     let timeoutId;
     return function(...args) {
@@ -68314,7 +68453,6 @@ focus outline in that case.
       this.scrollElement = null;
       this.targetWindow = null;
       this.isScrolling = false;
-      this.scrollToIndexTimeoutId = null;
       this.measurementsCache = [];
       this.itemSizeCache = /* @__PURE__ */ new Map();
       this.pendingMeasuredCacheIndexes = [];
@@ -68730,7 +68868,7 @@ focus outline in that case.
         } else if (align === "end") {
           toOffset -= size;
         }
-        const maxOffset = this.getTotalSize() - size;
+        const maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
         return Math.max(Math.min(maxOffset, toOffset), 0);
       };
       this.getOffsetForIndex = (index, align = "auto") => {
@@ -68757,14 +68895,7 @@ focus outline in that case.
         ];
       };
       this.isDynamicMode = () => this.elementsCache.size > 0;
-      this.cancelScrollToIndex = () => {
-        if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-          this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
-          this.scrollToIndexTimeoutId = null;
-        }
-      };
       this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-        this.cancelScrollToIndex();
         if (behavior === "smooth" && this.isDynamicMode()) {
           console.warn(
             "The `smooth` scroll behavior is not fully supported with dynamic size."
@@ -68776,39 +68907,52 @@ focus outline in that case.
         });
       };
       this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
-        index = Math.max(0, Math.min(index, this.options.count - 1));
-        this.cancelScrollToIndex();
         if (behavior === "smooth" && this.isDynamicMode()) {
           console.warn(
             "The `smooth` scroll behavior is not fully supported with dynamic size."
           );
         }
-        const offsetAndAlign = this.getOffsetForIndex(index, initialAlign);
-        if (!offsetAndAlign) return;
-        const [offset, align] = offsetAndAlign;
-        this._scrollToOffset(offset, { adjustments: void 0, behavior });
-        if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
-          this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-            this.scrollToIndexTimeoutId = null;
-            const elementInDOM = this.elementsCache.has(
-              this.options.getItemKey(index)
-            );
-            if (elementInDOM) {
-              const result = this.getOffsetForIndex(index, align);
-              if (!result) return;
-              const [latestOffset] = result;
-              const currentScrollOffset = this.getScrollOffset();
-              if (!approxEqual(latestOffset, currentScrollOffset)) {
-                this.scrollToIndex(index, { align, behavior });
-              }
-            } else {
-              this.scrollToIndex(index, { align, behavior });
+        index = Math.max(0, Math.min(index, this.options.count - 1));
+        let attempts = 0;
+        const maxAttempts = 10;
+        const tryScroll = (currentAlign) => {
+          if (!this.targetWindow) return;
+          const offsetInfo = this.getOffsetForIndex(index, currentAlign);
+          if (!offsetInfo) {
+            console.warn("Failed to get offset for index:", index);
+            return;
+          }
+          const [offset, align] = offsetInfo;
+          this._scrollToOffset(offset, { adjustments: void 0, behavior });
+          this.targetWindow.requestAnimationFrame(() => {
+            const currentOffset = this.getScrollOffset();
+            const afterInfo = this.getOffsetForIndex(index, align);
+            if (!afterInfo) {
+              console.warn("Failed to get offset for index:", index);
+              return;
+            }
+            if (!approxEqual(afterInfo[0], currentOffset)) {
+              scheduleRetry(align);
             }
           });
-        }
+        };
+        const scheduleRetry = (align) => {
+          if (!this.targetWindow) return;
+          attempts++;
+          if (attempts < maxAttempts) {
+            if (this.options.debug) {
+              console.info("Schedule retry", attempts, maxAttempts);
+            }
+            this.targetWindow.requestAnimationFrame(() => tryScroll(align));
+          } else {
+            console.warn(
+              `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
+            );
+          }
+        };
+        tryScroll(initialAlign);
       };
       this.scrollBy = (delta, { behavior } = {}) => {
-        this.cancelScrollToIndex();
         if (behavior === "smooth" && this.isDynamicMode()) {
           console.warn(
             "The `smooth` scroll behavior is not fully supported with dynamic size."
@@ -79737,7 +79881,7 @@ focus outline in that case.
   /** @ignore */ const isBoolean = (x) => typeof x === 'boolean';
   /** @ignore */ const isFunction = (x) => typeof x === 'function';
   /** @ignore */
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
   const isObject$1 = (x) => x != null && Object(x) === x;
   /** @ignore */
   const isPromise = (x) => {
@@ -79908,6 +80052,7 @@ focus outline in that case.
   const pump$1 = (iterator) => { iterator.next(); return iterator; };
   /** @ignore */
   function* toArrayBufferViewIterator(ArrayCtor, source) {
+      // eslint-disable-next-line unicorn/consistent-function-scoping
       const wrap = function* (x) { yield x; };
       const buffers = (typeof source === 'string') ? wrap(source)
           : (ArrayBuffer.isView(source)) ? wrap(source)
@@ -79930,6 +80075,7 @@ focus outline in that case.
           if (isPromise(source)) {
               return yield __await(yield __await(yield* __asyncDelegator(__asyncValues(toArrayBufferViewAsyncIterator(ArrayCtor, yield __await(source))))));
           }
+          // eslint-disable-next-line unicorn/consistent-function-scoping
           const wrap = function (x) { return __asyncGenerator(this, arguments, function* () { yield yield __await(yield __await(x)); }); };
           const emit = function (source) {
               return __asyncGenerator(this, arguments, function* () {
@@ -80054,7 +80200,8 @@ focus outline in that case.
           } while (!done);
       }
       catch (e) {
-          (threw = true) && (typeof it.throw === 'function') && (it.throw(e));
+          threw = true;
+          (typeof it.throw === 'function') && (it.throw(e));
       }
       finally {
           (threw === false) && (typeof it.return === 'function') && (it.return(null));
@@ -80098,7 +80245,8 @@ focus outline in that case.
               } while (!done);
           }
           catch (e) {
-              (threw = true) && (typeof it.throw === 'function') && (yield __await(it.throw(e)));
+              threw = true;
+              (typeof it.throw === 'function') && (yield __await(it.throw(e)));
           }
           finally {
               (threw === false) && (typeof it.return === 'function') && (yield __await(it.return(new Uint8Array(0))));
@@ -80146,7 +80294,8 @@ focus outline in that case.
               } while (!done);
           }
           catch (e) {
-              (threw = true) && (yield __await(it['cancel'](e)));
+              threw = true;
+              yield __await(it['cancel'](e));
           }
           finally {
               (threw === false) ? (yield __await(it['cancel']()))
@@ -86666,7 +86815,6 @@ focus outline in that case.
   // KIND, either express or implied.  See the License for the
   // specific language governing permissions and limitations
   // under the License.
-  /* eslint-disable @typescript-eslint/naming-convention */
   var Builder$1 = Builder$2;
   var ByteBuffer$1 = ByteBuffer$2;
   /** @ignore */
@@ -88861,7 +89009,6 @@ focus outline in that case.
   // KIND, either express or implied.  See the License for the
   // specific language governing permissions and limitations
   // under the License.
-  /* eslint-disable brace-style */
   /** @ignore */
   function schemaFromJSON(_schema, dictionaries = new Map()) {
       return new Schema(schemaFieldsFromJSON(_schema, dictionaries), customMetadataFromJSON(_schema['metadata']), dictionaries);
@@ -89033,7 +89180,6 @@ focus outline in that case.
   // KIND, either express or implied.  See the License for the
   // specific language governing permissions and limitations
   // under the License.
-  /* eslint-disable brace-style */
   var Builder = Builder$2;
   var ByteBuffer = ByteBuffer$2;
   /**