@ni/ok-components 0.3.6 → 0.3.8

package/dist/all-components-bundle.js

@@ -17712,13 +17712,14 @@
             background-color: transparent;
             cursor: pointer;
             outline: none;
-            --ni-private-step-icon-background-full-size: 100% 100%;
-            ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}
-            --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);
-            --ni-private-step-icon-background-none-size: 0% 0%;
+            --ni-private-step-icon-background-full-size: scale(1,1);
+            ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}
+            --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);
+            --ni-private-step-icon-background-none-size: scale(0,0);
 
             --ni-private-step-icon-color: ${buttonLabelFontColor};
             --ni-private-step-icon-border-color: transparent;
+            --ni-private-step-icon-border-width: 1px;
             --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-icon-outline-inset-color: transparent;
@@ -17821,6 +17822,20 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        .icon-background {
+            grid-area: icon;
+            display: inline-block;
+            height: ${controlHeight};
+            width: ${controlHeight};
+            ${userSelectNone$1};
+            background-color:  var(--ni-private-step-icon-background-color);
+            transform: var(--ni-private-step-icon-background-size);
+            border: none;
+            border-radius: 100%;
+            transition:
+                transform ${smallDelay} ease-in-out;
+        }
+
         .icon {
             grid-area: icon;
             display: inline-flex;
@@ -17833,31 +17848,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             font: ${buttonLabelFont};
             color: var(--ni-private-step-icon-color);
             ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);
-            border-style: solid;
+            border: none;
             border-radius: 100%;
-            border-color: var(--ni-private-step-icon-border-color);
-            border-width: 1px;
-            background-image: radial-gradient(
-                closest-side,
-                ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:
-        https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
-    */}
-                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),
-                transparent 100%
-            );
-            background-origin: border-box;
-            background-size: var(--ni-private-step-icon-background-size);
-            background-repeat: no-repeat;
-            background-position: center center;
+            box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);
             position: relative;
             transition:
-                border-color ${smallDelay} ease-in-out,
-                border-width ${smallDelay} ease-in-out,
-                background-size ${smallDelay} ease-out;
+                box-shadow ${smallDelay} ease-in-out;
         }
 
         :host([selected]) .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .icon::before {
@@ -17870,10 +17870,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             outline-style: solid;
             outline-width: 0px;
             outline-offset: 0px;
-            border: 1px solid transparent;
+            border: none;
             border-radius: 100%;
             color: transparent;
-            background-clip: border-box;
             transition:
                 outline-color ${smallDelay} ease-in-out,
                 outline-width ${smallDelay} ease-in-out,
@@ -18025,7 +18024,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:hover .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:hover .line {
@@ -18076,12 +18075,13 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control${focusVisible} .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
-            outline-offset: -2px;
+            ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
+            outline-offset: -4px;
         }
 
         .control${focusVisible} .line {
@@ -18128,7 +18128,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:active .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:active .icon::before {
@@ -19462,6 +19462,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>
@@ -32802,7 +32803,8 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(this.from, this.from + this.slice.size, doc.slice(this.from, this.to));
       }
       map(mapping) {
-          let from = mapping.mapResult(this.from, 1), to = mapping.mapResult(this.to, -1);
+          let to = mapping.mapResult(this.to, -1);
+          let from = this.from == this.to && ReplaceStep.MAP_BIAS < 0 ? to : mapping.mapResult(this.from, 1);
           if (from.deletedAcross && to.deletedAcross)
               return null;
           return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice, this.structure);
@@ -32841,6 +32843,15 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(json.from, json.to, Slice.fromJSON(schema, json.slice), !!json.structure);
       }
   }
+  /**
+  By default, for backwards compatibility, an inserting step
+  mapped over an insertion at that same position fill move after
+  the inserted content. In a collaborative editing situation, that
+  can make redone insertions appear in unexpected places. You can
+  set this to -1 to make such mapping keep the step before the
+  insertion instead.
+  */
+  ReplaceStep.MAP_BIAS = 1;
   Step$1.jsonID("replace", ReplaceStep);
   /**
   Replace a part of the document with a slice of content, but
@@ -33827,6 +33838,26 @@ so this becomes the fallback color for the slot */ ''}
   }
   function deleteRange$1(tr, from, to) {
       let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
+      // When the deleted range spans from the start of one textblock to
+      // the start of another one, move out of the start of both blocks.
+      if ($from.parent.isTextblock && $to.parent.isTextblock && $from.start() != $to.start() &&
+          $from.parentOffset == 0 && $to.parentOffset == 0) {
+          let shared = $from.sharedDepth(to), isolated = false;
+          for (let d = $from.depth; d > shared; d--)
+              if ($from.node(d).type.spec.isolating)
+                  isolated = true;
+          for (let d = $to.depth; d > shared; d--)
+              if ($to.node(d).type.spec.isolating)
+                  isolated = true;
+          if (!isolated) {
+              for (let d = $from.depth; d > 0 && from == $from.start(d); d--)
+                  from = $from.before(d);
+              for (let d = $to.depth; d > 0 && to == $to.start(d); d--)
+                  to = $to.before(d);
+              $from = tr.doc.resolve(from);
+              $to = tr.doc.resolve(to);
+          }
+      }
       let covered = coveredDepths($from, $to);
       for (let i = 0; i < covered.length; i++) {
           let depth = covered[i], last = i == covered.length - 1;
@@ -42575,7 +42606,6 @@ so this becomes the fallback color for the slot */ ''}
     return !!findMarkInSet(marks, type, attributes);
   }
   function getMarkRange($pos, type, attributes) {
-    var _a;
     if (!$pos || !type) {
       return;
     }
@@ -42586,7 +42616,12 @@ so this becomes the fallback color for the slot */ ''}
     if (!start.node || !start.node.marks.some((mark2) => mark2.type === type)) {
       return;
     }
-    attributes = attributes || ((_a = start.node.marks[0]) == null ? void 0 : _a.attrs);
+    if (!attributes) {
+      const firstMark = start.node.marks.find((mark2) => mark2.type === type);
+      if (firstMark) {
+        attributes = firstMark.attrs;
+      }
+    }
     const mark = findMarkInSet([...start.node.marks], type, attributes);
     if (!mark) {
       return;
@@ -42621,7 +42656,7 @@ so this becomes the fallback color for the slot */ ''}
   }
 
   // src/commands/extendMarkRange.ts
-  var extendMarkRange = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+  var extendMarkRange = (typeOrName, attributes) => ({ tr, state, dispatch }) => {
     const type = getMarkType(typeOrName, state.schema);
     const { doc, selection } = tr;
     const { $from, from, to } = selection;
@@ -45876,7 +45911,7 @@ so this becomes the fallback color for the slot */ ''}
             const newEnd = mapping.slice(index).map(step.to);
             const oldStart = mapping.invert().map(newStart, -1);
             const oldEnd = mapping.invert().map(newEnd);
-            const foundBeforeMark = (_a3 = nextTransaction.doc.nodeAt(newStart - 1)) == null ? void 0 : _a3.marks.some((mark) => mark.eq(step.mark));
+            const foundBeforeMark = newStart > 0 ? (_a3 = nextTransaction.doc.nodeAt(newStart - 1)) == null ? void 0 : _a3.marks.some((mark) => mark.eq(step.mark)) : false;
             const foundAfterMark = (_b3 = nextTransaction.doc.nodeAt(newEnd)) == null ? void 0 : _b3.marks.some((mark) => mark.eq(step.mark));
             this.editor.emit("delete", {
               type: "mark",
@@ -61857,6 +61892,19 @@ ${nextLine.slice(indentLevel + 2)}`;
   }
 
   // src/suggestion.ts
+  function hasInsertedWhitespace(transaction) {
+    if (!transaction.docChanged) {
+      return false;
+    }
+    return transaction.steps.some((step) => {
+      const slice = step.slice;
+      if (!(slice == null ? void 0 : slice.content)) {
+        return false;
+      }
+      const inserted = slice.content.textBetween(0, slice.content.size, "\n");
+      return /\s/.test(inserted);
+    });
+  }
   var SuggestionPluginKey = new PluginKey("suggestion");
   function Suggestion({
     pluginKey = SuggestionPluginKey,
@@ -61875,10 +61923,12 @@ ${nextLine.slice(indentLevel + 2)}`;
     render = () => ({}),
     allow = () => true,
     findSuggestionMatch: findSuggestionMatch2 = findSuggestionMatch,
-    shouldShow
+    shouldShow,
+    shouldResetDismissed
   }) {
     let props;
     const renderer = render == null ? void 0 : render();
+    const effectiveAllowSpaces = allowSpaces && !allowToIncludeChar;
     const getAnchorClientRect = () => {
       const pos = editor.state.selection.$anchor.pos;
       const coords = editor.view.coordsAtPos(pos);
@@ -61900,6 +61950,27 @@ ${nextLine.slice(indentLevel + 2)}`;
         return (currentDecorationNode == null ? void 0 : currentDecorationNode.getBoundingClientRect()) || null;
       };
     };
+    const shouldKeepDismissed = ({
+      match,
+      dismissedRange,
+      state,
+      transaction
+    }) => {
+      if (shouldResetDismissed == null ? void 0 : shouldResetDismissed({
+        editor,
+        state,
+        range: dismissedRange,
+        match,
+        transaction,
+        allowSpaces: effectiveAllowSpaces
+      })) {
+        return false;
+      }
+      if (effectiveAllowSpaces) {
+        return match.range.from === dismissedRange.from;
+      }
+      return match.range.from === dismissedRange.from && !hasInsertedWhitespace(transaction);
+    };
     function dispatchExit(view, pluginKeyRef) {
       var _a;
       try {
@@ -62002,7 +62073,8 @@ ${nextLine.slice(indentLevel + 2)}`;
             },
             query: null,
             text: null,
-            composing: false
+            composing: false,
+            dismissedRange: null
           };
           return state;
         },
@@ -62020,9 +62092,16 @@ ${nextLine.slice(indentLevel + 2)}`;
             next.range = { from: 0, to: 0 };
             next.query = null;
             next.text = null;
+            next.dismissedRange = prev.active ? { ...prev.range } : prev.dismissedRange;
             return next;
           }
           next.composing = composing;
+          if (transaction.docChanged && next.dismissedRange !== null) {
+            next.dismissedRange = {
+              from: transaction.mapping.map(next.dismissedRange.from),
+              to: transaction.mapping.map(next.dismissedRange.to)
+            };
+          }
           if (isEditable && (empty || editor.view.composing)) {
             if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
               next.active = false;
@@ -62048,12 +62127,27 @@ ${nextLine.slice(indentLevel + 2)}`;
               text: match.text,
               transaction
             }))) {
-              next.active = true;
-              next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
-              next.range = match.range;
-              next.query = match.query;
-              next.text = match.text;
+              if (next.dismissedRange !== null && !shouldKeepDismissed({
+                match,
+                dismissedRange: next.dismissedRange,
+                state,
+                transaction
+              })) {
+                next.dismissedRange = null;
+              }
+              if (next.dismissedRange === null) {
+                next.active = true;
+                next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
+                next.range = match.range;
+                next.query = match.query;
+                next.text = match.text;
+              } else {
+                next.active = false;
+              }
             } else {
+              if (!match) {
+                next.dismissedRange = null;
+              }
               next.active = false;
             }
           } else {
@@ -62071,41 +62165,18 @@ ${nextLine.slice(indentLevel + 2)}`;
       props: {
         // Call the keydown hook if suggestion is active.
         handleKeyDown(view, event) {
-          var _a, _b, _c, _d;
+          var _a, _b;
           const { active, range } = plugin.getState(view.state);
           if (!active) {
             return false;
           }
           if (event.key === "Escape" || event.key === "Esc") {
             const state = plugin.getState(view.state);
-            const cachedNode = (_a = props == null ? void 0 : props.decorationNode) != null ? _a : null;
-            const decorationNode = cachedNode != null ? cachedNode : (state == null ? void 0 : state.decorationId) ? view.dom.querySelector(`[data-decoration-id="${state.decorationId}"]`) : null;
-            const handledByKeyDown = ((_b = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _b.call(renderer, { view, event, range: state.range })) || false;
-            if (handledByKeyDown) {
-              return true;
-            }
-            const exitProps = {
-              editor,
-              range: state.range,
-              query: state.query,
-              text: state.text,
-              items: [],
-              command: (commandProps) => {
-                return command({ editor, range: state.range, props: commandProps });
-              },
-              decorationNode,
-              // If we have a cached decoration node, use it for the clientRect
-              // to avoid another DOM lookup. If not, leave clientRect null and
-              // let consumer decide if they want to query.
-              clientRect: decorationNode ? () => {
-                return decorationNode.getBoundingClientRect() || null;
-              } : null
-            };
-            (_c = renderer == null ? void 0 : renderer.onExit) == null ? void 0 : _c.call(renderer, exitProps);
+            (_a = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _a.call(renderer, { view, event, range: state.range });
             dispatchExit(view, pluginKey);
             return true;
           }
-          const handled = ((_d = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _d.call(renderer, { view, event, range })) || false;
+          const handled = ((_b = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _b.call(renderer, { view, event, range })) || false;
           return handled;
         },
         // Setup decorator on the currently active suggestion.
@@ -62398,7 +62469,8 @@ ${nextLine.slice(indentLevel + 2)}`;
         return helpers.parseChildren([tokens[0]]);
       }
       const content = helpers.parseInline(tokens);
-      if (content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
+      const hasExplicitEmptyParagraphMarker = tokens.length === 1 && tokens[0].type === "text" && (tokens[0].raw === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].text === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].raw === NBSP_CHAR || tokens[0].text === NBSP_CHAR);
+      if (hasExplicitEmptyParagraphMarker && content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
         return helpers.createNode("paragraph", void 0, []);
       }
       return helpers.createNode("paragraph", void 0, content);
@@ -63715,6 +63787,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       ];
     }
   });
+  var skipTrailingNodeMeta = "skipTrailingNode";
   function nodeEqualsType({ types, node }) {
     return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
   }
@@ -63734,11 +63807,14 @@ ${nextLine.slice(indentLevel + 2)}`;
       return [
         new Plugin({
           key: plugin,
-          appendTransaction: (_, __, state) => {
+          appendTransaction: (transactions, __, state) => {
             const { doc, tr, schema } = state;
             const shouldInsertNodeAtEnd = plugin.getState(state);
             const endPosition = doc.content.size;
             const type = schema.nodes[defaultNode];
+            if (transactions.some((transaction) => transaction.getMeta(skipTrailingNodeMeta))) {
+              return;
+            }
             if (!shouldInsertNodeAtEnd) {
               return;
             }
@@ -66453,6 +66529,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>
@@ -66551,28 +66628,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `;
 
-  /**
-   * Observable class to subscribe to changes in the page's device pixel ratio
-   * Based on: https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/#the-less-code-and-more-flexible-js-solution
-   */
-  class DevicePixelRatio {
-      constructor() {
-          const update = () => {
-              this.current = window.devicePixelRatio;
-              window
-                  .matchMedia(`(resolution: ${this.current}x)`)
-                  .addEventListener('change', update, { once: true });
-          };
-          update();
-      }
-  }
-  __decorate([
-      observable
-  ], DevicePixelRatio.prototype, "current", void 0);
-  const devicePixelRatio = new DevicePixelRatio();
-
   const template$w = html `<ol><slot
-        style="--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};"
         name="step"
         ${slotted('steps')}
     ></slot></ol>`;