@sveltia/ui 0.77.2 → 0.78.0

package/dist/services/group.svelte.js

@@ -199,7 +199,7 @@ export class Group {
   activated = false;
 
   /**
-   * Whether {@link destroy} has run, so a pending {@link activate} must not attach the listeners.
+   * Whether {@link destroy} has run, so a pending {@link activate} must not run.
    * @type {boolean}
    */
   #destroyed = false;
@@ -284,12 +284,14 @@ export class Group {
     // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: MouseEvent) => void} */
     this._onClick = (event) => {
+      this.activate();
       this.onClick(event);
     };
 
     // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: KeyboardEvent) => void} */
     this._onKeyDown = (event) => {
+      this.activate();
       this.onKeyDown(event);
     };
 
@@ -352,12 +354,16 @@ export class Group {
       attributeFilter: ['aria-disabled', 'aria-hidden'],
     });
 
+    // Listen right away: a click or a key press that comes before the activation below activates
+    // the members first, rather than being lost
+    parent.addEventListener('click', this._onClick);
+    parent.addEventListener('keydown', this._onKeyDown);
+
     // Wait a bit before the relevant components, including the `aria-controls` target are mounted
     (async () => {
       await sleep(100);
 
-      // The widget may have been unmounted in the meantime, and the listeners added by `activate()`
-      // would then never be removed
+      // The widget may have been unmounted in the meantime
       if (!this.#destroyed) {
         this.activate();
       }
@@ -365,9 +371,13 @@ export class Group {
   }
 
   /**
-   * Activate the members.
+   * Activate the members, unless they already are.
    */
   activate() {
+    if (this.activated) {
+      return;
+    }
+
     const { parent, allMembers, selected: defaultSelected } = this;
 
     this.activated = true;
@@ -408,8 +418,6 @@ export class Group {
     });
 
     this.updateTabStop();
-    parent.addEventListener('click', this._onClick);
-    parent.addEventListener('keydown', this._onKeyDown);
     parent.dispatchEvent(new CustomEvent('Initialized'));
   }
 

package/dist/services/tree.svelte.d.ts

@@ -45,6 +45,11 @@ export class Tree {
      * @type {ReturnType<typeof globalThis.setTimeout> | undefined}
      */
     typeAheadTimer: ReturnType<typeof globalThis.setTimeout> | undefined;
+    /**
+     * Whether {@link activate} has run.
+     * @type {boolean}
+     */
+    activated: boolean;
     /**
      * Whether {@link destroy} has run, so a pending {@link activate} must not set anything up.
      * @type {boolean}
@@ -58,7 +63,7 @@ export class Tree {
     _onFocusIn: (event: FocusEvent) => void;
     observer: MutationObserver;
     /**
-     * Activate the items.
+     * Activate the items, unless they already are.
      */
     activate(): void;
     /**

package/dist/services/tree.svelte.js

@@ -67,6 +67,12 @@ export class Tree {
      */
     this.typeAheadTimer = undefined;
 
+    /**
+     * Whether {@link activate} has run.
+     * @type {boolean}
+     */
+    this.activated = false;
+
     /**
      * Whether {@link destroy} has run, so a pending {@link activate} must not set anything up.
      * @type {boolean}
@@ -76,18 +82,21 @@ export class Tree {
     // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: MouseEvent) => void} */
     this._onClick = (event) => {
+      this.activate();
       this.onClick(event);
     };
 
     // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: KeyboardEvent) => void} */
     this._onKeyDown = (event) => {
+      this.activate();
       this.onKeyDown(event);
     };
 
     // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: FocusEvent) => void} */
     this._onFocusIn = (event) => {
+      this.activate();
       this.onFocusIn(event);
     };
 
@@ -99,12 +108,18 @@ export class Tree {
     // The widget root itself is never part of the tab order; one of the items always is
     this.parent.tabIndex = -1;
 
+    // Listen right away: a click, a key press or a focus that comes before the activation below
+    // activates the items first, rather than being lost
+    parent.addEventListener('click', this._onClick);
+    parent.addEventListener('keydown', this._onKeyDown);
+    parent.addEventListener('focusin', this._onFocusIn);
+
     // Wait a bit before the child components are mounted
     (async () => {
       await sleep(100);
 
-      // The widget may have been unmounted in the meantime, and the listeners and the observer set
-      // up by `activate()` would then never be removed
+      // The widget may have been unmounted in the meantime, and the observer set up by
+      // `activate()` would then never be disconnected
       if (!this.destroyed) {
         this.activate();
       }
@@ -112,16 +127,17 @@ export class Tree {
   }
 
   /**
-   * Activate the items.
+   * Activate the items, unless they already are.
    */
   activate() {
+    if (this.activated) {
+      return;
+    }
+
     const { parent } = this;
 
+    this.activated = true;
     this.update();
-
-    parent.addEventListener('click', this._onClick);
-    parent.addEventListener('keydown', this._onKeyDown);
-    parent.addEventListener('focusin', this._onFocusIn);
     this.observer.observe(parent, { childList: true, subtree: true });
     parent.dispatchEvent(new CustomEvent('Initialized'));
   }

package/dist/typedefs.d.ts

@@ -273,7 +273,8 @@ export type DialogProps = {
     /**
      * Whether to automatically focus the first input field or primary
      * action button. Default: `true`. If `false`, or if the dialog has neither, the `<dialog>` element
-     * gets focused instead, so the focus is always moved into the modal.
+     * gets focused instead, so the focus is always moved into the modal. The focus is left alone if it
+     * has already moved into the dialog content by then, like when the user has clicked an input field.
      */
     focusInput?: boolean | undefined;
     /**
@@ -862,6 +863,32 @@ export type CodeHighlighterLoaders = {
      */
     loadTheme: (id: string) => Promise<any>;
 };
+/**
+ * Syntax-highlighted fragment of text, as painted behind a `<textarea>`.
+ */
+export type HighlightedToken = {
+    /**
+     * Text content.
+     */
+    content: string;
+    /**
+     * CSS colour. The text’s default colour is used when omitted.
+     */
+    color?: string | undefined;
+    /**
+     * Whether to embolden the text. It’s rendered with a stroke, so the text
+     * width doesn’t change.
+     */
+    bold?: boolean | undefined;
+    /**
+     * Whether to underline the text.
+     */
+    underline?: boolean | undefined;
+    /**
+     * Whether to strike through the text.
+     */
+    strikethrough?: boolean | undefined;
+};
 /**
  * Web font used by the components, published on Fontsource.
  */
@@ -990,6 +1017,16 @@ export type TextEditorStore = {
      * plain text editor.
      */
     useRichText: boolean;
+    /**
+     * The `<textarea>` element of the plain text
+     * mode.
+     */
+    textArea: HTMLTextAreaElement | undefined;
+    /**
+     * ID of the editable element currently shown: the Lexical root in the
+     * rich text mode, or the `<textarea>` in the plain text mode.
+     */
+    controlId: string;
     /**
      * Whether there was an error while converting Markdown to
      * Lexical nodes.
@@ -999,10 +1036,21 @@ export type TextEditorStore = {
      * Whether to show a converter error in the UI.
      */
     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}.
+     */
+    pending: boolean;
     /**
      * Function to trigger the Lexical converter.
      */
     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.
+     */
+    isRestyledImport: (value: string) => boolean;
 };
 export type SelectedItemDetail = {
     /**

package/dist/typedefs.js

@@ -100,7 +100,8 @@
  * @property {boolean} [cancelDisabled] Whether to disable the Cancel button.
  * @property {boolean} [focusInput] Whether to automatically focus the first input field or primary
  * action button. Default: `true`. If `false`, or if the dialog has neither, the `<dialog>` element
- * gets focused instead, so the focus is always moved into the modal.
+ * gets focused instead, so the focus is always moved into the modal. The focus is left alone if it
+ * has already moved into the dialog content by then, like when the user has clicked an input field.
  * @property {boolean} [lightDismiss] Whether to close the modal when the backdrop (outside of the
  * modal) is clicked.
  * @property {string} [value] Value entered on the textbox.
@@ -369,6 +370,17 @@
  * @property {(id: string) => Promise<any>} loadTheme Load a theme by ID.
  */
 
+/**
+ * Syntax-highlighted fragment of text, as painted behind a `<textarea>`.
+ * @typedef {object} HighlightedToken
+ * @property {string} content Text content.
+ * @property {string} [color] CSS colour. The text’s default colour is used when omitted.
+ * @property {boolean} [bold] Whether to embolden the text. It’s rendered with a stroke, so the text
+ * width doesn’t change.
+ * @property {boolean} [underline] Whether to underline the text.
+ * @property {boolean} [strikethrough] Whether to strike through the text.
+ */
+
 /**
  * Web font used by the components, published on Fontsource.
  * @typedef {object} FontDefinition
@@ -423,10 +435,19 @@
  * @property {TextEditorSelectionState} selection Current selection state.
  * @property {boolean} useRichText Whether to use rich text mode. If `false`, the editor shows the
  * plain text editor.
+ * @property {HTMLTextAreaElement | undefined} textArea The `<textarea>` element of the plain text
+ * mode.
+ * @property {string} controlId ID of the editable element currently shown: the Lexical root in the
+ * rich text mode, or the `<textarea>` in the plain text mode.
  * @property {boolean} hasConverterError Whether there was an error while converting Markdown to
  * 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}.
  * @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.
  */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.77.2",
+  "version": "0.78.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -61,7 +61,7 @@
     "lexical": "^0.51.0"
   },
   "devDependencies": {
-    "@fontsource-variable/material-symbols-outlined": "5.3.7",
+    "@fontsource-variable/material-symbols-outlined": "5.3.8",
     "@fontsource-variable/source-sans-3": "5.3.0",
     "@fontsource/noto-mono": "5.3.0",
     "@rollup/plugin-yaml": "^5.0.0",