@sveltia/ui 0.64.0 → 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

@@ -18,6 +18,9 @@ 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

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

package/dist/locales/nl.yaml

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

package/dist/locales/pl.yaml

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

package/dist/locales/pt-BR.yaml

@@ -18,6 +18,9 @@ expand: Expandir
 # Infobar/toast dismiss button label
 dismiss: Dispensar
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Sugestões de emoji
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/pt-PT.yaml

@@ -18,6 +18,9 @@ expand: Expandir
 # Infobar/toast dismiss button label
 dismiss: Dispensar
 
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Sugestões de emoji
+
 # Calendar component
 calendar:
   # View switcher group aria-labels and navigation button aria-labels

package/dist/locales/ru.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/tr.yaml

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

package/dist/locales/uk.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/zh-CN.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