@ni/spright-components 4.1.6 → 4.1.8

package/dist/all-components-bundle.js

@@ -26334,6 +26334,7 @@ so this becomes the fallback color for the slot */ ''}
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([readonly]) .root,
     :host([disabled]) .root {
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
@@ -26375,6 +26376,7 @@ so this becomes the fallback color for the slot */ ''}
         width: 100%;
     }
 
+    :host([readonly]:hover) .root::after,
     :host([disabled]:hover) .root::after {
         width: 0px;
     }
@@ -26455,11 +26457,20 @@ so this becomes the fallback color for the slot */ ''}
             }
 
             :host(:hover) .root {
+                border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
 
+            :host([readonly]) .root,
             :host([disabled]) .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
+                border-color: transparent;
+            }
+
+            :host([error-visible][readonly]) .root,
+            :host([error-visible][disabled]) .root {
+                padding-bottom: 0;
+                border-bottom-color: ${failColor};
             }
         `), appearanceBehavior(NumberFieldAppearance.outline, css `
             .root {
@@ -35240,6 +35251,7 @@ so this becomes the fallback color for the slot */ ''}
                       return true;
                   }
                   else if (!locked && (updated = this.recreateWrapper(next, node, outerDeco, innerDeco, view, pos))) {
+                      this.destroyBetween(this.index, i);
                       this.top.children[this.index] = updated;
                       if (updated.contentDOM) {
                           updated.dirty = CONTENT_DIRTY;
@@ -35259,7 +35271,8 @@ so this becomes the fallback color for the slot */ ''}
       // identical content, move over its children.
       recreateWrapper(next, node, outerDeco, innerDeco, view, pos) {
           if (next.dirty || node.isAtom || !next.children.length ||
-              !next.node.content.eq(node.content))
+              !next.node.content.eq(node.content) ||
+              !sameOuterDeco(outerDeco, next.outerDeco) || !innerDeco.eq(next.innerDeco))
               return null;
           let wrapper = NodeViewDesc.create(this.top, node, outerDeco, innerDeco, view, pos);
           if (wrapper.contentDOM) {
@@ -35530,9 +35543,9 @@ so this becomes the fallback color for the slot */ ''}
       let head = view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset, 1);
       if (head < 0)
           return null;
-      let $head = doc.resolve(head), $anchor, selection;
+      let $head = doc.resolve(head), anchor, selection;
       if (selectionCollapsed(domSel)) {
-          $anchor = $head;
+          anchor = head;
           while (nearestDesc && !nearestDesc.node)
               nearestDesc = nearestDesc.parent;
           let nearestDescNode = nearestDesc.node;
@@ -35543,11 +35556,25 @@ so this becomes the fallback color for the slot */ ''}
           }
       }
       else {
-          let anchor = view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset, 1);
+          if (domSel instanceof view.dom.ownerDocument.defaultView.Selection && domSel.rangeCount > 1) {
+              let min = head, max = head;
+              for (let i = 0; i < domSel.rangeCount; i++) {
+                  let range = domSel.getRangeAt(i);
+                  min = Math.min(min, view.docView.posFromDOM(range.startContainer, range.startOffset, 1));
+                  max = Math.max(max, view.docView.posFromDOM(range.endContainer, range.endOffset, -1));
+              }
+              if (min < 0)
+                  return null;
+              [anchor, head] = max == view.state.selection.anchor ? [max, min] : [min, max];
+              $head = doc.resolve(head);
+          }
+          else {
+              anchor = view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset, 1);
+          }
           if (anchor < 0)
               return null;
-          $anchor = doc.resolve(anchor);
       }
+      let $anchor = doc.resolve(anchor);
       if (!selection) {
           let bias = origin == "pointer" || (view.state.selection.head < $head.pos && !inWidget) ? 1 : -1;
           selection = selectionBetween(view, $anchor, $head, bias);
@@ -40365,7 +40392,18 @@ so this becomes the fallback color for the slot */ ''}
                   mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ');
               }
               else if (key === 'style') {
-                  mergedAttributes[key] = [mergedAttributes[key], value].join('; ');
+                  const newStyles = value ? value.split(';').map((style) => style.trim()).filter(Boolean) : [];
+                  const existingStyles = mergedAttributes[key] ? mergedAttributes[key].split(';').map((style) => style.trim()).filter(Boolean) : [];
+                  const styleMap = new Map();
+                  existingStyles.forEach(style => {
+                      const [property, val] = style.split(':').map(part => part.trim());
+                      styleMap.set(property, val);
+                  });
+                  newStyles.forEach(style => {
+                      const [property, val] = style.split(':').map(part => part.trim());
+                      styleMap.set(property, val);
+                  });
+                  mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join('; ');
               }
               else {
                   mergedAttributes[key] = value;
@@ -40377,6 +40415,7 @@ so this becomes the fallback color for the slot */ ''}
 
   function getRenderedAttributes(nodeOrMark, extensionAttributes) {
       return extensionAttributes
+          .filter(attribute => attribute.type === nodeOrMark.type.name)
           .filter(item => item.attribute.rendered)
           .map(item => {
           if (!item.attribute.renderHTML) {
@@ -41196,15 +41235,19 @@ so this becomes the fallback color for the slot */ ''}
               if (!addNodeView) {
                   return [];
               }
-              const nodeview = (node, view, getPos, decorations) => {
+              const nodeview = (node, view, getPos, decorations, innerDecorations) => {
                   const HTMLAttributes = getRenderedAttributes(node, extensionAttributes);
                   return addNodeView()({
-                      editor,
+                      // pass-through
                       node,
-                      getPos,
+                      view,
+                      getPos: getPos,
                       decorations,
-                      HTMLAttributes,
+                      innerDecorations,
+                      // tiptap-specific
+                      editor,
                       extension,
+                      HTMLAttributes,
                   });
               };
               return [extension.name, nodeview];
@@ -43169,10 +43212,17 @@ so this becomes the fallback color for the slot */ ''}
       const type = getNodeType(typeOrName, state.schema);
       const toggleType = getNodeType(toggleTypeOrName, state.schema);
       const isActive = isNodeActive(state, type, attributes);
+      let attributesToCopy;
+      if (state.selection.$anchor.sameParent(state.selection.$head)) {
+          // only copy attributes if the selection is pointing to a node of the same type
+          attributesToCopy = state.selection.$anchor.parent.attrs;
+      }
       if (isActive) {
-          return commands.setNode(toggleType);
+          return commands.setNode(toggleType, attributesToCopy);
       }
-      return commands.setNode(type, attributes);
+      // If the node is not active, we want to set the new node type with the given attributes
+      // Copying over the attributes from the current node if the selection is pointing to a node of the same type
+      return commands.setNode(type, { ...attributesToCopy, ...attributes });
   };
 
   const toggleWrap = (typeOrName, attributes = {}) => ({ state, commands }) => {
@@ -43506,7 +43556,8 @@ so this becomes the fallback color for the slot */ ''}
                   appendTransaction: (transactions, oldState, newState) => {
                       const docChanges = transactions.some(transaction => transaction.docChanged)
                           && !oldState.doc.eq(newState.doc);
-                      if (!docChanges) {
+                      const ignoreTr = transactions.some(transaction => transaction.getMeta('preventClearDocument'));
+                      if (!docChanges || ignoreTr) {
                           return;
                       }
                       const { empty, from, to } = oldState.selection;
@@ -43516,7 +43567,7 @@ so this becomes the fallback color for the slot */ ''}
                       if (empty || !allWasSelected) {
                           return;
                       }
-                      const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0;
+                      const isEmpty = isNodeEmpty(newState.doc);
                       if (!isEmpty) {
                           return;
                       }
@@ -43730,6 +43781,28 @@ 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;
 }
@@ -43854,6 +43927,8 @@ img.ProseMirror-separator {
               onBlur: () => null,
               onDestroy: () => null,
               onContentError: ({ error }) => { throw error; },
+              onPaste: () => null,
+              onDrop: () => null,
           };
           this.isCapturingTransaction = false;
           this.capturedTransaction = null;
@@ -43873,6 +43948,12 @@ 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));
+          }
           window.setTimeout(() => {
               if (this.isDestroyed) {
                   return;
@@ -43961,6 +44042,7 @@ img.ProseMirror-separator {
        *
        * @param plugin A ProseMirror plugin
        * @param handlePlugins Control how to merge the plugin into the existing plugins.
+       * @returns The new editor state
        */
       registerPlugin(plugin, handlePlugins) {
           const plugins = isFunction$3(handlePlugins)
@@ -43968,15 +44050,17 @@ img.ProseMirror-separator {
               : [...this.state.plugins, plugin];
           const state = this.state.reconfigure({ plugins });
           this.view.updateState(state);
+          return state;
       }
       /**
        * Unregister a ProseMirror plugin.
        *
        * @param nameOrPluginKey The plugins name
+       * @returns The new editor state or undefined if the editor is destroyed
        */
       unregisterPlugin(nameOrPluginKey) {
           if (this.isDestroyed) {
-              return;
+              return undefined;
           }
           // @ts-ignore
           const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key;
@@ -43985,6 +44069,7 @@ img.ProseMirror-separator {
               plugins: this.state.plugins.filter(plugin => !plugin.key.startsWith(name)),
           });
           this.view.updateState(state);
+          return state;
       }
       /**
        * Creates an extension manager.
@@ -44000,7 +44085,12 @@ img.ProseMirror-separator {
               FocusEvents,
               Keymap,
               Tabindex,
-          ] : [];
+          ].filter(ext => {
+              if (typeof this.options.enableCoreExtensions === 'object') {
+                  return this.options.enableCoreExtensions[ext.name] !== false;
+              }
+              return true;
+          }) : [];
           const allExtensions = [...coreExtensions, ...this.options.extensions].filter(extension => {
               return ['extension', 'node', 'mark'].includes(extension === null || extension === void 0 ? void 0 : extension.type);
           });
@@ -44212,6 +44302,12 @@ img.ProseMirror-separator {
       destroy() {
           this.emit('destroy');
           if (this.view) {
+              // Cleanup our reference to prevent circular references which caused memory leaks
+              // @ts-ignore
+              const dom = this.view.dom;
+              if (dom && dom.editor) {
+                  delete dom.editor;
+              }
               this.view.destroy();
           }
           this.removeAllListeners();
@@ -58614,7 +58710,7 @@ img.ProseMirror-separator {
                   char: '@',
                   pluginKey: MentionPluginKey,
                   command: ({ editor, range, props }) => {
-                      var _a, _b;
+                      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;
@@ -58636,7 +58732,8 @@ img.ProseMirror-separator {
                           },
                       ])
                           .run();
-                      (_b = window.getSelection()) === null || _b === void 0 ? void 0 : _b.collapseToEnd();
+                      // 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);
@@ -67419,7 +67516,8 @@ focus outline in that case.
         return {
           disconnect: () => {
             var _a;
-            return (_a = get()) == null ? void 0 : _a.disconnect();
+            (_a = get()) == null ? void 0 : _a.disconnect();
+            _ro = null;
           },
           observe: (target) => {
             var _a;
@@ -67491,10 +67589,9 @@ focus outline in that case.
       this.cleanup = () => {
         this.unsubs.filter(Boolean).forEach((d) => d());
         this.unsubs = [];
+        this.observer.disconnect();
         this.scrollElement = null;
         this.targetWindow = null;
-        this.observer.disconnect();
-        this.elementsCache.clear();
       };
       this._didMount = () => {
         return () => {
@@ -67516,6 +67613,9 @@ focus outline in that case.
           } else {
             this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
           }
+          this.elementsCache.forEach((cached) => {
+            this.observer.observe(cached);
+          });
           this._scrollToOffset(this.getScrollOffset(), {
             adjustments: void 0,
             behavior: void 0
@@ -67889,7 +67989,10 @@ focus outline in that case.
             ...measurements.slice(-this.options.lanes).map((m) => m.end)
           );
         }
-        return end - this.options.scrollMargin + this.options.paddingEnd;
+        return Math.max(
+          end - this.options.scrollMargin + this.options.paddingEnd,
+          0
+        );
       };
       this._scrollToOffset = (offset, {
         adjustments,