@sveltia/ui 0.79.2 → 0.79.3

package/dist/components/text-editor/background-update.d.ts

@@ -0,0 +1,3 @@
+export function getBackgroundUpdateTags(editor: LexicalEditor, tags?: UpdateTag[]): UpdateTag[];
+import type { LexicalEditor } from 'lexical';
+import type { UpdateTag } from 'lexical';

package/dist/components/text-editor/background-update.js

@@ -0,0 +1,18 @@
+import { SKIP_DOM_SELECTION_TAG } from 'lexical';
+
+/**
+ * @import { LexicalEditor, UpdateTag } from 'lexical';
+ */
+
+/**
+ * Get the tags of an editor update the user didn’t make, such as one that highlights the code once
+ * a grammar has loaded. While the focus is elsewhere, the update leaves the DOM selection alone,
+ * which would otherwise move the focus back to the editor, taking over what the user types next.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {UpdateTag[]} [tags] Other tags of the update.
+ * @returns {UpdateTag[]} Tags.
+ */
+export const getBackgroundUpdateTags = (editor, tags = []) =>
+  editor.getRootElement()?.contains(document.activeElement)
+    ? tags
+    : [...tags, SKIP_DOM_SELECTION_TAG];

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

@@ -20,6 +20,9 @@
    * @typedef {object} Props
    * @property {string} [code] Input value.
    * @property {string} [lang] Selected language.
+   * @property {boolean} [pending] Whether the user has changed the code, and the editor has yet to
+   * update {@link code}, which it does a moment later. Bind it to wait for the change before
+   * reading the code, for example to save it. Read-only.
    * @property {boolean} [showLanguageSwitcher] Whether to show the language selector.
    * @property {boolean} [flex] Make the text input container flexible.
    * @property {string} [class] The `class` attribute on the wrapper element.
@@ -47,6 +50,7 @@
     /* eslint-disable prefer-const */
     code = $bindable(''),
     lang = $bindable('plain'),
+    pending = $bindable(false),
     showLanguageSwitcher = false,
     flex = false,
     hidden = false,
@@ -86,6 +90,16 @@
 
   setContext('editorStore', editorStore);
 
+  $effect(() => {
+    pending = editorStore.pending;
+  });
+
+  // An editor removed right after a change never converts it, so don’t leave a bound `pending` set
+  // for good, which would hold up anything waiting for the change
+  $effect(() => () => {
+    pending = false;
+  });
+
   $effect(() => {
     // The root initializes the editor before these effects first run, and stays initialized
     /* v8 ignore next */

package/dist/components/text-editor/code-editor.svelte.d.ts

@@ -13,6 +13,12 @@ declare const CodeEditor: import("svelte").Component<{
      * Selected language.
      */
     lang?: string | undefined;
+    /**
+     * Whether the user has changed the code, and the editor has yet to
+     * update {@link code}, which it does a moment later. Bind it to wait for the change before
+     * reading the code, for example to save it. Read-only.
+     */
+    pending?: boolean | undefined;
     /**
      * Whether to show the language selector.
      */
@@ -67,7 +73,7 @@ declare const CodeEditor: import("svelte").Component<{
      * Primary slot content.
      */
     children?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "code" | "lang">;
+} & Record<string, any>, {}, "code" | "lang" | "pending">;
 type Props = {
     /**
      * Input value.
@@ -77,6 +83,12 @@ type Props = {
      * Selected language.
      */
     lang?: string | undefined;
+    /**
+     * Whether the user has changed the code, and the editor has yet to
+     * update {@link code}, which it does a moment later. Bind it to wait for the change before
+     * reading the code, for example to save it. Read-only.
+     */
+    pending?: boolean | undefined;
     /**
      * Whether to show the language selector.
      */

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

@@ -50,6 +50,7 @@ import {
   $getNearestNodeFromDOMNode as getNearestNodeFromDOMNode,
   $getRoot as getRoot,
   $getSelection as getSelection,
+  HISTORY_MERGE_TAG,
   INDENT_CONTENT_COMMAND,
   INSERT_PARAGRAPH_COMMAND,
   KEY_ENTER_COMMAND,
@@ -1033,6 +1034,10 @@ export const convertMarkdownToLexical = async (editor, value, enabledTransformer
   // Pad blank blockquote lines so they are not imported as literal `>` text
   value = padBlankBlockquoteLines(value);
 
+  // Lexical commits an empty state when the root element is attached, and the history keeps it as
+  // the current entry. An empty state can’t be restored, so undoing to it throws an error. Merge
+  // the first import into that entry instead of pushing it onto the undo stack
+  const isEmpty = editor.getEditorState().isEmpty();
   /** @type {unknown} */
   let error;
 
@@ -1047,7 +1052,7 @@ export const convertMarkdownToLexical = async (editor, value, enabledTransformer
     // Tell the import from a change made by the user, and commit it right away, so the node
     // transforms, e.g. the one giving a code block its default language, have run by the time the
     // content is exported below
-    { tag: IMPORT_UPDATE_TAG, discrete: true },
+    { tag: isEmpty ? [IMPORT_UPDATE_TAG, HISTORY_MERGE_TAG] : IMPORT_UPDATE_TAG, discrete: true },
   );
 
   if (error) {

package/dist/components/text-editor/shiki/facade.js

@@ -21,6 +21,7 @@ import {
   HISTORY_MERGE_TAG,
   tokenizeRawText,
 } from 'lexical';
+import { getBackgroundUpdateTags } from '../background-update.js';
 import { cachePayload, getCachedPayload } from './cache.js';
 import { LANGUAGES, THEMES } from './generated.js';
 import { getCodeHighlighterLoaders } from './loader.js';
@@ -123,7 +124,7 @@ const refreshCodeNode = (editor, codeNodeKey) => {
 
       codeNode.markDirty();
     },
-    { tag: HISTORY_MERGE_TAG },
+    { tag: getBackgroundUpdateTags(editor, [HISTORY_MERGE_TAG]) },
   );
 };
 

package/dist/components/text-editor/shiki/highlighter.js

@@ -33,6 +33,7 @@ import {
   HISTORY_MERGE_TAG,
   TextNode,
 } from 'lexical';
+import { getBackgroundUpdateTags } from '../background-update.js';
 import {
   getHighlightNodes,
   isCodeLanguageLoaded,
@@ -368,7 +369,7 @@ const codeNodeTransform = (editor, tokenizer, transformState, node) => {
               staleNode.markDirty();
             }
           },
-          { tag: HISTORY_MERGE_TAG },
+          { tag: getBackgroundUpdateTags(editor, [HISTORY_MERGE_TAG]) },
         );
       });
     }

package/dist/components/text-editor/shiki/theme.js

@@ -1,5 +1,6 @@
 import { $isCodeNode as isCodeNode } from '@lexical/code-core';
 import { $getRoot as getRoot, HISTORY_MERGE_TAG } from 'lexical';
+import { getBackgroundUpdateTags } from '../background-update.js';
 
 /**
  * @import { LexicalEditor } from 'lexical';
@@ -85,6 +86,6 @@ export const observeCodeTheme = (editor) =>
             }
           });
       },
-      { tag: HISTORY_MERGE_TAG },
+      { tag: getBackgroundUpdateTags(editor, [HISTORY_MERGE_TAG]) },
     );
   });

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.79.2";
+export const UI_VERSION: "0.79.3";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.79.2';
+export const UI_VERSION = '0.79.3';

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -5,6 +5,7 @@
   import { getContext } from 'svelte';
   import Option from '../../listbox/option.svelte';
   import Select from '../../select/select.svelte';
+  import { getBackgroundUpdateTags } from '../background-update.js';
   import { focusEditor, loadCodeHighlighter } from '../core.js';
   import { LANGUAGES } from '../shiki/generated.js';
 
@@ -90,18 +91,24 @@
       return;
     }
 
-    await focusEditor(editorStore.editor);
-    await loadCodeHighlighter(lang);
+    const { editor } = editorStore;
 
-    editorStore.editor.update(() => {
-      // https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L713
-      const node = getCodeNode();
+    await focusEditor(editor);
+    await loadCodeHighlighter(lang);
 
-      if (node) {
-        node.setLanguage(lang);
-        selectedLanguage = lang;
-      }
-    });
+    // The user may have moved on to another field while the highlighter was loading
+    editor.update(
+      () => {
+        // https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L713
+        const node = getCodeNode();
+
+        if (node) {
+          node.setLanguage(lang);
+          selectedLanguage = lang;
+        }
+      },
+      { tag: getBackgroundUpdateTags(editor) },
+    );
   }}
 >
   <Option label={_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.79.2",
+  "version": "0.79.3",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",