@sveltia/ui 0.78.4 → 0.79.1

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

@@ -1,21 +1,15 @@
 <script>
   import { _ } from '@sveltia/i18n';
-  import { isMac, matchesShortcuts } from '@sveltia/utils/events';
   import { FORMAT_TEXT_COMMAND } from 'lexical';
   import { getContext } from 'svelte';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
   import { focusEditor } from '../core.js';
-  import {
-    applyRawTextEdit,
-    getRawTextState,
-    isRawTextEditable,
-    toggleInlineFormat,
-  } from '../raw-markdown.js';
+  import { editRawText, registerRawTextShortcut, toggleInlineFormat } from '../raw-markdown.js';
 
   /**
-   * @import { TextEditorFormatType, TextEditorStore } from '../../../typedefs';
+   * @import { TextEditorFormatType, TextEditorStore } from '../../../typedefs.js';
    */
 
   /**
@@ -50,10 +44,7 @@
 
     if (!useRichText) {
       // The button is only enabled while the `<textarea>` is there
-      /* v8 ignore else */
-      if (textArea) {
-        applyRawTextEdit(textArea, toggleInlineFormat(getRawTextState(textArea), type));
-      }
+      editRawText(textArea, (state) => toggleInlineFormat(state, type));
 
       return;
     }
@@ -74,25 +65,10 @@
       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+${key}` : `Ctrl+${key}`)
-      ) {
-        event.preventDefault();
-        format();
-      }
-    };
-
-    textArea.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      textArea.removeEventListener('keydown', onKeyDown);
-    };
+    // Handle the keyboard shortcut in the plain text mode
+    return registerRawTextShortcut(textArea, key, () => {
+      format();
+    });
   });
 </script>
 

package/dist/components/text-editor/toolbar/format-text-button.svelte.d.ts

@@ -15,4 +15,4 @@ type Props = {
      */
     type: TextEditorFormatType;
 };
-import type { TextEditorFormatType } from '../../../typedefs';
+import type { TextEditorFormatType } from '../../../typedefs.js';

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

@@ -0,0 +1,3 @@
+export function insertEditorComponent(editorStore: TextEditorStore, component: TextEditorComponent): void;
+import type { TextEditorStore } from '../../../typedefs.js';
+import type { TextEditorComponent } from '../../../typedefs.js';

package/dist/components/text-editor/toolbar/insert-component.js

@@ -0,0 +1,34 @@
+import { $createParagraphNode as createParagraphNode, $insertNodes as insertNodes } from 'lexical';
+import { insertComponent } from '../raw-markdown.js';
+
+/**
+ * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs.js';
+ */
+
+/**
+ * Insert a new instance of the given editor component into the editor: its Markdown in the plain
+ * text mode, or its node in the rich text mode.
+ * @param {TextEditorStore} editorStore Editor store.
+ * @param {TextEditorComponent} component Editor component.
+ */
+export const insertEditorComponent = (editorStore, component) => {
+  const { textArea, useRichText } = editorStore;
+
+  // Insert the component’s Markdown in the plain text mode
+  if (!useRichText) {
+    // The toolbar is only enabled while the `<textarea>` is there
+    /* v8 ignore else */
+    if (textArea) {
+      insertComponent(textArea, component);
+    }
+
+    return;
+  }
+
+  const { createNode } = component;
+
+  editorStore.editor?.update(() => {
+    // Add an additional paragraph for easier editing
+    insertNodes([createNode(), createParagraphNode()]);
+  });
+};

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

@@ -1,15 +1,11 @@
 <script>
-  import {
-    $createParagraphNode as createParagraphNode,
-    $insertNodes as insertNodes,
-  } from 'lexical';
   import { getContext } from 'svelte';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
-  import { insertComponent } from '../raw-markdown.js';
+  import { insertEditorComponent } from './insert-component.js';
 
   /**
-   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
+   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs.js';
    */
 
   /**
@@ -27,7 +23,7 @@
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
 
-  const { label, icon, createNode } = $derived(component);
+  const { label, icon } = $derived(component);
 </script>
 
 <Button
@@ -37,23 +33,7 @@
   aria-label={label}
   aria-controls={editorStore.controlId}
   onclick={() => {
-    const { textArea, useRichText } = editorStore;
-
-    // Insert the component’s Markdown in the plain text mode
-    if (!useRichText) {
-      // The button is only enabled while the `<textarea>` is there
-      /* v8 ignore else */
-      if (textArea) {
-        insertComponent(textArea, component);
-      }
-
-      return;
-    }
-
-    editorStore.editor?.update(() => {
-      // Add an additional paragraph for easier editing
-      insertNodes([createNode(), createParagraphNode()]);
-    });
+    insertEditorComponent(editorStore, component);
   }}
 >
   {#snippet startIcon()}

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

@@ -15,4 +15,4 @@ type Props = {
      */
     component: TextEditorComponent;
 };
-import type { TextEditorComponent } from '../../../typedefs';
+import type { TextEditorComponent } from '../../../typedefs.js';

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

@@ -24,14 +24,14 @@
   import { AVAILABLE_BUTTONS } from '../constants.js';
   import { focusEditor, isSafeLinkURL } from '../core.js';
   import {
-    applyRawTextEdit,
+    editRawText,
     getRawTextState,
     insertLink,
-    isRawTextEditable,
+    registerRawTextShortcut,
   } from '../raw-markdown.js';
 
   /**
-   * @import { TextEditorStore } from '../../../typedefs';
+   * @import { TextEditorStore } from '../../../typedefs.js';
    * @import { RangeSelection } from 'lexical';
    */
 
@@ -169,12 +169,8 @@
       /* v8 ignore else */
       if (textArea) {
         if (event.detail.returnValue !== 'cancel') {
-          applyRawTextEdit(
-            textArea,
-            insertLink(getRawTextState(textArea), {
-              url: anchorURL.trim(),
-              text: hasAnchor ? undefined : anchorText,
-            }),
+          editRawText(textArea, (state) =>
+            insertLink(state, { url: anchorURL.trim(), text: hasAnchor ? undefined : anchorText }),
           );
         } else {
           textArea.focus();
@@ -249,22 +245,10 @@
       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);
-    };
+    // Handle the keyboard shortcut in the plain text mode
+    return registerRawTextShortcut(textArea, 'K', () => {
+      onButtonClick();
+    });
   });
 
   $effect(() => {

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

@@ -1,18 +1,14 @@
 <script>
   import { _ } from '@sveltia/i18n';
-  import {
-    $createParagraphNode as createParagraphNode,
-    $insertNodes as insertNodes,
-  } from 'lexical';
   import { getContext } from 'svelte';
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
   import MenuItem from '../../menu/menu-item.svelte';
   import Menu from '../../menu/menu.svelte';
-  import { insertComponent } from '../raw-markdown.js';
+  import { insertEditorComponent } from './insert-component.js';
 
   /**
-   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
+   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs.js';
    */
 
   /**
@@ -38,27 +34,11 @@
   {#snippet popup()}
     <Menu>
       {#each components as component (component.id)}
-        {@const { label, icon, createNode } = component}
+        {@const { label, icon } = component}
         <MenuItem
           {label}
           onclick={() => {
-            const { textArea, useRichText } = editorStore;
-
-            // Insert the component’s Markdown in the plain text mode
-            if (!useRichText) {
-              // The item is only clickable while the `<textarea>` is there
-              /* v8 ignore else */
-              if (textArea) {
-                insertComponent(textArea, component);
-              }
-
-              return;
-            }
-
-            editorStore.editor?.update(() => {
-              // Add an additional paragraph for easier editing
-              insertNodes([createNode(), createParagraphNode()]);
-            });
+            insertEditorComponent(editorStore, component);
           }}
         >
           {#snippet startIcon()}

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

@@ -15,4 +15,4 @@ type Props = {
      */
     components: TextEditorComponent[];
 };
-import type { TextEditorComponent } from '../../../typedefs';
+import type { TextEditorComponent } from '../../../typedefs.js';

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

@@ -19,7 +19,7 @@
   import ToolbarWrapper from './toolbar-wrapper.svelte';
 
   /**
-   * @import { TextEditorBlockType, TextEditorInlineType, TextEditorStore } from '../../../typedefs';
+   * @import { TextEditorBlockType, TextEditorInlineType, TextEditorStore } from '../../../typedefs.js';
    */
 
   /**

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

@@ -16,13 +16,34 @@
   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 { editRawText, setBlockType } from '../raw-markdown.js';
 
   /**
-   * @import { TextEditorBlockType, TextEditorStore } from '../../../typedefs';
+   * @import { TextEditorBlockType, TextEditorStore } from '../../../typedefs.js';
    * @import { HeadingTagType } from '@lexical/rich-text';
+   * @import { ElementNode, LexicalCommand } from 'lexical';
    */
 
+  /**
+   * Node factories for the block types applied with `$setBlocksType()`, except headings, whose
+   * level is parsed from the type.
+   * @type {Record<string, () => ElementNode>}
+   */
+  const NODE_FACTORIES = {
+    paragraph: createParagraphNode,
+    blockquote: createQuoteNode,
+    'code-block': createCodeNode,
+  };
+
+  /**
+   * Commands for the list block types, which are toggled by the list plugin instead.
+   * @type {Record<string, LexicalCommand<void>>}
+   */
+  const LIST_COMMANDS = {
+    'bulleted-list': INSERT_UNORDERED_LIST_COMMAND,
+    'numbered-list': INSERT_ORDERED_LIST_COMMAND,
+  };
+
   /**
    * @typedef {object} Props
    * @property {TextEditorBlockType} type Button type.
@@ -46,13 +67,8 @@
    */
   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));
-      }
+      editRawText(editorStore.textArea, (state) => setBlockType(state, type));
 
       return;
     }
@@ -67,38 +83,18 @@
 
     const [, headingLevel] = type.match(/^heading-(\d)$/) ?? [];
 
-    if (headingLevel) {
-      editorStore.editor.update(() => {
-        setBlocksType(getSelection(), () =>
-          createHeadingNode(/** @type {HeadingTagType} */ (`h${headingLevel}`)),
-        );
-      });
-    }
+    const createNode = headingLevel
+      ? () => createHeadingNode(/** @type {HeadingTagType} */ (`h${headingLevel}`))
+      : NODE_FACTORIES[type];
 
-    if (type === 'paragraph') {
+    if (createNode) {
       editorStore.editor.update(() => {
-        setBlocksType(getSelection(), () => createParagraphNode());
+        setBlocksType(getSelection(), createNode);
       });
     }
 
-    if (type === 'bulleted-list') {
-      editorStore.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-    }
-
-    if (type === 'numbered-list') {
-      editorStore.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-    }
-
-    if (type === 'blockquote') {
-      editorStore.editor.update(() => {
-        setBlocksType(getSelection(), () => createQuoteNode());
-      });
-    }
-
-    if (type === 'code-block') {
-      editorStore.editor.update(() => {
-        setBlocksType(getSelection(), () => createCodeNode());
-      });
+    if (type in LIST_COMMANDS) {
+      editorStore.editor.dispatchCommand(LIST_COMMANDS[type], undefined);
     }
   };
 </script>

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

@@ -15,4 +15,4 @@ type Props = {
      */
     type: TextEditorBlockType;
 };
-import type { TextEditorBlockType } from '../../../typedefs';
+import type { TextEditorBlockType } from '../../../typedefs.js';

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

@@ -9,8 +9,6 @@
    * @typedef {object} Props
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
-   * @property {boolean} [readonly] Whether to make the widget read-only. An alias of the
-   * `aria-readonly` attribute.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -19,8 +17,6 @@
    */
   let {
     /* eslint-disable prefer-const */
-    code = $bindable(''),
-    lang = $bindable('plain'),
     disabled = false,
     children,
     ...restProps
@@ -56,12 +52,6 @@
   min-height: 40px;
   background-color: var(--sui-tertiary-background-color);
 }
-@media (width < 768px) {
-  .wrapper :global([role=toolbar]) {
-    flex-wrap: wrap;
-    height: auto;
-  }
-}
 .wrapper :global(.sui.menu-button) {
   padding: 0 4px;
 }

package/dist/components/text-editor/toolbar/toolbar-wrapper.svelte.d.ts

@@ -9,27 +9,17 @@ declare const ToolbarWrapper: import("svelte").Component<{
      * attribute.
      */
     disabled?: boolean | undefined;
-    /**
-     * Whether to make the widget read-only. An alias of the
-     * `aria-readonly` attribute.
-     */
-    readonly?: boolean | undefined;
     /**
      * Primary slot content.
      */
     children?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "code" | "lang">;
+} & Record<string, any>, {}, "">;
 type Props = {
     /**
      * Whether to disable the widget. An alias of the `aria-disabled`
      * attribute.
      */
     disabled?: boolean | undefined;
-    /**
-     * Whether to make the widget read-only. An alias of the
-     * `aria-readonly` attribute.
-     */
-    readonly?: boolean | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/text-editor/transformers/table.d.ts

@@ -1,5 +1,4 @@
 export function getTableColumnsSize(table: TableNode): number;
-export function createTableCell(textContent: string): TableCellNode;
 export function mapToTableCells(textContent: string): TableCellNode[] | null;
 /**
  * @type {ElementTransformer}

package/dist/components/text-editor/transformers/table.js

@@ -44,11 +44,10 @@ export const getTableColumnsSize = (table) => {
 
 /**
  * Creates a table cell with the given text content.
- * @internal
  * @param {string} textContent
  * @returns {TableCellNode}
  */
-export const createTableCell = (textContent) => {
+const createTableCell = (textContent) => {
   textContent = textContent.replace(/\\n/g, '\n');
 
   const cell = createTableCellNode(TableCellHeaderStates.NO_STATUS);

package/dist/components/text-field/emoji-autocomplete.svelte

@@ -11,7 +11,7 @@
   import EmojiSuggestions from '../emoji/emoji-suggestions.svelte';
 
   /**
-   * @import { EmojiEntry, EmojiTrigger } from '../../typedefs';
+   * @import { EmojiEntry, EmojiTrigger } from '../../typedefs.js';
    */
 
   /**

package/dist/components/text-field/masked-input.svelte

@@ -0,0 +1,179 @@
+<!--
+  @component
+  Internal base of `<PasswordInput>` and `<SecretInput>`: a text field whose value is masked, with a
+  Show/Hide button.
+-->
+<script>
+  import { _ } from '@sveltia/i18n';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import TextInput from './text-input.svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {'type' | 'css'} mask How to mask the value: `type` uses `type="password"`, while
+   * `css` uses `-webkit-text-security` so password managers don’t prompt to save the value.
+   * @property {string} [value] Input value.
+   * @property {Snippet} [visibilityIcon] Visibility icon slot content.
+   */
+
+  /**
+   * @type {TextInputProps & CommonEventHandlers & InputEventHandlers & Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    mask,
+    value = $bindable(),
+    flex = false,
+    monospace = true,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    // Not rendered, but kept out of `restProps` so it isn’t spread onto the `<input>`
+    children,
+    visibilityIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const id = $props.id();
+
+  /**
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
+   */
+  let inputElement = $state();
+  let show = $state(false);
+
+  const labels = $derived(
+    mask === 'type'
+      ? {
+          show: '_sui.password_input.show_password',
+          hide: '_sui.password_input.hide_password',
+        }
+      : {
+          show: '_sui.secret_input.show_secret',
+          hide: '_sui.secret_input.hide_secret',
+        },
+  );
+
+  $effect(() => {
+    if (mask === 'type') {
+      inputElement?.setAttribute('type', show ? 'text' : 'password');
+    }
+  });
+</script>
+
+<div
+  role="none"
+  class="sui {mask === 'type' ? 'password-input' : 'secret-input'} {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  class:show={mask === 'css' && show}
+  {hidden}
+>
+  <!-- With the `css` mask, the field is masked with CSS rather than `type="password"`, so opt out
+  of the features that would remember the secret, like autofill history and the keyboard’s learned
+  words -->
+  <TextInput
+    dir="ltr"
+    bind:element={inputElement}
+    {...mask === 'css' ? { autocomplete: 'off', autocapitalize: 'off', autocorrect: 'off' } : {}}
+    {...restProps}
+    {id}
+    bind:value
+    {...mask === 'type' ? { type: 'password' } : {}}
+    spellcheck="false"
+    {flex}
+    {monospace}
+    {hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
+  />
+  <Button
+    iconic
+    disabled={disabled || readonly}
+    pressed={show}
+    aria-label={_(show ? labels.hide : labels.show)}
+    aria-controls={id}
+    onclick={() => {
+      show = !show;
+    }}
+  >
+    {#snippet startIcon()}
+      {#if visibilityIcon}
+        {@render visibilityIcon()}
+      {:else}
+        <Icon name={show ? 'visibility_off' : 'visibility'} />
+      {/if}
+    {/snippet}
+  </Button>
+</div>
+
+<style>.password-input,
+.secret-input {
+  display: inline-flex;
+  align-items: center;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-singleline-min-width);
+}
+.password-input.flex:not([hidden]),
+.secret-input.flex:not([hidden]) {
+  display: inline-flex;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
+}
+.password-input :global(.text-input),
+.secret-input :global(.text-input) {
+  flex: auto;
+  margin: 0 !important;
+  width: 0;
+  min-width: 0 !important;
+}
+.password-input :global(input),
+.secret-input :global(input) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.password-input :global(button),
+.secret-input :global(button) {
+  margin-block: 0;
+  margin-inline-end: 0;
+  flex: none;
+  margin-inline-start: -1px;
+  border-width: 1px;
+  border-color: var(--sui-textbox-border-color);
+  width: var(--sui-textbox-height);
+  aspect-ratio: 1/1;
+}
+.password-input :global(button:last-child),
+.secret-input :global(button:last-child) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-end-start-radius: 0;
+}
+.password-input :global(button) :global(.icon),
+.secret-input :global(button) :global(.icon) {
+  font-size: var(--sui-font-size-xx-large);
+}
+
+.secret-input.show :global(input) {
+  -webkit-text-security: none;
+}
+.secret-input :global(input) {
+  -webkit-text-security: disc;
+}</style>