@sveltia/ui 0.78.0 → 0.78.2

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

@@ -876,20 +876,28 @@ export const convertMarkdownToLexical = async (editor, value, enabledTransformer
   // Pad blank blockquote lines so they are not imported as literal `>` text
   value = padBlankBlockquoteLines(value);
 
-  return new Promise((resolve, reject) => {
-    editor.update(
-      () => {
-        try {
-          convertFromMarkdownString(value, enabledTransformers);
-          resolve(exportMarkdown(enabledTransformers));
-        } catch (ex) {
-          reject(new Error('Failed to convert Markdown', { cause: ex }));
-        }
-      },
-      // Tell the import from a change made by the user
-      { tag: IMPORT_UPDATE_TAG },
-    );
-  });
+  /** @type {unknown} */
+  let error;
+
+  editor.update(
+    () => {
+      try {
+        convertFromMarkdownString(value, enabledTransformers);
+      } catch (ex) {
+        error = ex;
+      }
+    },
+    // 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 },
+  );
+
+  if (error) {
+    throw new Error('Failed to convert Markdown', { cause: error });
+  }
+
+  return editor.read(() => exportMarkdown(enabledTransformers));
 };
 
 /**

package/dist/components/text-editor/lexical-root.svelte

@@ -92,12 +92,13 @@
       return;
     }
 
-    const { value: newValue, selection } = /** @type {CustomEvent} */ (event).detail;
+    const { value: exportedValue, selection } = /** @type {CustomEvent} */ (event).detail;
+    // Keep the value as given when the content is the one last imported, which the editor only
+    // writes in its own Markdown style, e.g. `_text_` for `*text*`: that’s not a change, whether
+    // the content is untouched or the user has undone their changes to it
+    const newValue = editorStore.getImportedValue(exportedValue) ?? exportedValue;
 
-    // Keep the value as given when the editor has only rewritten it in its own Markdown style, e.g.
-    // `_text_` for `*text*`: that’s not a change, and the value would otherwise change as soon as
-    // it’s set
-    if (inputValue !== newValue && !editorStore.isRestyledImport(newValue)) {
+    if (inputValue !== newValue) {
       // Temporarily disable rich text to prevent unnecessary Markdown conversion that resets
       // Lexical nodes and selection, then restore the state
       editorStore.useRichText = false;

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.78.0";
+export const UI_VERSION: "0.78.2";

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.78.0';
+export const UI_VERSION = '0.78.2';

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

@@ -179,13 +179,12 @@ export const createEditorStore = () => {
     editorId,
     convertMarkdown,
     /**
-     * Check if the given value, exported by the editor, is only the value last imported, written in
-     * the editor’s own Markdown style.
+     * 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.
      * @param {string} value Exported value.
-     * @returns {boolean} Result.
+     * @returns {string | undefined} Imported value, or `undefined` if the content has changed.
      */
-    isRestyledImport: (value) =>
-      !!lastImport && lastImport.source === inputValue && lastImport.exported === value,
+    getImportedValue: (value) => (lastImport?.exported === value ? lastImport.source : undefined),
     /* eslint-enable jsdoc/require-jsdoc */
   };
 };

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

@@ -236,6 +236,12 @@
     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/util/popup.svelte

@@ -4,7 +4,7 @@
 -->
 <script>
   import { sleep } from '@sveltia/utils/misc';
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import { activatePopup } from '../../services/popup.svelte.js';
   import Modal from './modal.svelte';
 
@@ -81,6 +81,41 @@
   let popupInstance = $state();
   let hoveredTimeout = 0;
 
+  /**
+   * Move the focus into the content. A composite widget keeps exactly one of its items in the tab
+   * order and takes its own root out of it, so the item is what should receive focus. Falling back
+   * to any focusable element covers the popups that hold plain content.
+   * @param {object} [options] Options.
+   * @param {boolean} [options.tabStopOnly] Whether to only focus an element in the tab order,
+   * without falling back to any other element.
+   * @returns {boolean} Whether an element has taken the focus.
+   */
+  const focusContent = ({ tabStopOnly = false } = {}) => {
+    /* v8 ignore next 3 -- the callers check the content first */
+    if (!content) {
+      return false;
+    }
+
+    const candidates = /** @type {HTMLElement[]} */ ([
+      ...content.querySelectorAll('[tabindex="0"]:not([aria-disabled="true"])'),
+      ...(tabStopOnly ? [] : content.querySelectorAll('[tabindex]:not([aria-disabled="true"])')),
+    ]);
+
+    // Skip an element that can’t take the focus, e.g. a hidden one
+    const focused = candidates.some((element) => {
+      element.focus();
+
+      return document.activeElement === element;
+    });
+
+    if (!focused && !tabStopOnly) {
+      content.tabIndex = -1;
+      content.focus();
+    }
+
+    return focused;
+  };
+
   // Keep the `open` prop and the instance in sync both ways. The instance opens the popup when
   // the anchor is activated, and closes it when the backdrop or an item is clicked, or Escape is
   // pressed; the prop is what a consumer such as `<Combobox>` or `<MenuItem>` toggles from its own
@@ -198,25 +233,22 @@
     onOpen={async (event) => {
       onOpen?.(event);
 
-      await sleep(100);
+      // Move the focus into the content as soon as it’s rendered, if it holds a control that’s
+      // already in the tab order, like the search box of a dropdown list: a key typed right after
+      // the popup opens would otherwise be lost
+      await tick();
 
-      if (!content) {
+      if (!content || focusContent({ tabStopOnly: true })) {
         return;
       }
 
-      // A composite widget keeps exactly one of its items in the tab order and takes its own root
-      // out of it, so the item is what should receive focus. Falling back to any focusable element
-      // covers the popups that hold plain content.
-      const target = /** @type {HTMLElement} */ (
-        content.querySelector('[tabindex="0"]:not([aria-disabled="true"])') ??
-          content.querySelector('[tabindex]:not([aria-disabled="true"])')
-      );
+      // Otherwise wait for a composite widget, such as a menu, to put one of its items in the tab
+      // order, which it does a moment later
+      await sleep(100);
 
-      if (target) {
-        target.focus();
-      } else {
-        content.tabIndex = -1;
-        content.focus();
+      // Leave the focus alone if the user has already moved it within the content
+      if (content && !content.contains(document.activeElement)) {
+        focusContent();
       }
     }}
   >

package/dist/typedefs.d.ts

@@ -1046,11 +1046,11 @@ export type TextEditorStore = {
      */
     convertMarkdown: () => Promise<void>;
     /**
-     * Function to check if the given value,
-     * exported by the editor, is only the {@link TextEditorStore.inputValue} last imported, written in
-     * the editor’s own Markdown style, e.g. `_text_` for `*text*`, rather than a change.
+     * 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*`.
      */
-    isRestyledImport: (value: string) => boolean;
+    getImportedValue: (value: string) => string | undefined;
 };
 export type SelectedItemDetail = {
     /**

package/dist/typedefs.js

@@ -445,9 +445,9 @@
  * @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}.
  * @property {() => Promise<void>} convertMarkdown Function to trigger the Lexical converter.
- * @property {(value: string) => boolean} isRestyledImport Function to check if the given value,
- * exported by the editor, is only the {@link TextEditorStore.inputValue} last imported, written in
- * the editor’s own Markdown style, e.g. `_text_` for `*text*`, rather than a change.
+ * @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.78.0",
+  "version": "0.78.2",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",