@sveltia/ui 0.20.2 → 0.22.0

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

@@ -0,0 +1,288 @@
+<script>
+  import { getContext, onMount } from 'svelte';
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [value] - Input value.
+   * @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`
+   * attribute.
+   * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+   * `aria-readonly` attribute.
+   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+   * `aria-required` attribute.
+   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+   * `aria-invalid` attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /**
+   * Text editor state.
+   * @type {import('../../typedefs').TextEditorState}
+   */
+  const { editor, editorId, selectionBlockType, selectionInlineTypes, hasConverterError } =
+    getContext('state');
+
+  /**
+   * Reference to the Lexical editor root element.
+   * @type {HTMLElement | undefined}
+   */
+  let lexicalRoot = $state();
+
+  const editable = $derived(!(disabled || readonly));
+
+  $effect(() => {
+    $editor?.setEditable(editable);
+  });
+
+  /**
+   * Update {@link value} and other state variables whenever the editor content is updated.
+   * @param {Event} event - `Update` custom event.
+   */
+  const onUpdate = (event) => {
+    if ($hasConverterError) {
+      return;
+    }
+
+    const { detail } = /** @type {CustomEvent} */ (event);
+    const newValue = detail.value;
+
+    if (value !== newValue) {
+      value = newValue;
+    }
+
+    $selectionBlockType = detail.selectionBlockType;
+    $selectionInlineTypes = detail.selectionInlineTypes;
+  };
+
+  /**
+   * Listen to `click` events on the editor. Ignore a click on a link.
+   * @param {MouseEvent} event - `click` event.
+   */
+  const onClick = (event) => {
+    if (/** @type {HTMLElement} */ (event.target)?.matches('a')) {
+      event.preventDefault();
+    }
+  };
+
+  onMount(() => {
+    lexicalRoot?.addEventListener('Update', onUpdate);
+    lexicalRoot?.addEventListener('click', onClick);
+
+    return () => {
+      lexicalRoot?.removeEventListener('Update', onUpdate);
+      lexicalRoot?.removeEventListener('click', onClick);
+    };
+  });
+
+  $effect(() => {
+    if ($editor && lexicalRoot) {
+      $editor.setRootElement(lexicalRoot);
+    }
+  });
+</script>
+
+<div
+  bind:this={lexicalRoot}
+  {...restProps}
+  role="textbox"
+  aria-multiline="true"
+  aria-hidden={hidden}
+  aria-disabled={disabled}
+  aria-readonly={readonly}
+  aria-required={required}
+  aria-invalid={invalid}
+  class="lexical-root"
+  id="{$editorId}-lexical-root"
+  contenteditable={editable}
+  {hidden}
+></div>
+
+<style>.lexical-root {
+  border: 1px solid var(--sui-textbox-border-color);
+  border-radius: 0 0 var(--sui-textbox-border-radius) var(--sui-textbox-border-radius) !important;
+  padding: var(--sui-textbox-multiline-padding);
+  min-height: 8em;
+  color: var(--sui-textbox-foreground-color);
+  background-color: var(--sui-textbox-background-color);
+  font-family: var(--sui-textbox-font-family);
+  font-size: var(--sui-textbox-font-size);
+  line-height: var(--sui-textbox-multiline-line-height);
+}
+.lexical-root:focus-visible {
+  outline: 0;
+}
+.lexical-root[aria-invalid=true] {
+  border-color: var(--sui-error-border-color);
+}
+.lexical-root > :global(:first-child) {
+  margin-top: 0;
+}
+.lexical-root > :global(:last-child) {
+  margin-bottom: 0;
+}
+.lexical-root :global(strong.italic) {
+  font-style: italic;
+}
+.lexical-root :global(li.nested) {
+  list-style-type: none;
+}
+.lexical-root :global(.code-block) {
+  position: relative;
+  display: block;
+  padding: 8px 8px 8px 56px;
+  background-color: var(--sui-code-background-color);
+  overflow-x: auto;
+  white-space: pre;
+}
+.lexical-root :global(.code-block:not(:first-child)) {
+  margin-top: 1em;
+}
+.lexical-root :global(.code-block:not(:last-child)) {
+  margin-bottom: 1em;
+}
+.lexical-root :global(.code-block::before) {
+  position: absolute;
+  inset: 0 auto 0 0;
+  content: attr(data-gutter);
+  padding: 8px;
+  min-width: 40px;
+  color: var(--sui-tertiary-foreground-color);
+  background-color: var(--sui-secondary-background-color);
+  text-align: right;
+}
+.lexical-root :global([data-lexical-text=true]) {
+  cursor: text;
+}
+
+:root[data-theme=light] .lexical-root :global(.token.comment),
+:root[data-theme=light] .lexical-root :global(.token.prolog),
+:root[data-theme=light] .lexical-root :global(.token.doctype),
+:root[data-theme=light] .lexical-root :global(.token.cdata) {
+  color: slategray;
+}
+:root[data-theme=light] .lexical-root :global(.token.punctuation) {
+  color: #999;
+}
+:root[data-theme=light] .lexical-root :global(.token.namespace) {
+  opacity: 0.7;
+}
+:root[data-theme=light] .lexical-root :global(.token.property),
+:root[data-theme=light] .lexical-root :global(.token.tag),
+:root[data-theme=light] .lexical-root :global(.token.boolean),
+:root[data-theme=light] .lexical-root :global(.token.number),
+:root[data-theme=light] .lexical-root :global(.token.constant),
+:root[data-theme=light] .lexical-root :global(.token.symbol),
+:root[data-theme=light] .lexical-root :global(.token.deleted) {
+  color: #905;
+}
+:root[data-theme=light] .lexical-root :global(.token.selector),
+:root[data-theme=light] .lexical-root :global(.token.attr-name),
+:root[data-theme=light] .lexical-root :global(.token.string),
+:root[data-theme=light] .lexical-root :global(.token.char),
+:root[data-theme=light] .lexical-root :global(.token.builtin),
+:root[data-theme=light] .lexical-root :global(.token.inserted) {
+  color: #690;
+}
+:root[data-theme=light] .lexical-root :global(.token.operator),
+:root[data-theme=light] .lexical-root :global(.token.entity),
+:root[data-theme=light] .lexical-root :global(.token.url),
+:root[data-theme=light] .lexical-root :global(.language-css) :global(.token.string),
+:root[data-theme=light] .lexical-root :global(.style) :global(.token.string) {
+  color: #9a6e3a;
+}
+:root[data-theme=light] .lexical-root :global(.token.atrule),
+:root[data-theme=light] .lexical-root :global(.token.attr-value),
+:root[data-theme=light] .lexical-root :global(.token.keyword) {
+  color: #07a;
+}
+:root[data-theme=light] .lexical-root :global(.token.function),
+:root[data-theme=light] .lexical-root :global(.token.class-name) {
+  color: #dd4a68;
+}
+:root[data-theme=light] .lexical-root :global(.token.regex),
+:root[data-theme=light] .lexical-root :global(.token.important),
+:root[data-theme=light] .lexical-root :global(.token.variable) {
+  color: #e90;
+}
+
+:root[data-theme=dark] .lexical-root :global(.token.comment),
+:root[data-theme=dark] .lexical-root :global(.token.block-comment),
+:root[data-theme=dark] .lexical-root :global(.token.prolog),
+:root[data-theme=dark] .lexical-root :global(.token.doctype),
+:root[data-theme=dark] .lexical-root :global(.token.cdata) {
+  color: #999;
+}
+:root[data-theme=dark] .lexical-root :global(.token.punctuation) {
+  color: #ccc;
+}
+:root[data-theme=dark] .lexical-root :global(.token.tag),
+:root[data-theme=dark] .lexical-root :global(.token.attr-name),
+:root[data-theme=dark] .lexical-root :global(.token.namespace),
+:root[data-theme=dark] .lexical-root :global(.token.deleted) {
+  color: #e2777a;
+}
+:root[data-theme=dark] .lexical-root :global(.token.function-name) {
+  color: #6196cc;
+}
+:root[data-theme=dark] .lexical-root :global(.token.boolean),
+:root[data-theme=dark] .lexical-root :global(.token.number),
+:root[data-theme=dark] .lexical-root :global(.token.function) {
+  color: #f08d49;
+}
+:root[data-theme=dark] .lexical-root :global(.token.property),
+:root[data-theme=dark] .lexical-root :global(.token.class-name),
+:root[data-theme=dark] .lexical-root :global(.token.constant),
+:root[data-theme=dark] .lexical-root :global(.token.symbol) {
+  color: #f8c555;
+}
+:root[data-theme=dark] .lexical-root :global(.token.selector),
+:root[data-theme=dark] .lexical-root :global(.token.important),
+:root[data-theme=dark] .lexical-root :global(.token.atrule),
+:root[data-theme=dark] .lexical-root :global(.token.keyword),
+:root[data-theme=dark] .lexical-root :global(.token.builtin) {
+  color: #cc99cd;
+}
+:root[data-theme=dark] .lexical-root :global(.token.string),
+:root[data-theme=dark] .lexical-root :global(.token.char),
+:root[data-theme=dark] .lexical-root :global(.token.attr-value),
+:root[data-theme=dark] .lexical-root :global(.token.regex),
+:root[data-theme=dark] .lexical-root :global(.token.variable) {
+  color: #7ec699;
+}
+:root[data-theme=dark] .lexical-root :global(.token.operator),
+:root[data-theme=dark] .lexical-root :global(.token.entity),
+:root[data-theme=dark] .lexical-root :global(.token.url) {
+  color: #67cdcc;
+}
+:root[data-theme=dark] .lexical-root :global(.token.important),
+:root[data-theme=dark] .lexical-root :global(.token.bold) {
+  font-weight: bold;
+}
+:root[data-theme=dark] .lexical-root :global(.token.italic) {
+  font-style: italic;
+}
+:root[data-theme=dark] .lexical-root :global(.token.entity) {
+  cursor: help;
+}
+:root[data-theme=dark] .lexical-root :global(.token.inserted) {
+  color: green;
+}</style>

package/{package → dist}/components/text-editor/text-editor.svelte

@@ -17,11 +17,12 @@
 
   /**
    * @typedef {object} Props
-   * @property {string | undefined} [value] - Input value.
+   * @property {string} [value] - Input value.
    * @property {boolean} [flex] - Make the text input container flexible.
    * @property {import('../../typedefs').TextEditorMode[]} [modes] - Enabled modes.
    * @property {(import('../../typedefs').TextEditorBlockType |
    * import('../../typedefs').TextEditorInlineType)[]} [buttons] - Enabled buttons.
+   * @property {import('../../typedefs').TextEditorComponent[]} [components] - Editor components.
    * @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`
@@ -44,6 +45,7 @@
     flex = false,
     modes = ['rich-text', 'plain-text'],
     buttons = [...inlineButtonTypes, ...blockButtonTypes],
+    components = [],
     hidden = false,
     disabled = false,
     readonly = false,
@@ -69,27 +71,33 @@
    * restore the original value when there is an error while conversion.
    */
   const convertMarkdown = async () => {
-    if (!$editor) {
+    if (!$editor?.getRootElement()) {
       return;
     }
 
     const originalValue = inputValue;
 
     try {
-      // We should avoid an empty editor; there should be at least one `<p>`, so give it an empty
-      // string if the `value` is `undefined`
-      // @see https://github.com/facebook/lexical/issues/2308
       await convertMarkdownToLexical($editor, inputValue ?? '');
-    } catch {
+    } catch (ex) {
       $hasConverterError = true;
       inputValue = originalValue;
+      // eslint-disable-next-line no-console
+      console.error(ex);
     }
   };
 
   $effect(() => {
-    if (!$editor) {
-      return;
+    // We should avoid an empty editor; there should be at least one `<p>`, so give it an empty
+    // string if the `value` is `undefined`
+    // @see https://github.com/facebook/lexical/issues/2308
+    if ($editor?.getEditorState().isEmpty()) {
+      convertMarkdownToLexical($editor, '');
     }
+  });
+
+  $effect(() => {
+    void $editor;
 
     const newValue = value;
 
@@ -129,7 +137,7 @@
 
   // The editor has to be initialized in the browser
   onMount(() => {
-    $editor = initEditor();
+    $editor = initEditor({ components });
   });
 
   setContext(
@@ -143,6 +151,7 @@
       useRichText,
       hasConverterError,
       enabledButtons: buttons,
+      components,
       convertMarkdown,
     }),
   );

package/{package → dist}/components/text-editor/text-editor.svelte.d.ts

@@ -21,6 +21,10 @@ declare const TextEditor: import("svelte").Component<{
      * - Enabled buttons.
      */
     buttons?: (import("../../typedefs").TextEditorBlockType | import("../../typedefs").TextEditorInlineType)[] | undefined;
+    /**
+     * - Editor components.
+     */
+    components?: import("../../typedefs").TextEditorComponent[] | undefined;
     /**
      * - The `class` attribute on the wrapper element.
      */
@@ -71,6 +75,10 @@ type Props = {
      * - Enabled buttons.
      */
     buttons?: (import("../../typedefs").TextEditorBlockType | import("../../typedefs").TextEditorInlineType)[] | undefined;
+    /**
+     * - Editor components.
+     */
+    components?: import("../../typedefs").TextEditorComponent[] | undefined;
     /**
      * - The `class` attribute on the wrapper element.
      */

package/{package → dist}/components/text-editor/toolbar/editor-toolbar.svelte

@@ -12,7 +12,9 @@
   import Menu from '../../menu/menu.svelte';
   import Toolbar from '../../toolbar/toolbar.svelte';
   import FormatTextButton from './format-text-button.svelte';
+  import InsertImageButton from './insert-image-button.svelte';
   import InsertLinkButton from './insert-link-button.svelte';
+  import InsertMenuButton from './insert-menu-button.svelte';
   import ToggleBlockMenuItem from './toggle-block-menu-item.svelte';
 
   /**
@@ -45,9 +47,13 @@
     useRichText,
     hasConverterError,
     enabledButtons,
+    components,
     convertMarkdown,
   } = getContext('state');
 
+  const imageComponent = $derived(components.find(({ id }) => id === 'image'));
+  const otherComponents = $derived(components.filter(({ id }) => id !== 'image'));
+
   /**
    * Enabled block level buttons.
    * @type {import('../../../typedefs').TextEditorBlockType[]}
@@ -100,6 +106,15 @@
         {/each}
       </ButtonGroup>
     {/if}
+    {#if components.length}
+      <Divider orientation="vertical" />
+      {#if imageComponent}
+        <InsertImageButton component={imageComponent} />
+      {/if}
+      {#if otherComponents.length}
+        <InsertMenuButton components={otherComponents} />
+      {/if}
+    {/if}
     <Spacer flex />
     {#if modes.length > 1}
       <Button

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

@@ -0,0 +1,43 @@
+<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';
+
+  /**
+   * @typedef {object} Props
+   * @property {import('../../../typedefs').TextEditorComponent} component - Image editor component.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    component,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /**
+   * Text editor state.
+   * @type {import('../../../typedefs').TextEditorState}
+   */
+  const { editor, editorId, useRichText } = getContext('state');
+</script>
+
+<Button
+  iconic
+  aria-label={component.label}
+  aria-controls="{$editorId}-lexical-root"
+  disabled={!$useRichText}
+  onclick={() => {
+    $editor.update(() => {
+      insertNodes([component.createNode(), createParagraphNode()]);
+    });
+  }}
+>
+  {#snippet startIcon()}
+    <Icon name={component.icon} />
+  {/snippet}
+</Button>

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

@@ -0,0 +1,17 @@
+export default InsertImageButton;
+type InsertImageButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const InsertImageButton: import("svelte").Component<{
+    /**
+     * - Image editor component.
+     */
+    component: import("../../../typedefs").TextEditorComponent;
+}, {}, "">;
+type Props = {
+    /**
+     * - Image editor component.
+     */
+    component: import("../../../typedefs").TextEditorComponent;
+};

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

@@ -0,0 +1,53 @@
+<script>
+  import { $insertNodes as insertNodes } from 'lexical';
+  import { getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  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';
+
+  /**
+   * @typedef {object} Props
+   * @property {import('../../../typedefs').TextEditorComponent[]} components - Editor components.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    components,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /**
+   * Text editor state.
+   * @type {import('../../../typedefs').TextEditorState}
+   */
+  const { editor, useRichText } = getContext('state');
+</script>
+
+<MenuButton disabled={!$useRichText} 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)}
+        <MenuItem
+          {label}
+          onclick={() => {
+            $editor.update(() => {
+              insertNodes([createNode()]);
+            });
+          }}
+        >
+          {#snippet startIcon()}
+            {#if icon}
+              <Icon name={icon} />
+            {/if}
+          {/snippet}
+        </MenuItem>
+      {/each}
+    </Menu>
+  {/snippet}
+</MenuButton>

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

@@ -0,0 +1,17 @@
+export default InsertMenuButton;
+type InsertMenuButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const InsertMenuButton: import("svelte").Component<{
+    /**
+     * - Editor components.
+     */
+    components: import("../../../typedefs").TextEditorComponent[];
+}, {}, "">;
+type Props = {
+    /**
+     * - Editor components.
+     */
+    components: import("../../../typedefs").TextEditorComponent[];
+};

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

@@ -1,4 +1,5 @@
 <script>
+  import { $createCodeNode as createCodeNode } from '@lexical/code';
   import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
   import {
     $createHeadingNode as createHeadingNode,
@@ -78,6 +79,12 @@
         setBlocksType(getSelection(), () => createQuoteNode());
       });
     }
+
+    if (type === 'code-block') {
+      $editor.update(() => {
+        setBlocksType(getSelection(), () => createCodeNode());
+      });
+    }
   };
 </script>
 

package/{package → dist}/components/text-field/number-input.svelte

@@ -13,8 +13,9 @@
 
   /**
    * @typedef {object} Props
-   * @property {number | undefined} [min] - Minimum allowed value.
-   * @property {number | undefined} [max] - Maximum allowed value.
+   * @property {number} [value] - Input value.
+   * @property {number} [min] - Minimum allowed value.
+   * @property {number} [max] - Maximum allowed value.
    * @property {number} [step] - Value to be added or removed when using the up/down arrow key or
    * button.
    * @property {import('svelte').Snippet} [increaseIcon] - Increase icon slot content.
@@ -48,41 +49,50 @@
 
   const id = generateElementId('input');
   let edited = $state(false);
+  let inputValue = $state('');
 
   const maximumFractionDigits = $derived(String(step).split('.')[1]?.length || 0);
-  const isMin = $derived(typeof min === 'number' && Number(value || 0) <= min);
-  const isMax = $derived(typeof max === 'number' && Number(value || 0) >= max);
+  const isMin = $derived(typeof min === 'number' && Number(inputValue || 0) <= min);
+  const isMax = $derived(typeof max === 'number' && Number(inputValue || 0) >= max);
 
   $effect(() => {
-    invalid =
-      (required && edited && (value === undefined || value === '')) ||
-      (value !== undefined &&
-        value !== '' &&
-        (Number.isNaN(Number(value)) ||
-          (typeof min === 'number' && Number(value || 0) < min) ||
-          (typeof max === 'number' && Number(value || 0) > max)));
+    const newValue = inputValue.trim() ? Number(inputValue) : NaN;
+
+    value = !Number.isNaN(newValue) ? newValue : undefined;
+  });
+
+  $effect(() => {
+    if (edited) {
+      invalid =
+        (required && (value === undefined || inputValue === '')) ||
+        (inputValue !== undefined &&
+          inputValue !== '' &&
+          (Number.isNaN(Number(inputValue)) ||
+            (typeof min === 'number' && Number(inputValue || 0) < min) ||
+            (typeof max === 'number' && Number(inputValue || 0) > max)));
+    }
   });
 
   /**
    * Decrease the number.
    */
   const decrease = () => {
-    if (isMin) {
+    if (isMin || Number.isNaN(Number(inputValue))) {
       return;
     }
 
-    value = Number(Number(value || 0) - step).toFixed(maximumFractionDigits);
+    inputValue = Number(Number(inputValue || 0) - step).toFixed(maximumFractionDigits);
   };
 
   /**
    * Increase the number.
    */
   const increase = () => {
-    if (isMax) {
+    if (isMax || Number.isNaN(Number(inputValue))) {
       return;
     }
 
-    value = Number(Number(value || 0) + step).toFixed(maximumFractionDigits);
+    inputValue = Number(Number(inputValue || 0) + step).toFixed(maximumFractionDigits);
   };
 </script>
 
@@ -134,7 +144,7 @@
     {...restProps}
     role="spinbutton"
     {id}
-    bind:value
+    bind:value={inputValue}
     spellcheck="false"
     {flex}
     {hidden}
@@ -164,6 +174,11 @@
         edited = true;
       }
     }}
+    oninput={() => {
+      if (!edited) {
+        edited = true;
+      }
+    }}
     {onChange}
   />
 </div>