@sveltia/ui 0.15.6 → 0.15.8

package/package/components/text-editor/core.js

@@ -11,6 +11,7 @@ import {
   INSERT_UNORDERED_LIST_COMMAND,
   ListItemNode,
   ListNode,
+  $handleListInsertParagraph as handleListInsertParagraph,
   insertList,
   $isListItemNode as isListItemNode,
   $isListNode as isListNode,
@@ -32,6 +33,9 @@ import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
 import {
   COMMAND_PRIORITY_NORMAL,
   ElementNode,
+  INDENT_CONTENT_COMMAND,
+  INSERT_PARAGRAPH_COMMAND,
+  OUTDENT_CONTENT_COMMAND,
   createEditor,
   $getSelection as getSelection,
   $isRangeSelection as isRangeSelection,
@@ -64,6 +68,11 @@ const editorConfig = {
        */
       italic: 'italic',
     },
+    list: {
+      nested: {
+        listitem: 'nested',
+      },
+    },
   },
 };
 
@@ -176,6 +185,13 @@ export const initEditor = () => {
     COMMAND_PRIORITY_NORMAL,
   );
 
+  // https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/shared/useList.ts
+  editor.registerCommand(
+    INSERT_PARAGRAPH_COMMAND,
+    () => handleListInsertParagraph(),
+    COMMAND_PRIORITY_NORMAL,
+  );
+
   editor.registerUpdateListener(({ editorState }) => {
     if (editor?.isComposing()) {
       return;
@@ -186,6 +202,39 @@ export const initEditor = () => {
     });
   });
 
+  // `editor.registerCommand(KEY_TAB_COMMAND, listener, priority)` doesn’t work for some reason, so
+  // use another method
+  editor.registerRootListener((root) => {
+    if (root) {
+      root.addEventListener('keydown', (event) => {
+        editor.update(() => {
+          if (event.key === 'Tab') {
+            const selection = getSelection();
+
+            if (!isRangeSelection(selection)) {
+              return;
+            }
+
+            const anchor = selection.anchor.getNode();
+
+            const parent =
+              anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
+
+            if (isListItemNode(parent) && parent.canIndent()) {
+              if (!event.shiftKey) {
+                event.preventDefault();
+                editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+              } else if (parent.getIndent() > 0) {
+                event.preventDefault();
+                editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+              }
+            }
+          }
+        });
+      });
+    }
+  });
+
   return editor;
 };
 

package/package/components/text-editor/lexical-root.svelte

@@ -133,6 +133,9 @@
 .lexical-root :global(strong.italic) {
   font-style: italic;
 }
+.lexical-root :global(li.nested) {
+  list-style-type: none;
+}
 .lexical-root :global([data-lexical-text="true"]) {
   cursor: text;
 }</style>

package/package/components/text-editor/text-editor.svelte

@@ -95,11 +95,11 @@
    * Update {@link inputValue} based on {@link value}.
    */
   const setInputValue = () => {
-    const newValue = value ?? '';
+    const newValue = value;
 
     // Avoid a cycle dependency & infinite loop
     if (inputValue !== newValue) {
-      inputValue = newValue;
+      inputValue = newValue ?? '';
 
       if ($useRichText) {
         convertMarkdown();

package/package/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -66,6 +66,11 @@
         setBlocksType(getSelection(), () => createQuoteNode());
       });
     }
+
+    // Move focus back to the editor
+    window.setTimeout(() => {
+      $editor.focus();
+    }, 500);
   };
 </script>
 

package/package/services/group.js

@@ -99,13 +99,17 @@ class Group {
    * Activate the members.
    */
   activate() {
-    const { parent, allMembers, selected: defaultSelected } = this;
+    const { parent, role, allMembers, selected: defaultSelected } = this;
+    const multi = this.multi || role === 'menu' || role === 'menubar';
 
     allMembers.forEach((element, index) => {
       // Select the first one if no member has the `selected` attribute
-      const isSelected = defaultSelected
-        ? element === defaultSelected
-        : this.selectFirst && index === 0;
+      // eslint-disable-next-line no-nested-ternary
+      const isSelected = multi
+        ? element.getAttribute(this.childSelectedAttr) === 'true'
+        : defaultSelected
+          ? element === defaultSelected
+          : this.selectFirst && index === 0;
 
       const controlTarget = /** @type {HTMLElement | null} */ (
         document.querySelector(`#${element.getAttribute('aria-controls')}`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.15.6",
+  "version": "0.15.8",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,18 +23,18 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.15.0",
-    "@lexical/history": "^0.15.0",
-    "@lexical/link": "^0.15.0",
-    "@lexical/list": "^0.15.0",
-    "@lexical/markdown": "^0.15.0",
-    "@lexical/rich-text": "^0.15.0",
-    "@lexical/selection": "^0.15.0",
-    "@lexical/table": "^0.15.0",
-    "@lexical/utils": "^0.15.0",
-    "@sveltia/utils": "^0.3.0",
-    "lexical": "^0.15.0",
-    "svelte": "^4.2.17"
+    "@lexical/code": "^0.16.0",
+    "@lexical/history": "^0.16.0",
+    "@lexical/link": "^0.16.0",
+    "@lexical/list": "^0.16.0",
+    "@lexical/markdown": "^0.16.0",
+    "@lexical/rich-text": "^0.16.0",
+    "@lexical/selection": "^0.16.0",
+    "@lexical/table": "^0.16.0",
+    "@lexical/utils": "^0.16.0",
+    "@sveltia/utils": "^0.4.0",
+    "lexical": "^0.16.0",
+    "svelte": "^4.2.18"
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
@@ -42,27 +42,27 @@
     "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "cspell": "^8.8.3",
+    "cspell": "^8.8.4",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.7",
-    "eslint-plugin-svelte": "^2.39.0",
+    "eslint-plugin-jsdoc": "^48.2.9",
+    "eslint-plugin-svelte": "^2.39.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-html": "^1.7.0",
-    "prettier": "^3.3.0",
-    "prettier-plugin-svelte": "^3.2.3",
+    "prettier": "^3.3.1",
+    "prettier-plugin-svelte": "^3.2.4",
     "sass": "^1.77.4",
     "stylelint": "^16.6.1",
     "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-scss": "^6.3.0",
+    "stylelint-scss": "^6.3.1",
     "svelte-check": "^3.8.0",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.4",
-    "tslib": "^2.6.2",
-    "vite": "^5.2.12",
+    "tslib": "^2.6.3",
+    "vite": "^5.2.13",
     "vitest": "^1.6.0"
   },
   "exports": {