@sveltia/ui 0.77.3 → 0.78.0

package/dist/components/text-editor/toolbar/insert-link-button.svelte

@@ -3,6 +3,7 @@
   import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
   import { _ } from '@sveltia/i18n';
   import { isMac, matchesShortcuts } from '@sveltia/utils/events';
+  import { isURL } from '@sveltia/utils/string';
   import {
     COMMAND_PRIORITY_NORMAL,
     KEY_DOWN_COMMAND,
@@ -22,6 +23,12 @@
   import TextInput from '../../text-field/text-input.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
   import { focusEditor, isSafeLinkURL } from '../core.js';
+  import {
+    applyRawTextEdit,
+    getRawTextState,
+    insertLink,
+    isRawTextEditable,
+  } from '../raw-markdown.js';
 
   /**
    * @import { TextEditorStore } from '../../../typedefs';
@@ -50,17 +57,39 @@
    */
   const isValidURL = $derived(!!anchorURL.trim() && isSafeLinkURL(anchorURL));
 
+  /**
+   * Open the dialog to create a new link from the given selected text.
+   * @param {string} textContent Selected text.
+   */
+  const openCreateDialog = (textContent) => {
+    // Prefill the URL field with the selected text only if it’s a URL that can be linked to.
+    // Otherwise, it’s just the link text, like a word or phrase.
+    anchorURL = isURL(textContent) && isSafeLinkURL(textContent) ? textContent : '';
+    hasAnchor = !!textContent;
+    dialogMode = 'create';
+    openDialog = true;
+  };
+
   /**
    * Create a new link by showing a dialog to accept a URL and optionally text.
    */
   const createLink = () => {
-    editorStore.editor?.getEditorState().read(() => {
-      const textContent = getTextContent().trim();
+    const { textArea, useRichText } = editorStore;
+
+    if (!useRichText) {
+      // The button is only enabled while the `<textarea>` is there
+      /* v8 ignore else */
+      if (textArea) {
+        const { value, start, end } = getRawTextState(textArea);
 
-      anchorURL = textContent;
-      hasAnchor = !!textContent;
-      dialogMode = 'create';
-      openDialog = true;
+        openCreateDialog(value.slice(start, end).trim());
+      }
+
+      return;
+    }
+
+    editorStore.editor?.getEditorState().read(() => {
+      openCreateDialog(getTextContent().trim());
     });
   };
 
@@ -109,7 +138,8 @@
    * create a new link.
    */
   const onButtonClick = () => {
-    if (selectionTypeMatches) {
+    // Links are not detected in the plain text mode, so a new one is always created there
+    if (selectionTypeMatches && editorStore.useRichText) {
       updateLink();
     } else {
       createLink();
@@ -132,6 +162,31 @@
    * @see https://github.com/facebook/lexical/discussions/3013
    */
   const onDialogClose = async (event) => {
+    const { textArea, useRichText } = editorStore;
+
+    if (!useRichText) {
+      // The dialog can only be opened from the button, which needs the `<textarea>`
+      /* v8 ignore else */
+      if (textArea) {
+        if (event.detail.returnValue !== 'cancel') {
+          applyRawTextEdit(
+            textArea,
+            insertLink(getRawTextState(textArea), {
+              url: anchorURL.trim(),
+              text: hasAnchor ? undefined : anchorText,
+            }),
+          );
+        } else {
+          textArea.focus();
+        }
+      }
+
+      anchorURL = '';
+      anchorText = '';
+
+      return;
+    }
+
     if (event.detail.returnValue !== 'cancel' && dialogMode !== 'remove') {
       // The dialog can only be opened from the button, which needs the editor
       /* v8 ignore next */
@@ -187,6 +242,31 @@
       COMMAND_PRIORITY_NORMAL,
     );
 
+  $effect(() => {
+    const { textArea } = editorStore;
+
+    if (!textArea) {
+      return undefined;
+    }
+
+    /**
+     * Handle the keyboard shortcut in the plain text mode.
+     * @param {KeyboardEvent} event `keydown` event.
+     */
+    const onKeyDown = (event) => {
+      if (isRawTextEditable(textArea) && matchesShortcuts(event, isMac() ? 'Meta+K' : 'Ctrl+K')) {
+        event.preventDefault();
+        onButtonClick();
+      }
+    };
+
+    textArea.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      textArea.removeEventListener('keydown', onKeyDown);
+    };
+  });
+
   $effect(() => {
     if (editorStore.editor) {
       // Unregister on unmount, e.g. when the toolbar swaps the button out while the caret is in a
@@ -201,9 +281,8 @@
 <Button
   iconic
   aria-label={_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
-  aria-controls={`${editorStore.editorId}-lexical-root`}
-  disabled={!editorStore.useRichText}
-  pressed={selectionTypeMatches}
+  aria-controls={editorStore.controlId}
+  pressed={selectionTypeMatches && editorStore.useRichText}
   onclick={() => {
     onButtonClick();
   }}

package/dist/components/text-editor/toolbar/insert-menu-button.svelte

@@ -9,6 +9,7 @@
   import MenuButton from '../../menu/menu-button.svelte';
   import MenuItem from '../../menu/menu-item.svelte';
   import Menu from '../../menu/menu.svelte';
+  import InsertComponentDialog from './insert-component-dialog.svelte';
 
   /**
    * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
@@ -28,18 +29,34 @@
 
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
+
+  /**
+   * Component to insert with the dialog in the plain text mode.
+   * @type {TextEditorComponent | undefined}
+   */
+  let dialogComponent = $state();
+  let openDialog = $state(false);
 </script>
 
-<MenuButton disabled={!editorStore.useRichText} label={_('_sui.insert')}>
+<MenuButton label={_('_sui.insert')}>
   {#snippet endIcon()}
     <Icon name="arrow_drop_down" class="small-arrow" />
   {/snippet}
   {#snippet popup()}
     <Menu>
-      {#each components as { id, label, icon, createNode } (id)}
+      {#each components as component (component.id)}
+        {@const { label, icon, createNode } = component}
         <MenuItem
           {label}
           onclick={() => {
+            // The plain text mode needs a dialog to fill in the component’s fields
+            if (!editorStore.useRichText) {
+              dialogComponent = component;
+              openDialog = true;
+
+              return;
+            }
+
             editorStore.editor?.update(() => {
               // Add an additional paragraph for easier editing
               insertNodes([createNode(), createParagraphNode()]);
@@ -56,3 +73,5 @@
     </Menu>
   {/snippet}
 </MenuButton>
+
+<InsertComponentDialog component={dialogComponent} bind:open={openDialog} />

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

@@ -80,9 +80,8 @@
 <ToolbarWrapper disabled={disabled || readonly} ariaLabel={_('_sui.text_editor.text_editor')}>
   {#if blockLevelButtons.length > 1}
     <MenuButton
-      disabled={!editorStore.useRichText}
       aria-label={_('_sui.text_editor.show_text_style_options')}
-      aria-controls={`${editorStore.editorId}-lexical-root`}
+      aria-controls={editorStore.controlId}
     >
       {#snippet startIcon()}
         <Icon
@@ -98,9 +97,10 @@
       {/snippet}
     </MenuButton>
   {/if}
-  {#if editorStore.selection.blockType === 'code-block'}
+  <!-- The language switcher only works with the rich text editor -->
+  {#if editorStore.useRichText && editorStore.selection.blockType === 'code-block'}
     <Divider orientation="vertical" />
-    <CodeLanguageSwitcher disabled={!editorStore.useRichText} />
+    <CodeLanguageSwitcher />
   {:else}
     {#if inlineLevelButtons.length}
       <Divider orientation="vertical" />

package/dist/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -16,6 +16,7 @@
   import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
   import { focusEditor } from '../core.js';
+  import { applyRawTextEdit, getRawTextState, setBlockType } from '../raw-markdown.js';
 
   /**
    * @import { TextEditorBlockType, TextEditorStore } from '../../../typedefs';
@@ -44,6 +45,18 @@
    * Change the current selection’s type to {@link type}.
    */
   const changeBlockType = async () => {
+    if (!editorStore.useRichText) {
+      const { textArea } = editorStore;
+
+      // The item is only clickable while the `<textarea>` is there
+      /* v8 ignore else */
+      if (textArea) {
+        applyRawTextEdit(textArea, setBlockType(getRawTextState(textArea), type));
+      }
+
+      return;
+    }
+
     // The item is only clickable while the editor is there
     /* v8 ignore next */
     if (!editorStore.editor) {

package/dist/components/text-field/text-area.svelte

@@ -10,7 +10,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers, HighlightedToken, InputEventHandlers } from '../../typedefs';
    */
 
   /**
@@ -24,6 +24,11 @@
    * content.
    * @property {boolean} [useEmojiAutocomplete] Whether to autocomplete emojis when the user
    * types a shortcode, like `:smi`.
+   * @property {(value: string) => HighlightedToken[][] | undefined} [highlight] Function to
+   * tokenize the value for syntax highlighting, returning one array of tokens per line, or
+   * `undefined` to show the text as is, for example while a grammar is still loading. The tokens
+   * are painted behind the text, which is made transparent, so the `<textarea>` keeps working as
+   * usual. Only styles that keep the text width can be applied, so the glyphs stay aligned.
    * @property {string} [class] The `class` attribute on the wrapper element.
    * @property {boolean} [hidden] Whether to hide the widget.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
@@ -49,6 +54,7 @@
     name = undefined,
     autoResize = false,
     useEmojiAutocomplete = false,
+    highlight = undefined,
     class: className,
     hidden = false,
     disabled = false,
@@ -67,6 +73,51 @@
    * @type {string}
    */
   const cloneValue = $derived(`${value}\n`);
+  /**
+   * Syntax-highlighted tokens of the value, flattened with line breaks in between, plus a trailing
+   * one like {@link cloneValue}. They’re only used when they add up to the value exactly, since
+   * stale tokens would show text different from what’s being edited.
+   * @type {HighlightedToken[] | undefined}
+   */
+  const highlightedTokens = $derived.by(() => {
+    const lines = highlight?.(value ?? '');
+
+    if (!lines) {
+      return undefined;
+    }
+
+    const tokens = lines.flatMap((line) => [...line, { content: '\n' }]);
+
+    return tokens.map(({ content }) => content).join('') === cloneValue ? tokens : undefined;
+  });
+  /** A reference to the clone element. */
+  let cloneElement = $state();
+
+  $effect(() => {
+    // Keep the highlighted text scrolled along with the `<textarea>`. It never scrolls when it’s
+    // auto-resized
+    if (!element || !cloneElement || autoResize) {
+      return undefined;
+    }
+
+    const textarea = element;
+    const clone = cloneElement;
+
+    /**
+     * Sync the scroll position.
+     */
+    const onScroll = () => {
+      clone.scrollTop = textarea.scrollTop;
+      clone.scrollLeft = textarea.scrollLeft;
+    };
+
+    onScroll();
+    textarea.addEventListener('scroll', onScroll);
+
+    return () => {
+      textarea.removeEventListener('scroll', onScroll);
+    };
+  });
 </script>
 
 <div
@@ -75,6 +126,7 @@
   class:flex
   class:disabled
   class:readonly
+  class:highlighted={!!highlightedTokens}
   {hidden}
 >
   <textarea
@@ -91,8 +143,24 @@
     aria-required={required}
     aria-invalid={invalid}
     class:auto-resize={autoResize}></textarea>
-  {#if autoResize}
-    <div class="clone" aria-hidden="true" {dir}>{cloneValue}</div>
+  {#if highlightedTokens}
+    <!-- Line breaks are only allowed within tags, as any whitespace would end up in the text -->
+    <!-- prettier-ignore -->
+    <div
+      bind:this={cloneElement}
+      class="clone"
+      class:auto-resize={autoResize}
+      aria-hidden="true"
+      {dir}
+    >{#each highlightedTokens as token, index (index)}<span
+          style:color={token.color}
+          class:bold={token.bold}
+          class:underline={token.underline}
+          class:strikethrough={token.strikethrough}
+        >{token.content}</span
+      >{/each}</div>
+  {:else if autoResize}
+    <div class="clone auto-resize" aria-hidden="true" {dir}>{cloneValue}</div>
   {/if}
   {#if useEmojiAutocomplete && !disabled && !readonly}
     <EmojiAutocomplete {element} />
@@ -100,6 +168,7 @@
 </div>
 
 <style>.text-area {
+  position: relative;
   display: inline-grid;
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-multiline-min-width);
@@ -145,7 +214,7 @@
   color: var(--sui-textbox-foreground-color-focus, var(--sui-textbox-foreground-color));
   background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
 }
-:is(textarea, .clone):is(:disabled, :read-only) {
+:is(textarea, .clone):is(:disabled, :read-only):not(.clone) {
   background-color: var(--sui-disabled-background-color);
 }
 
@@ -164,6 +233,52 @@ textarea[aria-invalid=true] {
   overflow: hidden;
   visibility: hidden;
 }
+.clone:not(.auto-resize) {
+  position: absolute;
+  inset: 0;
+  min-height: 0;
+  scroll-behavior: auto;
+}
+
+.highlighted textarea {
+  z-index: 1;
+  caret-color: var(--sui-textbox-foreground-color);
+  color: transparent !important;
+  background-color: transparent !important;
+}
+.highlighted textarea:not(.auto-resize) {
+  scrollbar-gutter: stable;
+}
+.highlighted textarea::placeholder {
+  color: var(--sui-textbox-placeholder-foreground-color, var(--sui-textbox-foreground-color));
+  opacity: var(--sui-textbox-placeholder-opacity, 1);
+}
+.highlighted .clone {
+  visibility: visible;
+  pointer-events: none;
+}
+.highlighted .clone .bold {
+  -webkit-text-stroke: 0.03em currentColor;
+}
+.highlighted .clone .underline {
+  text-decoration-line: underline;
+}
+.highlighted .clone .strikethrough {
+  text-decoration-line: line-through;
+}
+.highlighted .clone .underline.strikethrough {
+  text-decoration-line: underline line-through;
+}
+.highlighted .clone:not(.auto-resize) {
+  scrollbar-gutter: stable;
+}
+.highlighted:focus-within .clone {
+  color: var(--sui-textbox-foreground-color-focus, var(--sui-textbox-foreground-color));
+  background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
+}
+.highlighted:is(.disabled, .readonly) .clone {
+  background-color: var(--sui-disabled-background-color);
+}
 
 textarea,
 .clone {

package/dist/components/text-field/text-area.svelte.d.ts

@@ -40,6 +40,14 @@ declare const TextArea: import("svelte").Component<import("../../typedefs").Keyb
      * types a shortcode, like `:smi`.
      */
     useEmojiAutocomplete?: boolean | undefined;
+    /**
+     * Function to
+     * tokenize the value for syntax highlighting, returning one array of tokens per line, or
+     * `undefined` to show the text as is, for example while a grammar is still loading. The tokens
+     * are painted behind the text, which is made transparent, so the `<textarea>` keeps working as
+     * usual. Only styles that keep the text width can be applied, so the glyphs stay aligned.
+     */
+    highlight?: ((value: string) => HighlightedToken[][] | undefined) | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -104,6 +112,14 @@ type Props = {
      * types a shortcode, like `:smi`.
      */
     useEmojiAutocomplete?: boolean | undefined;
+    /**
+     * Function to
+     * tokenize the value for syntax highlighting, returning one array of tokens per line, or
+     * `undefined` to show the text as is, for example while a grammar is still loading. The tokens
+     * are painted behind the text, which is made transparent, so the `<textarea>` keeps working as
+     * usual. Only styles that keep the text width can be applied, so the glyphs stay aligned.
+     */
+    highlight?: ((value: string) => HighlightedToken[][] | undefined) | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -138,4 +154,5 @@ type Props = {
     children?: Snippet<[]> | undefined;
 };
 import type { InputEventHandlers } from '../../typedefs';
+import type { HighlightedToken } from '../../typedefs';
 import type { Snippet } from 'svelte';

package/dist/components/util/font-links.svelte

@@ -37,7 +37,7 @@
     font-style: normal;
     font-display: block;
     font-weight: 400;
-    src: url(https://cdn.jsdelivr.net/fontsource/fonts/material-symbols-outlined:vf@5.3.7/latin-wght-normal.woff2)
+    src: url(https://cdn.jsdelivr.net/fontsource/fonts/material-symbols-outlined:vf@5.3.8/latin-wght-normal.woff2)
       format('woff2-variations');
     unicode-range:
       U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,

package/dist/components/util/fonts.js

@@ -69,7 +69,7 @@ export const FONTS = [
   {
     family: 'Material Symbols Outlined',
     packageName: '@fontsource-variable/material-symbols-outlined',
-    version: '5.3.7',
+    version: '5.3.8',
     cdnId: 'material-symbols-outlined:vf',
     subset: 'latin-wght-normal',
     format: 'woff2-variations',

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

@@ -52,7 +52,7 @@ export class Group {
     rovingTabStop: "selected" | "first";
     observer: MutationObserver;
     /**
-     * Activate the members.
+     * Activate the members, unless they already are.
      */
     activate(): void;
     /**

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'));
   }