@sveltia/ui 0.79.2 → 0.79.4

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.4";

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.4';

package/dist/components/text-editor/store.svelte.js

@@ -45,6 +45,11 @@ export const createEditorStore = () => {
   let showConverterError = $state(false);
   /** @type {boolean} */
   let pending = $state(false);
+  /**
+   * Number of editor operations started by the user that have yet to update the editor.
+   * @type {number}
+   */
+  let runningOperations = $state(0);
   /**
    * Value last imported to the Lexical editor, and the Markdown the editor exports for it.
    * @type {{ source: string, exported: string } | undefined}
@@ -195,7 +200,7 @@ export const createEditorStore = () => {
       showConverterError = newValue;
     },
     get pending() {
-      return pending;
+      return pending || runningOperations > 0;
     },
     set pending(newValue) {
       pending = newValue;
@@ -205,6 +210,27 @@ export const createEditorStore = () => {
     },
     editorId,
     convertMarkdown,
+    /**
+     * Mark an operation the user started as running, which makes the content count as
+     * {@link TextEditorStore.pending} until it’s done. Use it for an operation that only reaches
+     * the editor after an `await`, such as a language change waiting for the highlighter to load:
+     * the flag the editor sets for itself is cleared by every update it makes in the meantime,
+     * including the one the focus move fires, so it can’t cover the wait.
+     * @returns {() => void} Function to call once the operation has updated the editor. Calling it
+     * more than once has no further effect.
+     */
+    startOperation: () => {
+      runningOperations += 1;
+
+      let done = false;
+
+      return () => {
+        if (!done) {
+          done = true;
+          runningOperations -= 1;
+        }
+      };
+    },
     /**
      * Get the value last imported if the given value, exported by the editor, is only that value
      * written in the editor’s own Markdown style.

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';
 
@@ -65,6 +66,46 @@
     return isCodeNode(node) ? node : null;
   };
 
+  /**
+   * Give the code block the given language, once the highlighter for it has loaded.
+   * @param {string} lang Language ID.
+   */
+  const changeLanguage = async (lang) => {
+    const { editor } = editorStore;
+
+    if (!editor || selectedKey === lang) {
+      return;
+    }
+
+    // The change only reaches the editor, and anything bound to it, once the highlighter has
+    // loaded, so report the content as pending until then: the flag the editor sets for itself is
+    // cleared by the update the focus move below fires
+    const endOperation = editorStore.startOperation();
+
+    try {
+      await focusEditor(editor);
+      await loadCodeHighlighter(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) },
+      );
+    } finally {
+      // The editor has flagged the export that follows as pending by now, so the hand-off leaves
+      // no gap
+      endOperation();
+    }
+  };
+
   $effect(() => {
     void editorStore.selection.blockNodeKey;
 
@@ -85,23 +126,8 @@
   {disabled}
   ariaLabel={_('_sui.text_editor.language')}
   value={selectedKey}
-  onChange={async ({ detail: { value: lang } }) => {
-    if (!editorStore.editor || selectedKey === lang) {
-      return;
-    }
-
-    await focusEditor(editorStore.editor);
-    await loadCodeHighlighter(lang);
-
-    editorStore.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;
-      }
-    });
+  onChange={({ detail: { value: lang } }) => {
+    changeLanguage(lang);
   }}
 >
   <Option label={_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />

package/dist/typedefs.d.ts

@@ -1045,7 +1045,8 @@ export type TextEditorStore = {
     showConverterError: boolean;
     /**
      * Whether the user has changed the rich text content, and the editor
-     * has yet to convert it to Markdown and update {@link TextEditorStore.inputValue}.
+     * has yet to convert it to Markdown and update {@link TextEditorStore.inputValue}. It’s also set
+     * while an operation started with {@link TextEditorStore.startOperation} is running.
      */
     pending: boolean;
     /**
@@ -1057,6 +1058,12 @@ export type TextEditorStore = {
      * Function to trigger the Lexical converter.
      */
     convertMarkdown: () => Promise<void>;
+    /**
+     * Function marking an operation the user started, which
+     * only updates the editor after an `await`, as running. It returns a function to call once the
+     * operation is done. The content counts as {@link TextEditorStore.pending} meanwhile.
+     */
+    startOperation: () => () => void;
     /**
      * Function to get the
      * {@link TextEditorStore.inputValue} last imported if the given value, exported by the editor, is

package/dist/typedefs.js

@@ -447,10 +447,14 @@
  * Lexical nodes.
  * @property {boolean} showConverterError Whether to show a converter error in the UI.
  * @property {boolean} pending Whether the user has changed the rich text content, and the editor
- * has yet to convert it to Markdown and update {@link TextEditorStore.inputValue}.
+ * has yet to convert it to Markdown and update {@link TextEditorStore.inputValue}. It’s also set
+ * while an operation started with {@link TextEditorStore.startOperation} is running.
  * @property {boolean} importing Whether the latest {@link TextEditorStore.inputValue} is still
  * being imported to the Lexical editor.
  * @property {() => Promise<void>} convertMarkdown Function to trigger the Lexical converter.
+ * @property {() => () => void} startOperation Function marking an operation the user started, which
+ * only updates the editor after an `await`, as running. It returns a function to call once the
+ * operation is done. The content counts as {@link TextEditorStore.pending} meanwhile.
  * @property {(value: string) => string | undefined} getImportedValue Function to get the
  * {@link TextEditorStore.inputValue} last imported if the given value, exported by the editor, is
  * only that value written in the editor’s own Markdown style, e.g. `_text_` for `*text*`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.79.2",
+  "version": "0.79.4",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -85,9 +85,9 @@
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.13.0",
     "happy-dom": "^20.14.5",
-    "oxlint": "^1.86.0",
+    "oxlint": "^1.87.0",
     "playwright": "^1.63.0",
-    "postcss": "^8.5.28",
+    "postcss": "^8.5.29",
     "postcss-html": "^2.0.0",
     "prettier": "^3.9.9",
     "prettier-plugin-svelte": "^4.1.1",