@sveltia/ui 0.15.7 → 0.15.9

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/insert-link-button.svelte

@@ -155,7 +155,7 @@
           onButtonClick();
         }
 
-        return true;
+        return false;
       },
       COMMAND_PRIORITY_NORMAL,
     );

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.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.15.7",
+  "version": "0.15.9",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -33,36 +33,39 @@
     "@lexical/table": "^0.16.0",
     "@lexical/utils": "^0.16.0",
     "@sveltia/utils": "^0.4.0",
-    "lexical": "^0.16.0",
-    "svelte": "^4.2.18"
+    "lexical": "^0.16.0"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
-    "@sveltejs/adapter-auto": "^3.2.1",
-    "@sveltejs/kit": "^2.5.10",
-    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/kit": "^2.5.16",
+    "@sveltejs/package": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "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.9",
-    "eslint-plugin-svelte": "^2.39.2",
+    "eslint-plugin-jsdoc": "^48.2.12",
+    "eslint-plugin-svelte": "^2.39.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-html": "^1.7.0",
-    "prettier": "^3.3.1",
+    "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.4",
-    "sass": "^1.77.4",
+    "sass": "^1.77.5",
     "stylelint": "^16.6.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.3.1",
+    "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
     "svelte-i18n": "^4.0.0",
-    "svelte-preprocess": "^5.1.4",
+    "svelte-preprocess": "^6.0.1",
     "tslib": "^2.6.3",
-    "vite": "^5.2.13",
+    "vite": "^5.3.1",
     "vitest": "^1.6.0"
   },
   "exports": {