@limetech/lime-elements 39.44.5 → 39.45.0

package/dist/cjs/{markdown-parser-ChnRAxpZ.js → markdown-parser-YH5HSSgF.js}

@@ -33093,7 +33093,7 @@ function rehypeRaw(options) {
 
 // http://www.w3.org/TR/CSS21/grammar.html
 // https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
-var COMMENT_REGEX = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
+var COMMENT_REGEX = /\/\*(?:[^*]|\*(?!\/))*\*\//g;
 
 var NEWLINE_REGEX = /\n/g;
 var WHITESPACE_REGEX = /^\s*/;
@@ -33101,12 +33101,10 @@ var WHITESPACE_REGEX = /^\s*/;
 // declaration
 var PROPERTY_REGEX = /^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/;
 var COLON_REGEX = /^:\s*/;
-var VALUE_REGEX = /^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/;
+var VALUE_REGEX =
+  /^((?:'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"|url\((?:'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"|[^)]*)\)|[^};])+)/;
 var SEMICOLON_REGEX = /^[;\s]*/;
 
-// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Polyfill
-var TRIM_REGEX = /^\s+|\s+$/g;
-
 // strings
 var NEWLINE = '\n';
 var FORWARD_SLASH = '/';
@@ -33230,16 +33228,13 @@ function index (style, options) {
   /**
    * Parse comments.
    *
-   * @param {Object[]} [rules]
+   * @param {Object[]} rules
    * @return {Object[]}
    */
   function comments(rules) {
     var c;
-    rules = rules || [];
     while ((c = comment())) {
-      if (c !== false) {
-        rules.push(c);
-      }
+      rules.push(c);
     }
     return rules;
   }
@@ -33301,9 +33296,9 @@ function index (style, options) {
 
     var ret = pos({
       type: TYPE_DECLARATION,
-      property: trim(prop[0].replace(COMMENT_REGEX, EMPTY_STRING)),
+      property: prop[0].replace(COMMENT_REGEX, EMPTY_STRING).trim(),
       value: val
-        ? trim(val[0].replace(COMMENT_REGEX, EMPTY_STRING))
+        ? val[0].replace(COMMENT_REGEX, EMPTY_STRING).trim()
         : EMPTY_STRING
     });
 
@@ -33326,10 +33321,8 @@ function index (style, options) {
     // declarations
     var decl;
     while ((decl = declaration())) {
-      if (decl !== false) {
-        decls.push(decl);
-        comments(decls);
-      }
+      decls.push(decl);
+      comments(decls);
     }
 
     return decls;
@@ -33339,47 +33332,34 @@ function index (style, options) {
   return declarations();
 }
 
-/**
- * Trim `str`.
- *
- * @param {String} str
- * @return {String}
- */
-function trim(str) {
-  return str ? str.replace(TRIM_REGEX, EMPTY_STRING) : EMPTY_STRING;
-}
-
-/**
- * Parses inline style to object.
- *
- * @param style - Inline style.
- * @param iterator - Iterator.
- * @returns - Style object or null.
- *
- * @example Parsing inline style to object:
- *
- * ```js
- * import parse from 'style-to-object';
- * parse('line-height: 42;'); // { 'line-height': '42' }
- * ```
- */
+//#region src/index.ts
+/**
+* Parses inline style to object.
+*
+* @param style - Inline style.
+* @param iterator - Iterator.
+* @returns - Style object or null.
+*
+* @example Parsing inline style to object:
+*
+* ```js
+* import parse from 'style-to-object';
+* parse('line-height: 42;'); // { 'line-height': '42' }
+* ```
+*/
 function StyleToObject(style, iterator) {
-    let styleObject = null;
-    if (!style || typeof style !== 'string') {
-        return styleObject;
-    }
-    const declarations = index(style);
-    declarations.forEach((declaration) => {
-        if (declaration.type !== 'declaration') {
-            return;
-        }
-        const { property, value } = declaration;
-        if (value) {
-            styleObject = styleObject || {};
-            styleObject[property] = value;
-        }
-    });
-    return styleObject;
+	let styleObject = null;
+	if (!style || typeof style !== "string") return styleObject;
+	const declarations = index(style);
+	declarations.forEach((declaration) => {
+		if (declaration.type !== "declaration") return;
+		const { property, value } = declaration;
+		if (value) {
+			styleObject = styleObject ?? {};
+			styleObject[property] = value;
+		}
+	});
+	return styleObject;
 }
 
 var colorName$1;

package/dist/collection/components/list/list.js

@@ -50,6 +50,25 @@ export class List {
             this.listElement.removeEventListener('mousedown', this.handleItemMouseDown);
             this.listElement.addEventListener('mousedown', this.handleItemMouseDown);
             this.mdcList = new MDCList(element);
+            // NOTE: This has no effect. It is kept as a marker rather than
+            // removed, so that its absence isn't mistaken for an oversight.
+            //
+            // MDC indexes each row for typeahead by looking for
+            // `.mdc-deprecated-list-item__primary-text` inside it, while
+            // `limel-list-item` renders its label as `<span class="label">`. MDC
+            // therefore builds an empty index, and typing does nothing.
+            //
+            // Do not "fix" this by adding MDC's class name to `limel-list-item`.
+            // That revives MDC's typeahead along with three behaviors that cannot
+            // be configured from the outside: a hard coded 300ms buffer, `Enter`
+            // being ignored for as long as that buffer lives (its `notifyAction`
+            // is guarded by `isTypeaheadInProgress`), and the space bar being
+            // excluded from matches. It would also collide with `limel-menu`,
+            // where single characters are used as item hotkeys.
+            //
+            // `limel-select` implements its own typeahead instead, see
+            // `src/util/typeahead.ts`. It intercepts typed characters in the
+            // capture phase on this very element, so they never reach MDC.
             this.mdcList.hasTypeahead = true;
         };
         /**

package/dist/collection/components/select/select.js

@@ -2,11 +2,23 @@ import { MDCFloatingLabel } from "@material/floating-label";
 import { MDCSelectHelperText } from "@material/select/helper-text";
 import { h, } from "@stencil/core";
 import { isMobileDevice } from "../../util/device";
-import { ENTER, SPACE } from "../../util/keycodes";
+import { ENTER, SPACEBAR } from "../../util/keycodes";
 import { isMultiple } from "../../util/multiple";
 import { createRandomString } from "../../util/random-string";
-import { SelectTemplate, triggerIconColorWarning } from "./select.template";
+import { findTypeaheadMatch, isTypeaheadKey, NO_TYPEAHEAD_MATCH, TypeaheadBuffer, } from "../../util/typeahead";
+import { createMenuItems, SelectTemplate, triggerIconColorWarning, } from "./select.template";
 /**
+ * ## Keyboard
+ *
+ * Typing characters jumps to the option whose text starts with them, the way
+ * a native `<select>` does. Characters accumulate for a short while, so typing
+ * `n`, `e` finds "Netherlands" rather than the next option starting with `n`.
+ * Pressing the same character repeatedly cycles through all options starting
+ * with it. This works both while the dropdown is open, and while the closed
+ * component has focus — in which case the dropdown opens with the match
+ * highlighted. Typing only moves the highlight; the value is not changed until
+ * the option is picked with `Enter` or a click.
+ *
  * @exampleComponent limel-example-select-basic
  * @exampleComponent limel-example-select-with-icons
  * @exampleComponent limel-example-select-with-separators
@@ -26,6 +38,15 @@ export class Select {
     updateHasPrimaryComponent() {
         this.hasPrimaryComponentMemo = this.computeHasPrimaryComponent();
     }
+    /**
+     * `options` and `required` are the inputs that decide which rows the
+     * dropdown renders, and therefore which row an index refers to. When
+     * either changes, a buffered typeahead match no longer points at what the
+     * user was aiming for.
+     */
+    resetTypeaheadOnItemsChange() {
+        this.resetTypeahead();
+    }
     constructor() {
         /**
          * Set to `true` to make the field disabled.
@@ -57,10 +78,51 @@ export class Select {
         this.hasChanged = false;
         this.hasPrimaryComponentMemo = false;
         this.checkValid = false;
+        this.typeaheadBuffer = new TypeaheadBuffer();
+        this.handleMenuTriggerKeyDown = (event) => {
+            // Typeahead runs first, so that a space extends an ongoing typeahead
+            // instead of just opening the dropdown. A *bare* space is declined by
+            // `handleTypeaheadKey`, and keeps its usual meaning below.
+            if (this.handleTypeaheadKey(event, NO_TYPEAHEAD_MATCH)) {
+                return;
+            }
+            const isEnter = event.key === ENTER;
+            const isSpace = event.key === SPACEBAR;
+            if (!this.menuOpen && (isSpace || isEnter)) {
+                event.stopPropagation();
+                event.preventDefault();
+                // `preventDefault` cancels the activation click that the trigger
+                // `button` would otherwise synthesize, so the menu has to be
+                // opened here rather than through the click handler.
+                this.openMenu();
+            }
+        };
+        this.setListElement = (element) => {
+            var _a, _b;
+            if (this.list === element) {
+                return;
+            }
+            (_a = this.list) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleListKeyDownCapture, true);
+            this.list = element;
+            (_b = this.list) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleListKeyDownCapture, true);
+        };
+        /**
+         * Key handler for the dropdown, in the capture phase.
+         *
+         * `MDCList` listens for `keydown` on the `ul` inside `limel-list`'s shadow
+         * root, so capturing on the `limel-list` element itself is the only place
+         * a typed character can be stopped before MDC sees it. It has to be
+         * stopped: MDC would add it to its own typeahead buffer, which suppresses
+         * selection with `Enter` for as long as that buffer lives, and it treats
+         * the space bar as a selection.
+         *
+         * @param event - the key that was pressed
+         */
+        this.handleListKeyDownCapture = (event) => {
+            this.handleTypeaheadKey(event, this.getFocusedMenuItemIndex());
+        };
         this.handleMenuChange = this.handleMenuChange.bind(this);
         this.handleNativeChange = this.handleNativeChange.bind(this);
-        this.handleMenuTriggerKeyPress =
-            this.handleMenuTriggerKeyPress.bind(this);
         this.openMenu = this.openMenu.bind(this);
         this.closeMenu = this.closeMenu.bind(this);
         this.portalId = createRandomString();
@@ -96,6 +158,7 @@ export class Select {
     }
     disconnectedCallback() {
         this.cancelPendingFocus();
+        this.resetTypeahead();
         if (this.mdcFloatingLabel) {
             this.mdcFloatingLabel.destroy();
         }
@@ -110,7 +173,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '8f65bfbadfa797644b4d458452e2eceac2dbcda8', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '97e6b0b033a487e26ab7e4abe7165837ebe08911', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {
@@ -145,6 +208,21 @@ export class Select {
                 if (!this.menuOpen) {
                     return;
                 }
+                // Consumed on read, so that a later, unrelated re-render
+                // cannot resurrect a stale index and yank focus.
+                const typeaheadIndex = this.pendingTypeaheadIndex;
+                this.pendingTypeaheadIndex = undefined;
+                if (typeaheadIndex !== undefined &&
+                    this.focusMenuItemAtIndex(list, typeaheadIndex)) {
+                    return;
+                }
+                // Picking an option while `multiple` re-renders the dropdown
+                // without closing it, which brings us back here with a row
+                // already focused. Moving to the first option then would lose
+                // the user's place in the list after every pick.
+                if (this.getFocusedMenuItemIndex() !== NO_TYPEAHEAD_MATCH) {
+                    return;
+                }
                 this.focusFirstMenuItem(list);
             });
             this.focusObserver.observe(list);
@@ -167,6 +245,30 @@ export class Select {
             firstItem.focus({ preventScroll: true });
         }
     }
+    /**
+     * Focus the row at a given index in the dropdown.
+     *
+     * The rows only become focusable once `limel-list` has set up `MDCList`,
+     * which is what gives them a `tabindex`. Callers use the return value to
+     * fall back to `pendingTypeaheadIndex` when that has not happened yet.
+     *
+     * @param list - the `limel-list` of the dropdown
+     * @param index - the index of the row, as rendered in its `data-index`
+     * @returns whether the row could be focused
+     */
+    focusMenuItemAtIndex(list, index) {
+        var _a;
+        const item = (_a = list === null || list === void 0 ? void 0 : list.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${index}"]`);
+        if (!item) {
+            return false;
+        }
+        // Scrolled explicitly, and only within the dropdown: letting `focus()`
+        // scroll would scroll the page, since the dropdown is rendered into a
+        // portal that is absolutely positioned on the `body`.
+        item.focus({ preventScroll: true });
+        item.scrollIntoView({ block: 'nearest' });
+        return list.shadowRoot.activeElement === item;
+    }
     setTriggerFocus() {
         const trigger = this.host.shadowRoot.querySelector('.limel-select-trigger');
         trigger.focus();
@@ -218,6 +320,7 @@ export class Select {
         this.change.emit(option);
         this.menuOpen = false;
         this.cancelPendingFocus();
+        this.resetTypeahead();
         this.setTriggerFocus();
     }
     openMenu() {
@@ -251,17 +354,111 @@ export class Select {
     closeMenu() {
         this.menuOpen = false;
         this.cancelPendingFocus();
+        this.resetTypeahead();
         this.setTriggerFocus();
     }
-    handleMenuTriggerKeyPress(event) {
-        const isEnter = event.key === ENTER;
-        const isSpace = event.key === SPACE;
-        if (!this.menuOpen && (isSpace || isEnter)) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.menuOpen = true;
+    /**
+     * Move the highlight to the option matching the characters typed so far,
+     * the way a native `<select>` does. Never changes the value — the option
+     * still has to be picked with `Enter` or a click.
+     *
+     * @param event - the key that was pressed
+     * @param focusedIndex - the row that currently has focus, if any
+     * @returns whether the key was handled as typeahead
+     */
+    handleTypeaheadKey(event, focusedIndex) {
+        // The native dropdown on mobile devices does its own typeahead. Note
+        // that `setMenuFocus` bails out on mobile too, so a pending index
+        // would never be consumed there.
+        if (this.isMobileDevice || !isTypeaheadKey(event)) {
+            return false;
+        }
+        // A space only continues an ongoing typeahead. On its own it keeps its
+        // usual meaning of opening the dropdown, or selecting the focused
+        // option.
+        if (event.key === SPACEBAR && this.typeaheadBuffer.isEmpty) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        // Derived per key press rather than cached, so that the indices always
+        // refer to the rows the dropdown renders right now.
+        const items = createMenuItems(this.options, this.value, this.required);
+        const candidates = items.map((item) => ('separator' in item ? null : item));
+        const buffer = this.typeaheadBuffer.append(event.key);
+        const currentIndex = this.resolveTypeaheadIndex(items, focusedIndex);
+        const index = findTypeaheadMatch(candidates, buffer, currentIndex);
+        if (index !== NO_TYPEAHEAD_MATCH) {
+            this.focusTypeaheadMatch(index);
+        }
+        return true;
+    }
+    /**
+     * @param items - the items of the dropdown
+     * @param focusedIndex - the row that currently has focus, if any
+     * @returns the index a typeahead search should start from
+     */
+    resolveTypeaheadIndex(items, focusedIndex) {
+        if (focusedIndex !== NO_TYPEAHEAD_MATCH) {
+            return focusedIndex;
+        }
+        // Typed again before focus had time to land in the dropdown.
+        if (this.pendingTypeaheadIndex !== undefined) {
+            return this.pendingTypeaheadIndex;
+        }
+        // Falls back to the selected option, so that typing continues from
+        // wherever the highlight already is. `findIndex` returning `-1` for a
+        // select without a value is exactly the "no current row" that
+        // `findTypeaheadMatch` expects.
+        return items.findIndex((item) => !('separator' in item) && item.selected);
+    }
+    focusTypeaheadMatch(index) {
+        // Overwrites any index still pending from an earlier character, even
+        // when this one can be focused right away. Opening the dropdown queues
+        // a `setMenuFocus` that waits for it to become visible, and someone
+        // typing quickly gets the next character in before that resolves;
+        // leaving the earlier index in place would let the queued focus apply
+        // it on top of this newer match.
+        this.pendingTypeaheadIndex = index;
+        if (this.menuOpen && this.focusMenuItemAtIndex(this.list, index)) {
+            // Focus landed synchronously, so this index has already done its
+            // job. Clearing it — rather than leaving it for `setMenuFocus` to
+            // consume later — stops it from being replayed by some unrelated
+            // future re-render, such as picking an option in a `multiple`
+            // select, after the user has since moved focus elsewhere with the
+            // arrow keys. A `setMenuFocus` still queued from opening the
+            // dropdown a moment ago is unaffected: it finds this row already
+            // focused and leaves it alone, below.
+            this.pendingTypeaheadIndex = undefined;
+            return;
+        }
+        if (this.menuOpen) {
+            // Already open, so no re-render is coming that would trigger
+            // `componentDidUpdate`. Schedule the focus explicitly.
+            this.setMenuFocus();
+        }
+        else {
+            this.openMenu();
         }
     }
+    /**
+     * @returns the index of the focused row of the dropdown, or
+     * `NO_TYPEAHEAD_MATCH` when no row has focus
+     */
+    getFocusedMenuItemIndex() {
+        var _a, _b, _c;
+        // Deliberately not `event.target`: a listener on the `limel-list`
+        // element sees events from inside its shadow root retargeted to the
+        // element itself, never to the row that was actually focused.
+        const focused = (_b = (_a = this.list) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
+        const row = focused === null || focused === void 0 ? void 0 : focused.closest('[data-index]');
+        const index = Number.parseInt((_c = row === null || row === void 0 ? void 0 : row.dataset.index) !== null && _c !== void 0 ? _c : '', 10);
+        return Number.isNaN(index) ? NO_TYPEAHEAD_MATCH : index;
+    }
+    resetTypeahead() {
+        this.typeaheadBuffer.clear();
+        this.pendingTypeaheadIndex = undefined;
+    }
     handleNativeChange(event) {
         event.stopPropagation();
         const element = this.host.shadowRoot.querySelector('select.limel-select__native-control');
@@ -543,6 +740,12 @@ export class Select {
             }, {
                 "propName": "options",
                 "methodName": "updateHasPrimaryComponent"
+            }, {
+                "propName": "options",
+                "methodName": "resetTypeaheadOnItemsChange"
+            }, {
+                "propName": "required",
+                "methodName": "resetTypeaheadOnItemsChange"
             }, {
                 "propName": "menuOpen",
                 "methodName": "watchOpen"

package/dist/collection/components/select/select.template.js

@@ -52,7 +52,7 @@ const SelectValue = (props) => {
         'limel-select-trigger': true,
         'limel-select--focused': props.isOpen,
     };
-    return (h("button", { slot: "content", class: anchorClassList, onClick: props.open, onKeyPress: props.onTriggerPress, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+    return (h("button", { slot: "content", class: anchorClassList, onClick: props.open, onKeyDown: props.onTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
     if (props.isValid) {
@@ -80,7 +80,7 @@ const MenuDropdown = (props) => {
             display: 'flex',
             'min-width': '100%',
             width: 'fit-content',
-        } }, h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
+        } }, h("limel-list", { ref: props.listRef, items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
 };
 const NativeDropdown = (props) => {
     const options = props.options
@@ -103,7 +103,21 @@ function isSelected(option, value) {
     }
     return option.value === value.value;
 }
-function createMenuItems(options, value, selectIsRequired = false) {
+/**
+ * Create the items for the dropdown.
+ *
+ * The returned array is index-aligned with the `data-index` attribute that
+ * `limel-list` renders on each row. Separators are included, and occupy an
+ * index. Anything that needs to address a row by index — such as the
+ * typeahead in `select.tsx` — must derive its indices from this same array.
+ *
+ * @param options - the options of the select
+ * @param value - the currently selected option or options
+ * @param selectIsRequired - whether the select requires a value, in which
+ * case the "empty" option is left out
+ * @returns the items to render in the dropdown
+ */
+export function createMenuItems(options, value, selectIsRequired = false) {
     const menuOptionFilter = getMenuOptionFilter(selectIsRequired);
     return options.filter(menuOptionFilter).map((option) => {
         if ('separator' in option) {

package/dist/collection/components/text-editor/prosemirror-adapter/editor-config.js

@@ -11,6 +11,7 @@ import { createImageInserterPlugin } from "./plugins/image/inserter";
 import { createImageViewPlugin } from "./plugins/image/view";
 import { createMenuStateTrackingPlugin } from "./plugins/menu-state-tracking-plugin";
 import { createActionBarInteractionPlugin } from "./plugins/menu-action-interaction-plugin";
+import { createListKeyHandlerPlugin } from "./plugins/list-key-handler";
 import { createTriggerPlugin } from "./plugins/trigger/factory";
 import { getTableNodes, getTableEditingPlugins } from "./plugins/table-plugin";
 import { getImageNode } from "./plugins/image/node";
@@ -62,7 +63,16 @@ export function buildEditorSchema(options) {
 export function buildEditorPlugins(options) {
     const { schema, menuCommandFactory, contentConverter, language, contentType, triggerCharacters, inlineImages, onNewLinkSelection, onImagePasted, onActiveItemsChange, } = options;
     return [
-        ...exampleSetup({ schema: schema, menuBar: false }),
+        // exampleSetup binds Shift-Ctrl-8/9 to a plain wrapInList. On
+        // Windows/Linux those are the same physical keys as our
+        // Mod-Shift-8/7 list commands, and exampleSetup's keymap runs
+        // first, so its bindings are suppressed to let the context-aware
+        // list commands own the shortcuts on every platform.
+        ...exampleSetup({
+            schema: schema,
+            menuBar: false,
+            mapKeys: { 'Shift-Ctrl-8': false, 'Shift-Ctrl-9': false },
+        }),
         keymap(menuCommandFactory.buildKeymap()),
         createTriggerPlugin(triggerCharacters, contentConverter),
         createLinkPlugin(onNewLinkSelection),
@@ -70,6 +80,7 @@ export function buildEditorPlugins(options) {
         createImageViewPlugin(language),
         createMenuStateTrackingPlugin(editorMenuTypesArray, menuCommandFactory, onActiveItemsChange),
         createActionBarInteractionPlugin(menuCommandFactory),
+        createListKeyHandlerPlugin(schema),
         ...getTableEditingPlugins(contentType === 'html'),
     ];
 }

package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-command-utils/active-state-utils.js

@@ -0,0 +1,36 @@
+import { LevelMapping } from "../types";
+export const setActiveMethodForMark = (command, markType) => {
+    command.active = (state) => {
+        const { from, $from, to, empty } = state.selection;
+        if (empty) {
+            return !!markType.isInSet(state.storedMarks || $from.marks());
+        }
+        return state.doc.rangeHasMark(from, to, markType);
+    };
+};
+export const setActiveMethodForNode = (command, nodeType, level) => {
+    command.active = (state) => {
+        const { $from } = state.selection;
+        const node = $from.node($from.depth);
+        if (node && node.type.name === nodeType.name) {
+            if (nodeType.name === LevelMapping.Heading && level) {
+                return node.attrs.level === level;
+            }
+            return true;
+        }
+        return false;
+    };
+};
+export const setActiveMethodForWrap = (command, nodeType) => {
+    command.active = (state) => {
+        const { from, to } = state.selection;
+        let found = false;
+        state.doc.nodesBetween(from, to, (node) => {
+            if (node.type === nodeType) {
+                found = true;
+            }
+            return !found;
+        });
+        return found;
+    };
+};