Fix some text editor issues

sveltia/sveltia-cms#164
sveltia · Jun 13, 2024 · 276fa21 · 276fa21
1 parent e5262ca
commit 276fa21
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 2 deletions.
diff --git a/src/lib/components/text-editor/core.js b/src/lib/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;
 };
 

diff --git a/src/lib/components/text-editor/lexical-root.svelte b/src/lib/components/text-editor/lexical-root.svelte
@@ -139,6 +139,10 @@
       font-style: italic;
     }
 
+    :global(li.nested) {
+      list-style-type: none;
+    }
+
     :global([data-lexical-text='true']) {
       cursor: text;
     }

diff --git a/src/lib/components/text-editor/text-editor.svelte b/src/lib/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();

diff --git a/src/lib/components/text-editor/toolbar/toggle-block-menu-item.svelte b/src/lib/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>