@sveltia/ui 0.11.1 → 0.12.1

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

@@ -0,0 +1,231 @@
+<script>
+  import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+  import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+  import { isURL } from '@sveltia/utils/string';
+  import {
+    COMMAND_PRIORITY_NORMAL,
+    KEY_DOWN_COMMAND,
+    $getPreviousSelection as getPreviousSelection,
+    $getSelection as getSelection,
+    $getTextContent as getTextContent,
+    $isRangeSelection as isRangeSelection,
+  } from 'lexical';
+  import { getContext, onMount } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import Button from '../../button/button.svelte';
+  import Dialog from '../../dialog/dialog.svelte';
+  import Icon from '../../icon/icon.svelte';
+  import { availableButtons } from '..';
+  import TextInput from '../../text-field/text-input.svelte';
+  import { isMac, matchShortcuts } from '../../../services/events';
+
+  /**
+   * Button type.
+   */
+  const type = 'link';
+
+  /**
+   * Text editor state.
+   * @type {TextEditorState}
+   */
+  const { editor, editorId, selectionInlineTypes, useRichText } = getContext('state');
+
+  let openDialog = false;
+  /** @type {'create' | 'update' | 'remove'} */
+  let dialogMode = 'create';
+  let hasAnchor = false;
+  let anchorURL = '';
+  let anchorText = '';
+
+  /**
+   * Create a new link by showing a dialog to accept a URL and optionally text.
+   */
+  const createLink = () => {
+    $editor.getEditorState().read(() => {
+      const textContent = getTextContent().trim();
+
+      anchorURL = isURL(textContent) ? textContent : '';
+      hasAnchor = !!textContent;
+      dialogMode = 'create';
+      openDialog = true;
+    });
+  };
+
+  /**
+   * Remove an existing link.
+   */
+  const removeLink = () => {
+    $editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+  };
+
+  /**
+   * Update an existing link.
+   */
+  const updateLink = () => {
+    $editor.getEditorState().read(() => {
+      const selection = getSelection();
+
+      if (isRangeSelection(selection)) {
+        const anchor = selection.anchor.getNode();
+        const parent = anchor instanceof LinkNode ? anchor : getNearestNodeOfType(anchor, LinkNode);
+        const url = parent?.getURL();
+
+        if (url) {
+          hasAnchor = true;
+          anchorURL = url;
+          dialogMode = 'update';
+          openDialog = true;
+
+          return;
+        }
+      }
+
+      // Can’t update for some reason; remove it
+      removeLink();
+    });
+  };
+
+  /**
+   * Handle `click` event fired on the Link button. If a link is selected, update it. Otherwise,
+   * create a new link.
+   */
+  const onButtonClick = () => {
+    if ($selectionInlineTypes.includes(type)) {
+      updateLink();
+    } else {
+      createLink();
+    }
+  };
+
+  /**
+   * Handle `keydown` event fired on the input fields on the dialog.
+   * @param {KeyboardEvent} event - `keydown` event.
+   */
+  const onInputKeyDown = (event) => {
+    if (matchShortcuts(event, 'Enter') && isURL(anchorURL)) {
+      openDialog = false;
+    }
+  };
+
+  /**
+   * Handle `close` event fired on the dialog. Insert a link with the given URL and optionally text.
+   * @param {CustomEvent} event - `close` event.
+   * @see https://github.com/facebook/lexical/discussions/3013
+   */
+  const onDialogClose = async (event) => {
+    if (event.detail !== 'cancel' && dialogMode !== 'remove') {
+      if (!hasAnchor) {
+        anchorText = anchorText.trim();
+        anchorText ||= anchorURL;
+
+        await new Promise((resolve) => {
+          $editor.update(() => {
+            const selection = getSelection() ?? getPreviousSelection()?.clone();
+
+            if (isRangeSelection(selection)) {
+              const { anchor, focus } = selection;
+
+              selection.insertText(anchorText);
+              anchor.offset -= anchorText.length;
+              focus.offset = anchor.offset + anchorText.length;
+
+              resolve(void 0);
+            }
+          });
+        });
+      }
+
+      $editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
+    }
+
+    anchorURL = '';
+    anchorText = '';
+  };
+
+  onMount(() => {
+    // Open the dialog with a keyboard shortcut: Accel+K
+    $editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        if (matchShortcuts(event, isMac() ? 'Meta+K' : 'Ctrl+K')) {
+          event.preventDefault();
+          onButtonClick();
+        }
+
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    );
+  });
+</script>
+
+<Button
+  iconic
+  aria-label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
+  aria-controls="{$editorId}-lexical-root"
+  disabled={!$useRichText}
+  pressed={$selectionInlineTypes.includes(type)}
+  on:click={() => {
+    onButtonClick();
+  }}
+>
+  <Icon slot="start-icon" name={availableButtons[type].icon} />
+</Button>
+
+<Dialog
+  title={dialogMode === 'create'
+    ? $_('_sui.text_editor.insert_link')
+    : $_('_sui.text_editor.update_link')}
+  bind:open={openDialog}
+  bind:value={anchorURL}
+  okDisabled={!isURL(anchorURL)}
+  okLabel={dialogMode === 'create' ? $_('_sui.insert') : $_('_sui.update')}
+  on:close={(event) => {
+    onDialogClose(event);
+  }}
+>
+  {#if !hasAnchor}
+    <div role="none">
+      <!-- svelte-ignore a11y-label-has-associated-control -->
+      <label>
+        {$_('_sui.text_editor.text')}<br />
+        <TextInput
+          autofocus
+          bind:value={anchorText}
+          flex
+          on:keydown={(event) => {
+            onInputKeyDown(event);
+          }}
+        />
+      </label>
+    </div>
+  {/if}
+  <div role="none">
+    <!-- svelte-ignore a11y-label-has-associated-control -->
+    <label>
+      {$_('_sui.text_editor.url')}<br />
+      <TextInput
+        autofocus={hasAnchor || undefined}
+        bind:value={anchorURL}
+        flex
+        aria-label="URL"
+        on:keydown={(event) => {
+          onInputKeyDown(event);
+        }}
+      />
+    </label>
+  </div>
+  <svelte:fragment slot="footer-extra">
+    {#if dialogMode !== 'create'}
+      <Button
+        variant="secondary"
+        label={$_('_sui.remove')}
+        on:click={() => {
+          removeLink();
+          dialogMode = 'remove';
+          openDialog = false;
+        }}
+      />
+    {/if}
+  </svelte:fragment>
+</Dialog>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  InsertLinkButtonProps */
+/** @typedef {typeof __propDef.events}  InsertLinkButtonEvents */
+/** @typedef {typeof __propDef.slots}  InsertLinkButtonSlots */
+export default class InsertLinkButton extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InsertLinkButtonProps = typeof __propDef.props;
+export type InsertLinkButtonEvents = typeof __propDef.events;
+export type InsertLinkButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,83 @@
+<script>
+  import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
+  import {
+    $createHeadingNode as createHeadingNode,
+    $createQuoteNode as createQuoteNode,
+  } from '@lexical/rich-text';
+  import { $setBlocksType as setBlocksType } from '@lexical/selection';
+  import {
+    $createParagraphNode as createParagraphNode,
+    $getSelection as getSelection,
+  } from 'lexical';
+  import { getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { availableButtons } from '..';
+  import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
+
+  /**
+   * Button type.
+   * @type {TextEditorBlockType}
+   */
+  export let type;
+
+  /**
+   * Text editor state.
+   * @type {TextEditorState}
+   */
+  const { editor, selectionBlockType } = getContext('state');
+
+  /**
+   * Whether the current selection matches the button {@link type}.
+   */
+  $: selectionTypeMatches = $selectionBlockType === type;
+
+  /**
+   * Change the current selection’s type to {@link type}.
+   */
+  const changeBlockType = () => {
+    const [, headingLevel] = type.match(/^heading-(\d)$/) ?? [];
+
+    if (headingLevel) {
+      $editor.update(() => {
+        setBlocksType(getSelection(), () =>
+          createHeadingNode(
+            /** @type {import('@lexical/rich-text').HeadingTagType} */ (`h${headingLevel}`),
+          ),
+        );
+      });
+    }
+
+    if (type === 'paragraph') {
+      $editor.update(() => {
+        setBlocksType(getSelection(), () => createParagraphNode());
+      });
+    }
+
+    if (type === 'bulleted-list') {
+      $editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    }
+
+    if (type === 'numbered-list') {
+      $editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    }
+
+    if (type === 'blockquote') {
+      $editor.update(() => {
+        setBlocksType(getSelection(), () => createQuoteNode());
+      });
+    }
+  };
+</script>
+
+{#key selectionTypeMatches}
+  <MenuItemCheckbox
+    iconName={availableButtons[type].icon}
+    label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
+    checked={selectionTypeMatches}
+    on:click={() => {
+      if (!selectionTypeMatches) {
+        changeBlockType();
+      }
+    }}
+  />
+{/key}

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ToggleBlockMenuItemProps */
+/** @typedef {typeof __propDef.events}  ToggleBlockMenuItemEvents */
+/** @typedef {typeof __propDef.slots}  ToggleBlockMenuItemSlots */
+export default class ToggleBlockMenuItem extends SvelteComponent<{
+    type: TextEditorBlockType;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ToggleBlockMenuItemProps = typeof __propDef.props;
+export type ToggleBlockMenuItemEvents = typeof __propDef.events;
+export type ToggleBlockMenuItemSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type: TextEditorBlockType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -5,8 +5,8 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -67,7 +67,7 @@
    */
   export let step = 1;
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
   let edited = false;
 
   $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;

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

@@ -9,16 +9,16 @@
 export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    max?: number | undefined;
-    min?: number | undefined;
-    required?: boolean | undefined;
-    step?: number | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
+    required?: boolean | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
 }, {
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
@@ -44,16 +44,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        required?: boolean | undefined;
-        step?: number | undefined;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
+        required?: boolean | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
     };
     events: {
         keydown: KeyboardEvent;

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

@@ -6,8 +6,8 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -54,7 +54,7 @@
    */
   export let value = undefined;
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
 
   /**
    * @type {TextInput}

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

@@ -10,13 +10,13 @@
 export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    required?: boolean | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
+    required?: boolean | undefined;
 }, {
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
@@ -39,13 +39,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        required?: boolean | undefined;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
+        required?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;

package/package/components/text-field/search-bar.svelte

@@ -8,8 +8,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -56,7 +56,7 @@
    */
   export let value = undefined;
 
-  const id = getRandomId('searchbox');
+  const id = generateElementId('searchbox');
   /**
    * Reference to the `TextInput` component.
    * @type {TextInput | undefined}
@@ -114,7 +114,7 @@
       on:click={() => {
         value = '';
         input?.focus();
-        window.requestIdleCallback(() => {
+        globalThis.requestIdleCallback(() => {
           input?.dispatchEvent(new KeyboardEvent('input'));
           input?.dispatchEvent(new KeyboardEvent('keypress'));
           input?.dispatchEvent(new KeyboardEvent('change'));

package/package/components/text-field/search-bar.svelte.d.ts

@@ -10,14 +10,14 @@
 export default class SearchBar extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     focus?: (() => void) | undefined;
     invalid?: boolean | undefined;
-    required?: boolean | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
+    required?: boolean | undefined;
 }, {
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
@@ -66,14 +66,14 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         focus?: (() => void) | undefined;
         invalid?: boolean | undefined;
-        required?: boolean | undefined;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
+        required?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;

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

@@ -95,6 +95,9 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-multiline-min-width);
 }
+.text-area[hidden] {
+  display: none;
+}
 .text-area.flex {
   width: -moz-available;
   width: -webkit-fill-available;

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

@@ -11,13 +11,13 @@ export default class TextArea extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    required?: boolean | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
+    required?: boolean | undefined;
     autoResize?: boolean | undefined;
 }, {
     keydown: KeyboardEvent;
@@ -38,13 +38,13 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        required?: boolean | undefined;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
+        required?: boolean | undefined;
         autoResize?: boolean | undefined;
     };
     events: {

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

@@ -7,8 +7,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { activateKeyShortcuts } from '../../services/events';
-  import { getRandomId } from '../../services/util';
 
   /**
    * Reference to the `<input>` element.
@@ -85,7 +85,7 @@
    */
   export let inputmode = 'text';
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
 
   $: ariaLabel = $$restProps['aria-label'];
 </script>

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

@@ -10,9 +10,8 @@ export default class TextInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    required?: boolean | undefined;
+    disabled?: boolean | undefined;
     value?: string | number | undefined;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
     hidden?: boolean | undefined;
@@ -20,6 +19,7 @@ export default class TextInput extends SvelteComponent<{
     readonly?: boolean | undefined;
     keyShortcuts?: string | undefined;
     flex?: boolean | undefined;
+    required?: boolean | undefined;
     showInlineLabel?: boolean | undefined;
     inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" | undefined;
 }, {
@@ -83,9 +83,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        required?: boolean | undefined;
+        disabled?: boolean | undefined;
         value?: string | number | undefined;
         role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
         hidden?: boolean | undefined;
@@ -93,6 +92,7 @@ declare const __propDef: {
         readonly?: boolean | undefined;
         keyShortcuts?: string | undefined;
         flex?: boolean | undefined;
+        required?: boolean | undefined;
         showInlineLabel?: boolean | undefined;
         inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url" | undefined;
     };

package/package/components/toast/toast.svelte

@@ -82,10 +82,10 @@
     void id;
     void show;
     void duration;
-    window.clearTimeout(timerId);
+    globalThis.clearTimeout(timerId);
 
     if (show && duration) {
-      timerId = window.setTimeout(() => {
+      timerId = globalThis.setTimeout(() => {
         show = false;
       }, duration);
     }