@sveltia/ui 0.77.2 → 0.78.0

package/dist/components/text-editor/toolbar/insert-component-dialog.svelte

@@ -0,0 +1,92 @@
+<!--
+  @component
+  A dialog to insert an editor component in the plain text mode. The component is edited with its
+  own field UI in a minimal rich text editor, then inserted into the `<textarea>` as Markdown.
+-->
+<script>
+  import { _ } from '@sveltia/i18n';
+  import { getContext } from 'svelte';
+  import Dialog from '../../dialog/dialog.svelte';
+  import { applyRawTextEdit, getRawTextState, insertMarkdown } from '../raw-markdown.js';
+  import ComponentEditor from './component-editor.svelte';
+
+  /**
+   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {TextEditorComponent | undefined} component Editor component to insert.
+   * @property {boolean} [open] Whether to open the dialog.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    component,
+    open = $bindable(false),
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {TextEditorStore} */
+  const editorStore = getContext('editorStore');
+
+  let markdown = $state('');
+  /** @type {ComponentEditor | undefined} */
+  let componentEditor = $state();
+  /**
+   * Markdown taken from the editor as the dialog starts closing, while it’s still there.
+   * @type {string}
+   */
+  let latestMarkdown = '';
+
+  /**
+   * Insert the component’s Markdown into the `<textarea>`, or just bring the focus back there.
+   * @param {CustomEvent} event `close` event.
+   */
+  const onClose = (event) => {
+    const { textArea } = editorStore;
+
+    // The dialog can only be opened from a button, which needs the `<textarea>`
+    /* v8 ignore next 3 */
+    if (!textArea) {
+      return;
+    }
+
+    if (event.detail.returnValue !== 'cancel' && latestMarkdown) {
+      // A component matched by a single-line pattern is inline; anything else is a block
+      const block = component?.transformer?.type !== 'text-match';
+
+      applyRawTextEdit(
+        textArea,
+        insertMarkdown(getRawTextState(textArea), latestMarkdown, { block }),
+      );
+    } else {
+      textArea.focus();
+    }
+
+    markdown = '';
+    latestMarkdown = '';
+  };
+</script>
+
+<Dialog
+  title={component?.label ?? ''}
+  size="large"
+  bind:open
+  okLabel={_('_sui.insert')}
+  okDisabled={!markdown}
+  restoreFocus={false}
+  onClosing={() => {
+    // Get the latest Markdown, as the bound value is updated with a delay
+    latestMarkdown = componentEditor?.getMarkdown() ?? markdown;
+  }}
+  onClose={(event) => {
+    onClose(event);
+  }}
+>
+  <!-- The dialog unmounts its content once closed, so each opening gets a fresh editor -->
+  {#if component}
+    <ComponentEditor bind:this={componentEditor} {component} bind:markdown />
+  {/if}
+</Dialog>

package/dist/components/text-editor/toolbar/insert-component-dialog.svelte.d.ts

@@ -0,0 +1,30 @@
+export default InsertComponentDialog;
+type InsertComponentDialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+/**
+ * A dialog to insert an editor component in the plain text mode. The component is edited with its
+ * own field UI in a minimal rich text editor, then inserted into the `<textarea>` as Markdown.
+ */
+declare const InsertComponentDialog: import("svelte").Component<{
+    /**
+     * Editor component to insert.
+     */
+    component: TextEditorComponent | undefined;
+    /**
+     * Whether to open the dialog.
+     */
+    open?: boolean | undefined;
+}, {}, "open">;
+type Props = {
+    /**
+     * Editor component to insert.
+     */
+    component: TextEditorComponent | undefined;
+    /**
+     * Whether to open the dialog.
+     */
+    open?: boolean | undefined;
+};
+import type { TextEditorComponent } from '../../../typedefs';

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

@@ -6,6 +6,7 @@
   import { getContext } from 'svelte';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
+  import InsertComponentDialog from './insert-component-dialog.svelte';
 
   /**
    * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
@@ -27,6 +28,8 @@
   const editorStore = getContext('editorStore');
 
   const { label, icon, createNode } = $derived(component);
+
+  let openDialog = $state(false);
 </script>
 
 <Button
@@ -34,9 +37,15 @@
   label={icon ? undefined : label}
   title={label}
   aria-label={label}
-  aria-controls={`${editorStore.editorId}-lexical-root`}
-  disabled={!editorStore.useRichText}
+  aria-controls={editorStore.controlId}
   onclick={() => {
+    // The plain text mode needs a dialog to fill in the component’s fields
+    if (!editorStore.useRichText) {
+      openDialog = true;
+
+      return;
+    }
+
     editorStore.editor?.update(() => {
       // Add an additional paragraph for easier editing
       insertNodes([createNode(), createParagraphNode()]);
@@ -49,3 +58,5 @@
     {/if}
   {/snippet}
 </Button>
+
+<InsertComponentDialog {component} bind:open={openDialog} />

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;
     /**