@sveltia/ui 0.79.3 → 0.79.4

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.3";
+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.3';
+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

@@ -66,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;
 
@@ -86,29 +126,8 @@
   {disabled}
   ariaLabel={_('_sui.text_editor.language')}
   value={selectedKey}
-  onChange={async ({ detail: { value: lang } }) => {
-    if (!editorStore.editor || selectedKey === lang) {
-      return;
-    }
-
-    const { editor } = editorStore;
-
-    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) },
-    );
+  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.3",
+  "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",