@ni/spright-components 4.1.10 → 4.1.12

package/dist/all-components-bundle.js

@@ -5250,7 +5250,7 @@
   /**
    * Standard orientation values
    */
-  const Orientation = {
+  const Orientation$1 = {
       horizontal: "horizontal",
       vertical: "vertical",
   };
@@ -11695,34 +11695,6 @@
   ], NumberField$1.prototype, "defaultSlottedNodes", void 0);
   applyMixins(NumberField$1, StartEnd, DelegatesARIATextbox);
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#RadioGroup} component.
-   * @public
-   */
-  const radioGroupTemplate = (context, definition) => html `
-    <template
-        role="radiogroup"
-        aria-disabled="${x => x.disabled}"
-        aria-readonly="${x => x.readOnly}"
-        @click="${(x, c) => x.clickHandler(c.event)}"
-        @keydown="${(x, c) => x.keydownHandler(c.event)}"
-        @focusout="${(x, c) => x.focusOutHandler(c.event)}"
-    >
-        <slot name="label"></slot>
-        <div
-            class="positioning-region ${x => x.orientation === Orientation.horizontal ? "horizontal" : "vertical"}"
-            part="positioning-region"
-        >
-            <slot
-                ${slotted({
-    property: "slottedRadioButtons",
-    filter: elements("[role=radio]"),
-})}
-            ></slot>
-        </div>
-    </template>
-`;
-
   /**
    * An Radio Group Custom HTML Element.
    * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
@@ -11744,7 +11716,7 @@
            * @remarks
            * HTML Attribute: orientation
            */
-          this.orientation = Orientation.horizontal;
+          this.orientation = Orientation$1.horizontal;
           this.radioChangeHandler = (e) => {
               const changedRadio = e.target;
               if (changedRadio.checked) {
@@ -13596,19 +13568,19 @@
    */
   const ToolbarArrowKeyMap = Object.freeze({
       [ArrowKeys.ArrowUp]: {
-          [Orientation.vertical]: -1,
+          [Orientation$1.vertical]: -1,
       },
       [ArrowKeys.ArrowDown]: {
-          [Orientation.vertical]: 1,
+          [Orientation$1.vertical]: 1,
       },
       [ArrowKeys.ArrowLeft]: {
-          [Orientation.horizontal]: {
+          [Orientation$1.horizontal]: {
               [Direction$1.ltr]: -1,
               [Direction$1.rtl]: 1,
           },
       },
       [ArrowKeys.ArrowRight]: {
-          [Orientation.horizontal]: {
+          [Orientation$1.horizontal]: {
               [Direction$1.ltr]: 1,
               [Direction$1.rtl]: -1,
           },
@@ -13648,7 +13620,7 @@
            * @remarks
            * HTML Attribute: `orientation`
            */
-          this.orientation = Orientation.horizontal;
+          this.orientation = Orientation$1.horizontal;
       }
       /**
        * The index of the currently focused element, clamped between 0 and the last element.
@@ -16417,6 +16389,14 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
+  /**
+   * Standard orientation values
+   */
+  const Orientation = {
+      horizontal: "horizontal",
+      vertical: "vertical",
+  };
+
   /**
    * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
    *
@@ -16494,7 +16474,7 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$M = html `<slot></slot>`;
+  const template$N = html `<slot></slot>`;
 
   const styles$11 = css `
     ${display$1('contents')}
@@ -16612,7 +16592,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$11,
-      template: template$M
+      template: template$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16915,7 +16895,7 @@
 `;
 
   // prettier-ignore
-  const template$L = (_context, definition) => html `${
+  const template$M = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -17018,7 +16998,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$L,
+      template: template$M,
       styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
@@ -17436,7 +17416,7 @@
     }
 `;
 
-  const template$K = (context, definition) => html `
+  const template$L = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17518,7 +17498,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$K,
+      template: template$L,
       styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
@@ -17610,7 +17590,7 @@
     }
 `;
 
-  const template$J = (context, definition) => html `
+  const template$K = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17711,7 +17691,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$J,
+      template: template$K,
       styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
@@ -17838,7 +17818,7 @@
     }
 `;
 
-  const template$I = (context, definition) => html `
+  const template$J = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17890,7 +17870,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$I,
+      template: template$J,
       styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
@@ -17919,7 +17899,7 @@
     }
 `;
 
-  const template$H = (context, definition) => html `
+  const template$I = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18125,7 +18105,7 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$H,
+      template: template$I,
       styles: styles$X,
       shadowOptions: {
           delegatesFocus: false
@@ -18247,7 +18227,7 @@
     }
 `;
 
-  const template$G = (context, definition) => html `
+  const template$H = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18384,7 +18364,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$G,
+      template: template$H,
       styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
@@ -18633,7 +18613,7 @@
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$F = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -18724,7 +18704,7 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$F,
+      template: template$G,
       styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
@@ -19532,7 +19512,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$E = html `<div
+  const template$F = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -19591,7 +19571,7 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$E,
+          template: template$F,
           styles: styles$S
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19710,7 +19690,7 @@
   }).withDefault(coreLabelDefaults.loadingLabel);
 
   // prettier-ignore
-  const template$D = html `
+  const template$E = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19828,7 +19808,7 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$D,
+      template: template$E,
       styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -19995,7 +19975,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$C = html `
+  const template$D = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20010,7 +19990,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$C,
+      template: template$D,
       styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
@@ -20288,7 +20268,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$B = (_context, definition) => html `
+  const template$C = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20337,7 +20317,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$B,
+      template: template$C,
       styles: styles$N,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
@@ -20395,7 +20375,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$A = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20491,7 +20471,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$A,
+      template: template$B,
       styles: styles$M,
       shadowOptions: {
           delegatesFocus: true
@@ -20982,7 +20962,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$z = (context, definition) => html `
+  const template$A = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21737,7 +21717,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$z,
+      template: template$A,
       styles: styles$J,
       shadowOptions: {
           delegatesFocus: true
@@ -21875,7 +21855,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$y = html `
+  const template$z = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22023,7 +22003,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$y,
+      template: template$z,
       styles: styles$I,
       baseClass: Dialog
   });
@@ -22172,7 +22152,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$x = html `
+  const template$y = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22315,7 +22295,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$x,
+      template: template$y,
       styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -25017,7 +24997,7 @@ so this becomes the fallback color for the slot */ ''}
    * @public
    */
   // prettier-ignore
-  const template$w = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25130,7 +25110,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$w,
+      template: template$x,
       styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -25199,7 +25179,7 @@ so this becomes the fallback color for the slot */ ''}
       return n instanceof ListOption;
   };
   // prettier-ignore
-  const template$v = html `
+  const template$w = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -25341,7 +25321,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$v,
+      template: template$w,
       styles: styles$E
   });
   DesignSystem.getOrCreate()
@@ -25357,7 +25337,7 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$u = html `<template slot="mapping"></template>`;
+  const template$v = html `<template slot="mapping"></template>`;
 
   const styles$D = css `
     ${display$1('none')}
@@ -25375,7 +25355,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$u,
+      template: template$v,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
@@ -25446,7 +25426,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$u,
+      template: template$v,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
@@ -25470,7 +25450,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$u,
+      template: template$v,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
@@ -25487,7 +25467,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$u,
+      template: template$v,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
@@ -25793,7 +25773,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$t = () => html `
+  const template$u = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -25882,7 +25862,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$t,
+      template: template$u,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
@@ -25919,7 +25899,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   // prettier-ignore
-  const template$s = html `
+  const template$t = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26169,7 +26149,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$s,
+      template: template$t,
       styles: styles$B,
       shadowOptions: {
           delegatesFocus: true
@@ -26665,10 +26645,12 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$x = css `
     ${display$1('inline-block')}
+    ${styles$K}
 
     .positioning-region {
         display: flex;
         gap: ${standardPadding};
+        position: relative;
     }
 
     :host([orientation='vertical']) .positioning-region {
@@ -26679,6 +26661,13 @@ so this becomes the fallback color for the slot */ ''}
         flex-direction: row;
     }
 
+    .label-container {
+        display: flex;
+        height: ${controlLabelFontLineHeight};
+        gap: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+
     slot[name='label'] {
         font: ${controlLabelFont};
         color: ${controlLabelFontColor};
@@ -26687,17 +26676,64 @@ so this becomes the fallback color for the slot */ ''}
     :host([disabled]) slot[name='label'] {
         color: ${controlLabelDisabledFontColor};
     }
+
+    .error-icon {
+        margin-left: auto;
+        margin-right: ${smallPadding};
+    }
+`;
+
+  /* eslint-disable @typescript-eslint/indent */
+  const template$s = html `
+    <template
+        role="radiogroup"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @focusout="${(x, c) => x.focusOutHandler(c.event)}"
+    >
+        <div class="label-container">
+            <slot name="label"></slot>            
+            <${iconExclamationMarkTag}
+                severity="error"
+                class="error-icon"
+            ></${iconExclamationMarkTag}>
+        </div>
+        <div
+            class="positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}"
+            part="positioning-region"
+        >
+            <slot
+                ${slotted({
+    property: 'slottedRadioButtons',
+    filter: elements('[role=radio]')
+})}
+            ></slot>
+            ${errorTextTemplate}
+        </div>
+    </template>
 `;
 
   /**
    * A nimble-styled grouping element for radio buttons
    */
   class RadioGroup extends RadioGroup$1 {
+      constructor() {
+          super(...arguments);
+          this.errorVisible = false;
+      }
   }
+  __decorate$1([
+      attr({ attribute: 'error-text' })
+  ], RadioGroup.prototype, "errorText", void 0);
+  __decorate$1([
+      attr({ attribute: 'error-visible', mode: 'boolean' })
+  ], RadioGroup.prototype, "errorVisible", void 0);
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: radioGroupTemplate,
+      template: template$s,
       styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
@@ -40852,6 +40888,123 @@ so this becomes the fallback color for the slot */ ''}
       return plugin;
   }
 
+  // see: https://github.com/mesqueeb/is-what/blob/88d6e4ca92fb2baab6003c54e02eedf4e729e5ab/src/index.ts
+  function getType(value) {
+      return Object.prototype.toString.call(value).slice(8, -1);
+  }
+  function isPlainObject(value) {
+      if (getType(value) !== 'Object') {
+          return false;
+      }
+      return value.constructor === Object && Object.getPrototypeOf(value) === Object.prototype;
+  }
+
+  function mergeDeep(target, source) {
+      const output = { ...target };
+      if (isPlainObject(target) && isPlainObject(source)) {
+          Object.keys(source).forEach(key => {
+              if (isPlainObject(source[key]) && isPlainObject(target[key])) {
+                  output[key] = mergeDeep(target[key], source[key]);
+              }
+              else {
+                  output[key] = source[key];
+              }
+          });
+      }
+      return output;
+  }
+
+  /**
+   * The Mark class is used to create custom mark extensions.
+   * @see https://tiptap.dev/api/extensions#create-a-new-extension
+   */
+  class Mark {
+      constructor(config = {}) {
+          this.type = 'mark';
+          this.name = 'mark';
+          this.parent = null;
+          this.child = null;
+          this.config = {
+              name: this.name,
+              defaultOptions: {},
+          };
+          this.config = {
+              ...this.config,
+              ...config,
+          };
+          this.name = this.config.name;
+          if (config.defaultOptions && Object.keys(config.defaultOptions).length > 0) {
+              console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`);
+          }
+          // TODO: remove `addOptions` fallback
+          this.options = this.config.defaultOptions;
+          if (this.config.addOptions) {
+              this.options = callOrReturn(getExtensionField(this, 'addOptions', {
+                  name: this.name,
+              }));
+          }
+          this.storage = callOrReturn(getExtensionField(this, 'addStorage', {
+              name: this.name,
+              options: this.options,
+          })) || {};
+      }
+      static create(config = {}) {
+          return new Mark(config);
+      }
+      configure(options = {}) {
+          // return a new instance so we can use the same extension
+          // with different calls of `configure`
+          const extension = this.extend({
+              ...this.config,
+              addOptions: () => {
+                  return mergeDeep(this.options, options);
+              },
+          });
+          // Always preserve the current name
+          extension.name = this.name;
+          // Set the parent to be our parent
+          extension.parent = this.parent;
+          return extension;
+      }
+      extend(extendedConfig = {}) {
+          const extension = new Mark(extendedConfig);
+          extension.parent = this;
+          this.child = extension;
+          extension.name = extendedConfig.name ? extendedConfig.name : extension.parent.name;
+          if (extendedConfig.defaultOptions && Object.keys(extendedConfig.defaultOptions).length > 0) {
+              console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${extension.name}".`);
+          }
+          extension.options = callOrReturn(getExtensionField(extension, 'addOptions', {
+              name: extension.name,
+          }));
+          extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
+              name: extension.name,
+              options: extension.options,
+          }));
+          return extension;
+      }
+      static handleExit({ editor, mark }) {
+          const { tr } = editor.state;
+          const currentPos = editor.state.selection.$from;
+          const isAtEnd = currentPos.pos === currentPos.end();
+          if (isAtEnd) {
+              const currentMarks = currentPos.marks();
+              const isInMark = !!currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
+              if (!isInMark) {
+                  return false;
+              }
+              const removeMark = currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
+              if (removeMark) {
+                  tr.removeStoredMark(removeMark);
+              }
+              tr.insertText(' ', currentPos.pos);
+              editor.view.dispatch(tr);
+              return true;
+          }
+          return false;
+      }
+  }
+
   function isNumber$2(value) {
       return typeof value === 'number';
   }
@@ -41311,32 +41464,6 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  // see: https://github.com/mesqueeb/is-what/blob/88d6e4ca92fb2baab6003c54e02eedf4e729e5ab/src/index.ts
-  function getType(value) {
-      return Object.prototype.toString.call(value).slice(8, -1);
-  }
-  function isPlainObject(value) {
-      if (getType(value) !== 'Object') {
-          return false;
-      }
-      return value.constructor === Object && Object.getPrototypeOf(value) === Object.prototype;
-  }
-
-  function mergeDeep(target, source) {
-      const output = { ...target };
-      if (isPlainObject(target) && isPlainObject(source)) {
-          Object.keys(source).forEach(key => {
-              if (isPlainObject(source[key]) && isPlainObject(target[key])) {
-                  output[key] = mergeDeep(target[key], source[key]);
-              }
-              else {
-                  output[key] = source[key];
-              }
-          });
-      }
-      return output;
-  }
-
   /**
    * The Extension class is the base class for all extensions.
    * @see https://tiptap.dev/api/extensions#create-a-new-extension
@@ -43427,6 +43554,27 @@ so this becomes the fallback color for the slot */ ''}
       },
   });
 
+  const Drop = Extension.create({
+      name: 'drop',
+      addProseMirrorPlugins() {
+          return [
+              new Plugin({
+                  key: new PluginKey('tiptapDrop'),
+                  props: {
+                      handleDrop: (_, e, slice, moved) => {
+                          this.editor.emit('drop', {
+                              editor: this.editor,
+                              event: e,
+                              slice,
+                              moved,
+                          });
+                      },
+                  },
+              }),
+          ];
+      },
+  });
+
   const Editable = Extension.create({
       name: 'editable',
       addProseMirrorPlugins() {
@@ -43591,6 +43739,26 @@ so this becomes the fallback color for the slot */ ''}
       },
   });
 
+  const Paste = Extension.create({
+      name: 'paste',
+      addProseMirrorPlugins() {
+          return [
+              new Plugin({
+                  key: new PluginKey('tiptapPaste'),
+                  props: {
+                      handlePaste: (_view, e, slice) => {
+                          this.editor.emit('paste', {
+                              editor: this.editor,
+                              event: e,
+                              slice,
+                          });
+                      },
+                  },
+              }),
+          ];
+      },
+  });
+
   const Tabindex = Extension.create({
       name: 'tabindex',
       addProseMirrorPlugins() {
@@ -43781,28 +43949,6 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const DropPlugin = (onDrop) => {
-      return new Plugin({
-          key: new PluginKey('tiptapDrop'),
-          props: {
-              handleDrop: (_, e, slice, moved) => {
-                  onDrop(e, slice, moved);
-              },
-          },
-      });
-  };
-
-  const PastePlugin = (onPaste) => {
-      return new Plugin({
-          key: new PluginKey('tiptapPaste'),
-          props: {
-              handlePaste: (_view, e, slice) => {
-                  onPaste(e, slice);
-              },
-          },
-      });
-  };
-
   const style = `.ProseMirror {
   position: relative;
 }
@@ -43948,12 +44094,8 @@ img.ProseMirror-separator {
           this.on('focus', this.options.onFocus);
           this.on('blur', this.options.onBlur);
           this.on('destroy', this.options.onDestroy);
-          if (this.options.onPaste) {
-              this.registerPlugin(PastePlugin(this.options.onPaste));
-          }
-          if (this.options.onDrop) {
-              this.registerPlugin(DropPlugin(this.options.onDrop));
-          }
+          this.on('drop', ({ event, slice, moved }) => this.options.onDrop(event, slice, moved));
+          this.on('paste', ({ event, slice }) => this.options.onPaste(event, slice));
           window.setTimeout(() => {
               if (this.isDestroyed) {
                   return;
@@ -44085,6 +44227,8 @@ img.ProseMirror-separator {
               FocusEvents,
               Keymap,
               Tabindex,
+              Drop,
+              Paste,
           ].filter(ext => {
               if (typeof this.options.enableCoreExtensions === 'object') {
                   return this.options.enableCoreExtensions[ext.name] !== false;
@@ -44434,97 +44578,6 @@ img.ProseMirror-separator {
       });
   }
 
-  /**
-   * The Mark class is used to create custom mark extensions.
-   * @see https://tiptap.dev/api/extensions#create-a-new-extension
-   */
-  class Mark {
-      constructor(config = {}) {
-          this.type = 'mark';
-          this.name = 'mark';
-          this.parent = null;
-          this.child = null;
-          this.config = {
-              name: this.name,
-              defaultOptions: {},
-          };
-          this.config = {
-              ...this.config,
-              ...config,
-          };
-          this.name = this.config.name;
-          if (config.defaultOptions && Object.keys(config.defaultOptions).length > 0) {
-              console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`);
-          }
-          // TODO: remove `addOptions` fallback
-          this.options = this.config.defaultOptions;
-          if (this.config.addOptions) {
-              this.options = callOrReturn(getExtensionField(this, 'addOptions', {
-                  name: this.name,
-              }));
-          }
-          this.storage = callOrReturn(getExtensionField(this, 'addStorage', {
-              name: this.name,
-              options: this.options,
-          })) || {};
-      }
-      static create(config = {}) {
-          return new Mark(config);
-      }
-      configure(options = {}) {
-          // return a new instance so we can use the same extension
-          // with different calls of `configure`
-          const extension = this.extend({
-              ...this.config,
-              addOptions: () => {
-                  return mergeDeep(this.options, options);
-              },
-          });
-          // Always preserve the current name
-          extension.name = this.name;
-          // Set the parent to be our parent
-          extension.parent = this.parent;
-          return extension;
-      }
-      extend(extendedConfig = {}) {
-          const extension = new Mark(extendedConfig);
-          extension.parent = this;
-          this.child = extension;
-          extension.name = extendedConfig.name ? extendedConfig.name : extension.parent.name;
-          if (extendedConfig.defaultOptions && Object.keys(extendedConfig.defaultOptions).length > 0) {
-              console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${extension.name}".`);
-          }
-          extension.options = callOrReturn(getExtensionField(extension, 'addOptions', {
-              name: extension.name,
-          }));
-          extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
-              name: extension.name,
-              options: extension.options,
-          }));
-          return extension;
-      }
-      static handleExit({ editor, mark }) {
-          const { tr } = editor.state;
-          const currentPos = editor.state.selection.$from;
-          const isAtEnd = currentPos.pos === currentPos.end();
-          if (isAtEnd) {
-              const currentMarks = currentPos.marks();
-              const isInMark = !!currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
-              if (!isInMark) {
-                  return false;
-              }
-              const removeMark = currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
-              if (removeMark) {
-                  tr.removeStoredMark(removeMark);
-              }
-              tr.insertText(' ', currentPos.pos);
-              editor.view.dispatch(tr);
-              return true;
-          }
-          return false;
-      }
-  }
-
   /**
    * The Node class is used to create custom node extensions.
    * @see https://tiptap.dev/api/extensions#create-a-new-extension
@@ -55426,7 +55479,7 @@ img.ProseMirror-separator {
    * This extension allows you to create list items.
    * @see https://www.tiptap.dev/api/nodes/list-item
    */
-  const ListItem$2 = Node$1.create({
+  const ListItem = Node$1.create({
       name: 'listItem',
       addOptions() {
           return {
@@ -55461,7 +55514,7 @@ img.ProseMirror-separator {
    * for the `textColor` and `backgroundColor` extensions.
    * @see https://www.tiptap.dev/api/marks/text-style
    */
-  const TextStyle$1 = Mark.create({
+  const TextStyle = Mark.create({
       name: 'textStyle',
       priority: 101,
       addOptions() {
@@ -55536,7 +55589,7 @@ img.ProseMirror-separator {
           return {
               toggleBulletList: () => ({ commands, chain }) => {
                   if (this.options.keepAttributes) {
-                      return chain().toggleList(this.name, this.options.itemTypeName, this.options.keepMarks).updateAttributes(ListItem$2.name, this.editor.getAttributes(TextStyle$1.name)).run();
+                      return chain().toggleList(this.name, this.options.itemTypeName, this.options.keepMarks).updateAttributes(ListItem.name, this.editor.getAttributes(TextStyle.name)).run();
                   }
                   return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks);
               },
@@ -55558,7 +55611,7 @@ img.ProseMirror-separator {
                   type: this.type,
                   keepMarks: this.options.keepMarks,
                   keepAttributes: this.options.keepAttributes,
-                  getAttributes: () => { return this.editor.getAttributes(TextStyle$1.name); },
+                  getAttributes: () => { return this.editor.getAttributes(TextStyle.name); },
                   editor: this.editor,
               });
           }
@@ -58416,40 +58469,6 @@ img.ProseMirror-separator {
       },
   });
 
-  /**
-   * This extension allows you to create list items.
-   * @see https://www.tiptap.dev/api/nodes/list-item
-   */
-  const ListItem$1 = Node$1.create({
-      name: 'listItem',
-      addOptions() {
-          return {
-              HTMLAttributes: {},
-              bulletListTypeName: 'bulletList',
-              orderedListTypeName: 'orderedList',
-          };
-      },
-      content: 'paragraph block*',
-      defining: true,
-      parseHTML() {
-          return [
-              {
-                  tag: 'li',
-              },
-          ];
-      },
-      renderHTML({ HTMLAttributes }) {
-          return ['li', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-      },
-      addKeyboardShortcuts() {
-          return {
-              Enter: () => this.editor.commands.splitListItem(this.name),
-              Tab: () => this.editor.commands.sinkListItem(this.name),
-              'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
-          };
-      },
-  });
-
   function findSuggestionMatch(config) {
       var _a;
       const { char, allowSpaces, allowedPrefixes, startOfLine, $position, } = config;
@@ -58855,84 +58874,6 @@ img.ProseMirror-separator {
       },
   });
 
-  /**
-   * This extension allows you to create list items.
-   * @see https://www.tiptap.dev/api/nodes/list-item
-   */
-  const ListItem = Node$1.create({
-      name: 'listItem',
-      addOptions() {
-          return {
-              HTMLAttributes: {},
-              bulletListTypeName: 'bulletList',
-              orderedListTypeName: 'orderedList',
-          };
-      },
-      content: 'paragraph block*',
-      defining: true,
-      parseHTML() {
-          return [
-              {
-                  tag: 'li',
-              },
-          ];
-      },
-      renderHTML({ HTMLAttributes }) {
-          return ['li', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-      },
-      addKeyboardShortcuts() {
-          return {
-              Enter: () => this.editor.commands.splitListItem(this.name),
-              Tab: () => this.editor.commands.sinkListItem(this.name),
-              'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
-          };
-      },
-  });
-
-  /**
-   * This extension allows you to create text styles. It is required by default
-   * for the `textColor` and `backgroundColor` extensions.
-   * @see https://www.tiptap.dev/api/marks/text-style
-   */
-  const TextStyle = Mark.create({
-      name: 'textStyle',
-      priority: 101,
-      addOptions() {
-          return {
-              HTMLAttributes: {},
-          };
-      },
-      parseHTML() {
-          return [
-              {
-                  tag: 'span',
-                  getAttrs: element => {
-                      const hasStyles = element.hasAttribute('style');
-                      if (!hasStyles) {
-                          return false;
-                      }
-                      return {};
-                  },
-              },
-          ];
-      },
-      renderHTML({ HTMLAttributes }) {
-          return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-      },
-      addCommands() {
-          return {
-              removeEmptyTextStyle: () => ({ state, commands }) => {
-                  const attributes = getMarkAttributes(state, this.type);
-                  const hasStyles = Object.entries(attributes).some(([, value]) => !!value);
-                  if (hasStyles) {
-                      return true;
-                  }
-                  return commands.unsetMark(this.name);
-              },
-          };
-      },
-  });
-
   /**
    * Matches an ordered list to a 1. on input (or any number followed by a dot).
    */
@@ -59163,7 +59104,7 @@ img.ProseMirror-separator {
               Text,
               BulletList,
               OrderedList,
-              ListItem$1,
+              ListItem,
               Bold,
               Italic,
               History,