@sveltia/ui 0.11.1 → 0.12.1

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

@@ -0,0 +1,123 @@
+<script>
+  import { getContext, onMount } from 'svelte';
+
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Whether to disable the widget. An alias of `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Input value.
+   * @type {string | undefined}
+   */
+  export let value = undefined;
+
+  /**
+   * Text editor state.
+   * @type {TextEditorState}
+   */
+  const {
+    editor,
+    editorId,
+    selectionBlockType,
+    selectionInlineTypes,
+    useRichText,
+    hasConverterError,
+  } = getContext('state');
+
+  /**
+   * Reference to the Lexical editor root element.
+   * @type {HTMLElement | undefined}
+   */
+  let lexicalRoot = undefined;
+
+  $: editable = !(disabled || readonly);
+  $: $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(() => {
+    if (lexicalRoot) {
+      $editor.setRootElement(lexicalRoot);
+      lexicalRoot.addEventListener('Update', onUpdate);
+      lexicalRoot.addEventListener('click', onClick);
+    }
+
+    return () => {
+      lexicalRoot?.removeEventListener('Update', onUpdate);
+      lexicalRoot?.removeEventListener('click', onClick);
+    };
+  });
+</script>
+
+<div
+  role="textbox"
+  aria-multiline="true"
+  aria-disabled={disabled}
+  aria-readonly={readonly}
+  class="lexical-root"
+  id="{$editorId}-lexical-root"
+  contenteditable={editable}
+  bind:this={lexicalRoot}
+  hidden={!$useRichText}
+/>
+
+<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: 16px;
+  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 > :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([data-lexical-text="true"]) {
+  cursor: text;
+}</style>

package/package/components/text-editor/lexical-root.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  LexicalRootProps */
+/** @typedef {typeof __propDef.events}  LexicalRootEvents */
+/** @typedef {typeof __propDef.slots}  LexicalRootSlots */
+export default class LexicalRoot extends SvelteComponent<{
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    readonly?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LexicalRootProps = typeof __propDef.props;
+export type LexicalRootEvents = typeof __propDef.events;
+export type LexicalRootSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        value?: string | undefined;
+        readonly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,154 @@
+<!--
+  @component
+  A rich text editor based on Lexical.
+-->
+<script>
+  import { generateElementId } from '@sveltia/utils/element';
+  import { onMount, setContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { writable } from 'svelte/store';
+  import Alert from '../alert/alert.svelte';
+  import { blockButtonTypes, inlineButtonTypes } from './';
+  import {
+    convertMarkdown as convertMarkdownToLexical,
+    initEditor,
+  } from './core';
+  import LexicalRoot from './lexical-root.svelte';
+  import EditorToolbar from './toolbar/editor-toolbar.svelte';
+  import TextArea from '../text-field/text-area.svelte';
+  import Toast from '../toast/toast.svelte';
+
+  /**
+   * Make the text input container flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Whether to disable the widget. An alias of `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
+   * @type {boolean}
+   */
+  export let required = false;
+  /**
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * Input value.
+   * @type {string | undefined}
+   */
+  export let value = undefined;
+  /**
+   * Enabled modes.
+   * @type {TextEditorMode[]}
+   */
+  export let modes = ['rich-text', 'plain-text'];
+  /**
+   * Enabled buttons.
+   * @type {(TextEditorBlockType | TextEditorInlineType)[]}
+   */
+  export let buttons = [...inlineButtonTypes, ...blockButtonTypes];
+
+  const editor = writable(initEditor());
+  const selectionBlockType = writable('paragraph');
+  const selectionInlineTypes = writable([]);
+  const editorId = writable(generateElementId('editor'));
+  const useRichText = writable(modes.includes('rich-text'));
+  const hasConverterError = writable(false);
+  let showConverterError = false;
+
+  /**
+   * Convert the Markdown {@link value} to Lexical nodes. Disable the rich text mode and restore the
+   * original value when there is an error while conversion.
+   */
+  const convertMarkdown = async () => {
+    const originalValue = value;
+
+    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, value ?? '');
+    } catch {
+      $hasConverterError = true;
+      value = originalValue;
+    }
+  };
+
+  $: {
+    if ($hasConverterError) {
+      $useRichText = false;
+      showConverterError = true;
+    }
+  }
+
+  setContext(
+    'state',
+    /** @type {TextEditorState} */ ({
+      editor,
+      editorId,
+      selectionBlockType,
+      selectionInlineTypes,
+      modes,
+      useRichText,
+      hasConverterError,
+      enabledButtons: buttons,
+      convertMarkdown,
+    }),
+  );
+
+  onMount(() => {
+    if ($useRichText) {
+      convertMarkdown();
+    }
+  });
+</script>
+
+<div role="none" class="sui text-editor" hidden={hidden || undefined} {...$$restProps}>
+  <EditorToolbar {disabled} {readonly} />
+  <LexicalRoot {disabled} {readonly} bind:value />
+  <TextArea
+    autoResize={true}
+    bind:value
+    {flex}
+    hidden={$useRichText || hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
+  />
+</div>
+
+{#if showConverterError}
+  <Toast bind:show={showConverterError}>
+    <Alert status="error">{$_('_sui.text_editor.converter_error')}</Alert>
+  </Toast>
+{/if}
+
+<style>.text-editor {
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.text-editor :global(.sui.text-area) {
+  margin: 0 !important;
+  width: 100% !important;
+  min-width: auto;
+}
+.text-editor :global(.sui.text-area) :global(textarea) {
+  border-radius: 0 0 var(--sui-textbox-border-radius) var(--sui-textbox-border-radius) !important;
+}</style>

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

@@ -1,34 +1,38 @@
-/** @typedef {typeof __propDef.props}  MarkdownEditorProps */
-/** @typedef {typeof __propDef.events}  MarkdownEditorEvents */
-/** @typedef {typeof __propDef.slots}  MarkdownEditorSlots */
-/** A Markdown text editor. */
-export default class MarkdownEditor extends SvelteComponent<{
+/** @typedef {typeof __propDef.props}  TextEditorProps */
+/** @typedef {typeof __propDef.events}  TextEditorEvents */
+/** @typedef {typeof __propDef.slots}  TextEditorSlots */
+/** A rich text editor based on Lexical. */
+export default class TextEditor extends SvelteComponent<{
     [x: string]: any;
-    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;
+    modes?: TextEditorMode[] | undefined;
+    buttons?: (TextEditorInlineType | TextEditorBlockType)[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
-export type MarkdownEditorProps = typeof __propDef.props;
-export type MarkdownEditorEvents = typeof __propDef.events;
-export type MarkdownEditorSlots = typeof __propDef.slots;
+export type TextEditorProps = typeof __propDef.props;
+export type TextEditorEvents = typeof __propDef.events;
+export type TextEditorSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        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;
+        modes?: TextEditorMode[] | undefined;
+        buttons?: (TextEditorInlineType | TextEditorBlockType)[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,150 @@
+<script>
+  import { getContext, tick } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import ButtonGroup from '../../button/button-group.svelte';
+  import Divider from '../../divider/divider.svelte';
+  import Spacer from '../../divider/spacer.svelte';
+  import Icon from '../../icon/icon.svelte';
+  import MenuButton from '../../menu/menu-button.svelte';
+  import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
+  import Menu from '../../menu/menu.svelte';
+  import {
+    availableButtons,
+    blockButtonTypes,
+    inlineButtonTypes,
+  } from '..';
+  import FormatTextButton from './format-text-button.svelte';
+  import InsertLinkButton from './insert-link-button.svelte';
+  import ToggleBlockMenuItem from './toggle-block-menu-item.svelte';
+  import Toolbar from '../../toolbar/toolbar.svelte';
+
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Whether to disable the widget. An alias of `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+
+  /**
+   * Text editor state.
+   * @type {TextEditorState}
+   */
+  const {
+    editorId,
+    selectionBlockType,
+    modes,
+    useRichText,
+    hasConverterError,
+    enabledButtons,
+    convertMarkdown,
+  } = getContext('state');
+
+  /**
+   * Enabled block level buttons.
+   */
+  $: blockLevelButtons = Array.from(
+    new Set(
+      /** @type {TextEditorBlockType[]} */ ([
+        'paragraph', // Always needed
+        ...enabledButtons.filter((type) => blockButtonTypes.includes(/** @type {any} */ (type))),
+      ]),
+    ),
+  );
+
+  /**
+   * Enabled inline level buttons.
+   */
+  $: inlineLevelButtons = Array.from(
+    new Set(
+      /** @type {TextEditorInlineType[]} */ ([
+        ...enabledButtons.filter((type) => inlineButtonTypes.includes(/** @type {any} */ (type))),
+      ]),
+    ),
+  );
+</script>
+
+<div role="none" class="wrapper">
+  <Toolbar disabled={disabled || readonly} aria-label={$_('_sui.text_editor.text_editor')}>
+    <MenuButton
+      disabled={!$useRichText}
+      aria-label={$_('_sui.text_editor.show_text_style_options')}
+      aria-controls="{$editorId}-lexical-root"
+    >
+      <Icon
+        slot="start-icon"
+        name={availableButtons[$selectionBlockType]?.icon ?? 'format_paragraph'}
+      />
+      <Icon slot="end-icon" name="arrow_drop_down" class="small-arrow" />
+      <Menu slot="popup" aria-label={$_('_sui.text_editor.text_style_options')}>
+        {#each blockLevelButtons as type (type)}
+          <ToggleBlockMenuItem {type} />
+        {/each}
+      </Menu>
+    </MenuButton>
+    {#if inlineLevelButtons.length}
+      <Divider orientation="vertical" />
+      <ButtonGroup>
+        {#each inlineLevelButtons as type (type)}
+          {#if type === 'link'}
+            <InsertLinkButton />
+          {:else}
+            <FormatTextButton {type} />
+          {/if}
+        {/each}
+      </ButtonGroup>
+    {/if}
+    <Spacer flex />
+    {#if modes.length > 1}
+      <MenuButton
+        variant="ghost"
+        iconic
+        disabled={$hasConverterError}
+        popupPosition="bottom-right"
+        aria-label={$_('_sui.text_editor.show_edit_options')}
+      >
+        <Icon slot="start-icon" name="more_vert" />
+        <Menu slot="popup" aria-label={$_('_sui.text_editor.edit_options')}>
+          <MenuItemCheckbox
+            label={$_('_sui.text_editor.use_rich_text')}
+            bind:checked={$useRichText}
+            on:change={async () => {
+              // Wait for `$useRichText` to be updated
+              await tick();
+
+              if ($useRichText) {
+                convertMarkdown();
+              }
+            }}
+          />
+        </Menu>
+      </MenuButton>
+    {/if}
+  </Toolbar>
+</div>
+
+<style>.wrapper {
+  display: contents;
+}
+.wrapper :global([role="toolbar"]) {
+  position: sticky;
+  top: 0;
+  display: flex;
+  gap: 8px;
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: var(--sui-textbox-border-color);
+  border-radius: var(--sui-textbox-border-radius) var(--sui-textbox-border-radius) 0 0;
+  padding: 8px;
+  background-color: var(--sui-tertiary-background-color);
+}
+.wrapper :global(button) {
+  flex: none;
+  margin: 0 !important;
+}
+.wrapper :global(.sui.button-group) {
+  gap: 4px;
+}</style>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  EditorToolbarProps */
+/** @typedef {typeof __propDef.events}  EditorToolbarEvents */
+/** @typedef {typeof __propDef.slots}  EditorToolbarSlots */
+export default class EditorToolbar extends SvelteComponent<{
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type EditorToolbarProps = typeof __propDef.props;
+export type EditorToolbarEvents = typeof __propDef.events;
+export type EditorToolbarSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,33 @@
+<script>
+  import { FORMAT_TEXT_COMMAND } from 'lexical';
+  import { getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import Button from '../../button/button.svelte';
+  import Icon from '../../icon/icon.svelte';
+  import { availableButtons } from '..';
+
+  /**
+   * Button type.
+   * @type {TextEditorFormatType}
+   */
+  export let type;
+
+  /**
+   * Text editor state.
+   * @type {TextEditorState}
+   */
+  const { editor, editorId, selectionInlineTypes, useRichText } = getContext('state');
+</script>
+
+<Button
+  iconic
+  aria-label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
+  aria-controls="{$editorId}-lexical-root"
+  disabled={!$useRichText}
+  pressed={$selectionInlineTypes.includes(type)}
+  on:click={() => {
+    $editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
+  }}
+>
+  <Icon slot="start-icon" name={availableButtons[type].icon} />
+</Button>

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

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