@sveltia/ui 0.63.1 → 0.65.0

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

@@ -9,6 +9,7 @@
   import TextArea from '../text-field/text-area.svelte';
   import Toast from '../toast/toast.svelte';
   import { BLOCK_BUTTON_TYPES, INLINE_BUTTON_TYPES } from './constants.js';
+  import EmojiAutocomplete from './emoji-autocomplete.svelte';
   import LexicalRoot from './lexical-root.svelte';
   import { createEditorStore } from './store.svelte.js';
   import TextEditorToolbar from './toolbar/text-editor-toolbar.svelte';
@@ -28,6 +29,8 @@
    * @property {TextEditorComponent[]} [components] Editor components.
    * @property {boolean} [useMarkdownShortcuts] Whether to enable Markdown keyboard shortcuts in the
    * rich text editor.
+   * @property {boolean} [useEmojiAutocomplete] Whether to autocomplete emojis when the user
+   * types a shortcode, like `:smi`.
    * @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`
@@ -53,6 +56,7 @@
     buttons = [...INLINE_BUTTON_TYPES, ...BLOCK_BUTTON_TYPES],
     components = [],
     useMarkdownShortcuts = true,
+    useEmojiAutocomplete = true,
     hidden = false,
     disabled = false,
     readonly = false,
@@ -72,6 +76,7 @@
     enabledButtons: buttons,
     components,
     useMarkdownShortcuts,
+    useEmojiAutocomplete,
   };
 
   setContext('editorStore', editorStore);
@@ -115,6 +120,7 @@
   <TextArea
     autoResize={true}
     bind:value={editorStore.inputValue}
+    {useEmojiAutocomplete}
     {flex}
     {dir}
     hidden={editorStore.useRichText || hidden}
@@ -123,6 +129,9 @@
     {required}
     {invalid}
   />
+  {#if editorStore.config.useEmojiAutocomplete && !disabled && !readonly}
+    <EmojiAutocomplete />
+  {/if}
 </div>
 
 {#if editorStore.showConverterError}

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

@@ -34,6 +34,11 @@ declare const TextEditor: import("svelte").Component<{
      * rich text editor.
      */
     useMarkdownShortcuts?: boolean | undefined;
+    /**
+     * Whether to autocomplete emojis when the user
+     * types a shortcode, like `:smi`.
+     */
+    useEmojiAutocomplete?: boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -97,6 +102,11 @@ type Props = {
      * rich text editor.
      */
     useMarkdownShortcuts?: boolean | undefined;
+    /**
+     * Whether to autocomplete emojis when the user
+     * types a shortcode, like `:smi`.
+     */
+    useEmojiAutocomplete?: boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */

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

@@ -0,0 +1,165 @@
+<!--
+  @component
+  Emoji autocomplete for a plain `<input>` or `<textarea>`. Typing a colon followed by one or more
+  characters, like `:smi`, brings up a list of matching emojis that can be inserted with a click or
+  the Enter key, the same way it works on GitHub, Slack and other apps. This wires the field up to
+  `<EmojiSuggestions>`, which owns the dropdown itself.
+-->
+<script>
+  import { getFieldCaretRect } from '../emoji/caret.js';
+  import { detectEmojiTrigger, getEmojiInsertText } from '../emoji/emoji.js';
+  import EmojiSuggestions from '../emoji/emoji-suggestions.svelte';
+
+  /**
+   * @import { EmojiEntry, EmojiTrigger } from '../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {HTMLInputElement | HTMLTextAreaElement} [element] The field to attach the
+   * suggestions to.
+   */
+
+  /**
+   * A shortcode within a text field, identified by where its colon is, which doesn’t change as the
+   * query grows.
+   * @typedef {EmojiTrigger & { start: number, end: number }} FieldEmojiTrigger
+   */
+
+  /**
+   * @type {Props}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    element = undefined,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /**
+   * A reference to the dropdown.
+   * @type {ReturnType<typeof EmojiSuggestions> | undefined}
+   */
+  let list = $state();
+
+  /**
+   * Look for a shortcode being typed right before the caret.
+   * @returns {FieldEmojiTrigger | undefined} Shortcode state, if any.
+   */
+  const findTrigger = () => {
+    if (!element || element.disabled || element.readOnly) {
+      return undefined;
+    }
+
+    const { value, selectionStart, selectionEnd } = element;
+
+    // Only suggest at a plain caret, not while a range is selected
+    if (selectionStart === null || selectionStart !== selectionEnd) {
+      return undefined;
+    }
+
+    const query = detectEmojiTrigger(value.slice(0, selectionStart));
+
+    if (query === undefined) {
+      return undefined;
+    }
+
+    const start = selectionStart - query.length - 1;
+
+    return { id: String(start), query, start, end: selectionStart };
+  };
+
+  /**
+   * Get the viewport-relative bounds of the shortcode being typed.
+   * @param {EmojiTrigger} trigger Shortcode state.
+   * @returns {ReturnType<typeof getFieldCaretRect>} Bounds, or `undefined` if they can’t be
+   * determined.
+   */
+  const getAnchorRect = (trigger) => {
+    const { start, end } = /** @type {FieldEmojiTrigger} */ (trigger);
+
+    return element ? getFieldCaretRect(element, start, end) : undefined;
+  };
+
+  /**
+   * Replace the shortcode being typed with the given emoji.
+   * @param {EmojiEntry} entry Emoji to insert.
+   * @param {EmojiTrigger} trigger Shortcode to replace.
+   */
+  const insertEmoji = (entry, trigger) => {
+    const { query, start, end } = /** @type {FieldEmojiTrigger} */ (trigger);
+
+    // Make sure the shortcode is still where it was when the suggestions appeared
+    if (!element || element.value.slice(start, end) !== `:${query}`) {
+      return;
+    }
+
+    const text = getEmojiInsertText(entry.emoji, element.value.slice(end));
+
+    element.focus();
+    element.setSelectionRange(start, end);
+
+    // `execCommand()` is deprecated but remains the only way to edit a field without wiping its
+    // native undo history, so it’s tried first and `setRangeText()` covers the fallback
+    let inserted = false;
+
+    try {
+      inserted = document.execCommand('insertText', false, text);
+    } catch {
+      inserted = false;
+    }
+
+    if (!inserted) {
+      element.setRangeText(text, start, end, 'end');
+      // Let Svelte bindings and consumer handlers know the value changed
+      element.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  };
+
+  $effect(() => {
+    if (!element || !list) {
+      return undefined;
+    }
+
+    const field = element;
+
+    /**
+     * Re-examine the text around the caret.
+     */
+    const refresh = () => {
+      list?.update(findTrigger());
+    };
+
+    /**
+     * Give the list first refusal on the keys it drives. Anything it doesn’t take is left to the
+     * field, and the `keyup` listener below picks up wherever the caret ends up.
+     * @param {Event} event `keydown` event.
+     */
+    const onKeyDown = (event) => {
+      list?.handleKeyDown(/** @type {KeyboardEvent} */ (event));
+    };
+
+    /**
+     * Close the list when the field loses the focus.
+     */
+    const onBlur = () => {
+      list?.close();
+    };
+
+    field.addEventListener('keydown', onKeyDown);
+    field.addEventListener('keyup', refresh);
+    field.addEventListener('input', refresh);
+    field.addEventListener('mouseup', refresh);
+    field.addEventListener('blur', onBlur);
+
+    return () => {
+      field.removeEventListener('keydown', onKeyDown);
+      field.removeEventListener('keyup', refresh);
+      field.removeEventListener('input', refresh);
+      field.removeEventListener('mouseup', refresh);
+      field.removeEventListener('blur', onBlur);
+      list?.close();
+    };
+  });
+</script>
+
+<EmojiSuggestions bind:this={list} {getAnchorRect} onSelect={insertEmoji} ariaOwner={element} />

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

@@ -0,0 +1,25 @@
+export default EmojiAutocomplete;
+type EmojiAutocomplete = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+/**
+ * Emoji autocomplete for a plain `<input>` or `<textarea>`. Typing a colon followed by one or more
+ * characters, like `:smi`, brings up a list of matching emojis that can be inserted with a click or
+ * the Enter key, the same way it works on GitHub, Slack and other apps. This wires the field up to
+ * `<EmojiSuggestions>`, which owns the dropdown itself.
+ */
+declare const EmojiAutocomplete: import("svelte").Component<{
+    /**
+     * The field to attach the
+     * suggestions to.
+     */
+    element?: HTMLInputElement | HTMLTextAreaElement | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * The field to attach the
+     * suggestions to.
+     */
+    element?: HTMLInputElement | HTMLTextAreaElement | undefined;
+};

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

@@ -6,6 +6,8 @@
   @see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
 -->
 <script>
+  import EmojiAutocomplete from './emoji-autocomplete.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    * @import { CommonEventHandlers, InputEventHandlers } from '../../typedefs';
@@ -14,11 +16,14 @@
   /**
    * @typedef {object} Props
    * @property {string} [value] Input value.
+   * @property {HTMLTextAreaElement} [element] A reference to the `<textarea>` element.
    * @property {boolean} [flex] Make the text input container flexible.
    * @property {'ltr' | 'rtl' | 'auto'} [dir] The `dir` attribute on the `<textarea>` element.
    * @property {string} [name] The `name` attribute on the `<textarea>` element.
    * @property {boolean} [autoResize] Whether to automatically resize the `<textarea>` based on the
    * content.
+   * @property {boolean} [useEmojiAutocomplete] Whether to autocomplete emojis when the user
+   * types a shortcode, like `:smi`.
    * @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`
@@ -38,10 +43,12 @@
   let {
     /* eslint-disable prefer-const */
     value = $bindable(''),
+    element = $bindable(),
     flex = false,
     dir = undefined,
     name = undefined,
     autoResize = false,
+    useEmojiAutocomplete = false,
     class: className,
     hidden = false,
     disabled = false,
@@ -63,6 +70,7 @@
   {hidden}
 >
   <textarea
+    bind:this={element}
     {...restProps}
     {dir}
     {name}
@@ -78,6 +86,9 @@
   {#if autoResize}
     <div class="clone" aria-hidden="true" {dir}>{value}</div>
   {/if}
+  {#if useEmojiAutocomplete && !disabled && !readonly}
+    <EmojiAutocomplete {element} />
+  {/if}
 </div>
 
 <style>.text-area {

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

@@ -14,6 +14,10 @@ declare const TextArea: import("svelte").Component<import("../../typedefs").Keyb
      * Input value.
      */
     value?: string | undefined;
+    /**
+     * A reference to the `<textarea>` element.
+     */
+    element?: HTMLTextAreaElement | undefined;
     /**
      * Make the text input container flexible.
      */
@@ -31,6 +35,11 @@ declare const TextArea: import("svelte").Component<import("../../typedefs").Keyb
      * content.
      */
     autoResize?: boolean | undefined;
+    /**
+     * Whether to autocomplete emojis when the user
+     * types a shortcode, like `:smi`.
+     */
+    useEmojiAutocomplete?: boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -63,12 +72,16 @@ declare const TextArea: import("svelte").Component<import("../../typedefs").Keyb
      * Primary slot content.
      */
     children?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "value">;
+} & Record<string, any>, {}, "value" | "element">;
 type Props = {
     /**
      * Input value.
      */
     value?: string | undefined;
+    /**
+     * A reference to the `<textarea>` element.
+     */
+    element?: HTMLTextAreaElement | undefined;
     /**
      * Make the text input container flexible.
      */
@@ -86,6 +99,11 @@ type Props = {
      * content.
      */
     autoResize?: boolean | undefined;
+    /**
+     * Whether to autocomplete emojis when the user
+     * types a shortcode, like `:smi`.
+     */
+    useEmojiAutocomplete?: boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */

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

@@ -7,6 +7,7 @@
 <script>
   import { activateKeyShortcuts } from '@sveltia/utils/events';
   import TruncatedText from '../typography/truncated-text.svelte';
+  import EmojiAutocomplete from './emoji-autocomplete.svelte';
 
   /**
    * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
@@ -15,6 +16,8 @@
   /**
    * @typedef {object} Props
    * @property {string} [value] Input value.
+   * @property {boolean} [useEmojiAutocomplete] Whether to autocomplete emojis when the user
+   * types a shortcode, like `:smi`.
    */
 
   /**
@@ -33,6 +36,7 @@
     flex = false,
     monospace = false,
     debounce = false,
+    useEmojiAutocomplete = false,
     class: className,
     hidden = false,
     disabled = false,
@@ -118,6 +122,9 @@
     oninputcapture={handleInput}
     {@attach activateKeyShortcuts(keyShortcuts)}
   />
+  {#if useEmojiAutocomplete && !disabled && !readonly}
+    <EmojiAutocomplete {element} />
+  {/if}
   {#if ariaLabel && showInlineLabel}
     <span id="{id}-label" class="label" class:hidden={!!value} aria-hidden="true">
       <TruncatedText>

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

@@ -13,12 +13,22 @@ declare const TextInput: import("svelte").Component<TextInputProps & import("../
      * Input value.
      */
     value?: string | undefined;
+    /**
+     * Whether to autocomplete emojis when the user
+     * types a shortcode, like `:smi`.
+     */
+    useEmojiAutocomplete?: boolean | undefined;
 } & Record<string, any>, {}, "value" | "element">;
 type Props = {
     /**
      * Input value.
      */
     value?: string | undefined;
+    /**
+     * Whether to autocomplete emojis when the user
+     * types a shortcode, like `:smi`.
+     */
+    useEmojiAutocomplete?: boolean | undefined;
 };
 import type { TextInputProps } from '../../typedefs';
 import type { InputEventHandlers } from '../../typedefs';

package/dist/locales/ar.yaml

@@ -18,6 +18,9 @@ expand: توسيع
 # Infobar/toast dismiss button label
 dismiss: تجاهل
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: اقتراحات الرموز التعبيرية
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/bg.yaml

@@ -18,6 +18,9 @@ expand: Разгъни
 # Infobar/toast dismiss button label
 dismiss: Отхвърли
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Предложения за емоджи
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/ca.yaml

@@ -18,6 +18,9 @@ expand: Desplega
 # Infobar/toast dismiss button label
 dismiss: Descarta
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Suggeriments d’emoji
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/cs.yaml

@@ -18,6 +18,9 @@ expand: Rozbalit
 # Infobar/toast dismiss button label
 dismiss: Zavřít
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Návrhy emodži
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/el.yaml

@@ -18,6 +18,9 @@ expand: Ανάπτυξη
 # Infobar/toast dismiss button label
 dismiss: Παράβλεψη
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Προτάσεις emoji
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/en-CA.yaml

@@ -18,6 +18,9 @@ expand: Expand
 # Infobar/toast dismiss button label
 dismiss: Dismiss
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Emoji Suggestions
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/en-GB.yaml

@@ -18,6 +18,9 @@ expand: Expand
 # Infobar/toast dismiss button label
 dismiss: Dismiss
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Emoji Suggestions
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/en-US.yaml

@@ -18,6 +18,9 @@ expand: Expand
 # Infobar/toast dismiss button label
 dismiss: Dismiss
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Emoji Suggestions
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/es-CO.yaml

@@ -0,0 +1,116 @@
+# Dialog action button labels
+ok: OK
+cancel: Cancelar
+close: Cerrar
+
+# Button to clear content, e.g. search input or calendar date
+clear: Limpiar
+
+# Text editor dialog buttons for link/image insertion
+insert: Insertar
+update: Actualizar
+remove: Quitar
+
+# Combobox dropdown toggle button aria-labels
+collapse: Contraer
+expand: Expandir
+
+# Infobar/toast dismiss button label
+dismiss: Descartar
+
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Sugerencias de emojis
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Año
+  previous_decade: Década anterior
+  next_decade: Década siguiente
+  month: Mes
+  previous_month: Mes anterior
+  next_month: Mes siguiente
+  # “Today” button label in footer
+  today: Hoy
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'Opciones de {$name}'
+  # Dropdown toggle aria-label
+  more_options: Más opciones
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Selecciona una opción…
+  # Filter input aria-label
+  filter_options: Filtrar opciones
+  # Empty state message when filter has no matches
+  no_matching_options: No se encontraron opciones coincidentes
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Aumentar
+  decrease: Disminuir
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Mostrar la contraseña
+  hide_password: Ocultar la contraseña
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Mostrar el secreto
+  hide_secret: Ocultar el secreto
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Opciones seleccionadas
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'Quitar {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Editor de texto
+  code_editor: Editor de código
+  # Block style menu button and menu aria-labels
+  text_style_options: Opciones de estilo de texto
+  show_text_style_options: Mostrar las opciones de estilo de texto
+  # Block style menu items
+  paragraph: Párrafo
+  heading_1: Encabezado 1
+  heading_2: Encabezado 2
+  heading_3: Encabezado 3
+  heading_4: Encabezado 4
+  heading_5: Encabezado 5
+  heading_6: Encabezado 6
+  bulleted_list: Lista con viñetas
+  numbered_list: Lista numerada
+  blockquote: Cita
+  code_block: Bloque de código
+  # Inline style button aria-labels
+  bold: Negrita
+  italic: Cursiva
+  strikethrough: Tachado
+  code: Código
+  link: Enlace
+  # Link dialog title
+  insert_link: Insertar enlace
+  update_link: Actualizar enlace
+  # Link dialog input field labels
+  text: Texto
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Editar en Markdown
+  # Error message when rich text conversion fails
+  converter_error: No se pudo activar el modo de texto enriquecido. Usa el editor de texto sin formato en su lugar.
+  # Language selector aria-label
+  language: Idioma
+  # Plain text mode option in language selector
+  plain_text: Texto sin formato

package/dist/locales/fi.yaml

@@ -18,6 +18,9 @@ expand: Näytä
 # Infobar/toast dismiss button label
 dismiss: Hylkää
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Emoji-ehdotukset
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/fr.yaml

@@ -18,6 +18,9 @@ expand: Développer
 # Infobar/toast dismiss button label
 dismiss: Ignorer
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Suggestions d’émojis
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/ja.yaml

@@ -18,6 +18,9 @@ expand: 広げる
 # Infobar/toast dismiss button label
 dismiss: 閉じる
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: 絵文字の候補
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/ko.yaml

@@ -18,6 +18,9 @@ expand: 펼치기
 # Infobar/toast dismiss button label
 dismiss: 닫기
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: 이모지 제안
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels