@sveltia/ui 0.77.3 → 0.78.0

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

@@ -37,10 +37,19 @@ export const createEditorStore = () => {
   let selection = $state({ blockNodeKey: null, blockType: 'paragraph', inlineTypes: [] });
   /** @type {boolean} */
   let useRichText = $state(true);
+  /** @type {HTMLTextAreaElement | undefined} */
+  let textArea = $state();
   /** @type {boolean} */
   let hasConverterError = $state(false);
   /** @type {boolean} */
   let showConverterError = $state(false);
+  /** @type {boolean} */
+  let pending = $state(false);
+  /**
+   * Value last imported to the Lexical editor, and the Markdown the editor exports for it.
+   * @type {{ source: string, exported: string } | undefined}
+   */
+  let lastImport = undefined;
 
   /**
    * Flag a conversion error, which takes the editor out of the rich text mode, and shows the error
@@ -71,7 +80,13 @@ export const createEditorStore = () => {
       // 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 || '', enabledTransformers);
+      const exported = await convertMarkdownToLexical(
+        editor,
+        inputValue || '',
+        enabledTransformers,
+      );
+
+      lastImport = { source: originalValue, exported };
     } catch (ex) {
       // Go through the setter, so the editor actually falls back to the plain text mode
       setConverterError(true);
@@ -128,6 +143,15 @@ export const createEditorStore = () => {
     set selection(newValue) {
       selection = newValue;
     },
+    get controlId() {
+      return useRichText ? `${editorId}-lexical-root` : `${editorId}-plain-text`;
+    },
+    get textArea() {
+      return textArea;
+    },
+    set textArea(newValue) {
+      textArea = newValue;
+    },
     get useRichText() {
       return useRichText;
     },
@@ -146,8 +170,22 @@ export const createEditorStore = () => {
     set showConverterError(newValue) {
       showConverterError = newValue;
     },
+    get pending() {
+      return pending;
+    },
+    set pending(newValue) {
+      pending = newValue;
+    },
     editorId,
     convertMarkdown,
+    /**
+     * Check if the given value, exported by the editor, is only the value last imported, written in
+     * the editor’s own Markdown style.
+     * @param {string} value Exported value.
+     * @returns {boolean} Result.
+     */
+    isRestyledImport: (value) =>
+      !!lastImport && lastImport.source === inputValue && lastImport.exported === value,
     /* eslint-enable jsdoc/require-jsdoc */
   };
 };

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

@@ -9,19 +9,29 @@
   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 { loadCodeHighlighter } from './core.js';
   import EmojiAutocomplete from './emoji-autocomplete.svelte';
   import LexicalRoot from './lexical-root.svelte';
+  import { getBlockType, getRawTextState } from './raw-markdown.js';
+  import { highlightCodeToTokens } from './shiki/facade.js';
+  import { getCodeTheme, onCodeThemeChange } from './shiki/theme.js';
   import { createEditorStore } from './store.svelte.js';
   import TextEditorToolbar from './toolbar/text-editor-toolbar.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
    * @import { TextEditorComponent, TextEditorMode, TextEditorNodeType } from '../../typedefs';
+   * @import { HighlightedToken } from '../../typedefs';
    */
 
   /**
    * @typedef {object} Props
-   * @property {string} [value] Input value.
+   * @property {string} [value] Input value. A value set from outside is kept as is until the user
+   * changes the content, although the rich text editor writes Markdown in its own style, such as
+   * `_text_` for `*text*`.
+   * @property {boolean} [pending] Whether the user has changed the rich text content, and the
+   * editor has yet to update {@link value}, which it does a moment later. Bind it to wait for the
+   * change before reading the value, for example to save it. Read-only.
    * @property {boolean} [flex] Make the text input container flexible.
    * @property {'ltr' | 'rtl' | 'auto'} [dir] The `dir` attribute on the editable text box, both
    * the rich text editor and the `<textarea>` element of the plain text mode.
@@ -56,6 +66,7 @@
   let {
     /* eslint-disable prefer-const */
     value = $bindable(''),
+    pending = $bindable(false),
     flex = false,
     dir = undefined,
     modes = ['rich-text', 'plain-text'],
@@ -103,6 +114,128 @@
 
   setContext('editorStore', editorStore);
 
+  /**
+   * Maximum length of the Markdown source to highlight in the plain text mode. The whole source is
+   * tokenized on every keystroke, so highlighting a longer one would make typing sluggish.
+   */
+  const MAX_HIGHLIGHT_LENGTH = 20_000;
+
+  /** Syntax highlighting theme matching the app’s appearance. */
+  let codeTheme = $state(getCodeTheme());
+  /** Incremented whenever the highlighter has loaded something, to highlight the text again. */
+  let highlighterLoadCount = $state(0);
+
+  const usePlainText = $derived(!editorStore.useRichText && !hidden);
+  /**
+   * Comma-separated languages used in the fenced code blocks, which are highlighted as well. It’s a
+   * string rather than an array, so the highlighter isn’t reloaded on every keystroke.
+   */
+  const codeLanguages = $derived.by(() => {
+    if (!usePlainText || editorStore.inputValue.length > MAX_HIGHLIGHT_LENGTH) {
+      return '';
+    }
+
+    return [
+      ...new Set(
+        [...editorStore.inputValue.matchAll(/^[ \t]*(?:```|~~~)[ \t]*(?<lang>[\w+#-]+)/gm)].map(
+          ({ groups }) => groups?.lang,
+        ),
+      ),
+    ].join(',');
+  });
+
+  /**
+   * Highlight the Markdown source in the plain text mode.
+   * @param {string} source Markdown source.
+   * @returns {HighlightedToken[][] | undefined} Tokens, or `undefined` while the highlighter is
+   * still loading.
+   */
+  const highlightMarkdown = (source) => {
+    void highlighterLoadCount;
+
+    // Don’t waste time on tokenizing the source while the rich text mode is shown
+    if (!usePlainText || source.length > MAX_HIGHLIGHT_LENGTH) {
+      return undefined;
+    }
+
+    return highlightCodeToTokens(source, 'markdown', { theme: codeTheme });
+  };
+
+  $effect(() =>
+    onCodeThemeChange(async () => {
+      const theme = getCodeTheme();
+
+      // Keep the current highlighting until the new theme is ready, so the text doesn’t flash
+      if (usePlainText) {
+        await loadCodeHighlighter('markdown');
+      }
+
+      // Ignore an outdated change, in case the appearance has changed again while loading
+      if (theme === getCodeTheme()) {
+        codeTheme = theme;
+      }
+    }),
+  );
+
+  $effect(() => {
+    // Load the highlighter only when the plain text mode is actually shown
+    if (!usePlainText) {
+      return;
+    }
+
+    const languages = codeLanguages ? codeLanguages.split(',') : [];
+
+    void codeTheme;
+
+    untrack(() => {
+      // The Markdown grammar is loaded first, because the engine has to be in place before
+      // anything else can be loaded
+      loadCodeHighlighter('markdown').then(async () => {
+        highlighterLoadCount += 1;
+        await Promise.all(languages.map((lang) => loadCodeHighlighter(lang)));
+        highlighterLoadCount += 1;
+      });
+    });
+  });
+
+  $effect(() => {
+    // Keep the block type of the selection up to date in the plain text mode, so the toolbar can
+    // reflect it like in the rich text mode
+    const { textArea, useRichText } = editorStore;
+
+    if (!textArea || useRichText) {
+      return undefined;
+    }
+
+    /**
+     * Update the selection state. Until the `<textarea>` gets the focus, its caret is at the end of
+     * the value rather than where the user would expect, so the block type is not detected yet.
+     */
+    const update = () => {
+      editorStore.selection = {
+        blockNodeKey: null,
+        blockType:
+          document.activeElement === textArea
+            ? getBlockType(getRawTextState(textArea))
+            : 'paragraph',
+        inlineTypes: [],
+      };
+    };
+
+    const events = ['selectionchange', 'select', 'input', 'keyup', 'mouseup', 'focus'];
+
+    untrack(update);
+    events.forEach((type) => textArea.addEventListener(type, update));
+
+    return () => {
+      events.forEach((type) => textArea.removeEventListener(type, update));
+    };
+  });
+
+  $effect(() => {
+    pending = editorStore.pending;
+  });
+
   $effect(() => {
     // The root initializes the editor before these effects first run, and stays initialized
     /* v8 ignore next */
@@ -147,9 +280,12 @@
   />
   <TextArea
     {...labelAttrs}
+    bind:element={editorStore.textArea}
+    id="{editorStore.editorId}-plain-text"
     autoResize={true}
     bind:value={editorStore.inputValue}
     {useEmojiAutocomplete}
+    highlight={highlightMarkdown}
     {flex}
     {dir}
     hidden={editorStore.useRichText || hidden}

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

@@ -6,9 +6,17 @@ type TextEditor = {
 /** A rich text editor based on Lexical. */
 declare const TextEditor: import("svelte").Component<{
     /**
-     * Input value.
+     * Input value. A value set from outside is kept as is until the user
+     * changes the content, although the rich text editor writes Markdown in its own style, such as
+     * `_text_` for `*text*`.
      */
     value?: string | undefined;
+    /**
+     * Whether the user has changed the rich text content, and the
+     * editor has yet to update {@link value}, which it does a moment later. Bind it to wait for the
+     * change before reading the value, for example to save it. Read-only.
+     */
+    pending?: boolean | undefined;
     /**
      * Make the text input container flexible.
      */
@@ -86,12 +94,20 @@ declare const TextEditor: import("svelte").Component<{
      * Primary slot content.
      */
     children?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "value">;
+} & Record<string, any>, {}, "value" | "pending">;
 type Props = {
     /**
-     * Input value.
+     * Input value. A value set from outside is kept as is until the user
+     * changes the content, although the rich text editor writes Markdown in its own style, such as
+     * `_text_` for `*text*`.
      */
     value?: string | undefined;
+    /**
+     * Whether the user has changed the rich text content, and the
+     * editor has yet to update {@link value}, which it does a moment later. Bind it to wait for the
+     * change before reading the value, for example to save it. Read-only.
+     */
+    pending?: boolean | undefined;
     /**
      * Make the text input container flexible.
      */

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

@@ -0,0 +1,96 @@
+<!--
+  @component
+  A minimal rich text editor holding a single editor component, so it can be edited with its own
+  field UI outside the main editor, and exported to Markdown. Used to insert a component in the
+  plain text mode.
+-->
+<script>
+  import {
+    $createParagraphNode as createParagraphNode,
+    $getRoot as getRoot,
+    $insertNodes as insertNodes,
+  } from 'lexical';
+  import { getContext, setContext } from 'svelte';
+  import { onEditorUpdate } from '../core.js';
+  import LexicalRoot from '../lexical-root.svelte';
+  import { createEditorStore } from '../store.svelte.js';
+
+  /**
+   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {TextEditorComponent} component Editor component to edit.
+   * @property {string} [markdown] Markdown output of the component.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    component,
+    markdown = $bindable(''),
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {TextEditorStore} */
+  const parentStore = getContext('editorStore');
+  const editorStore = createEditorStore();
+
+  // svelte-ignore state_referenced_locally
+  editorStore.config = {
+    ...parentStore.config,
+    modes: ['rich-text'],
+    components: [component],
+    useMarkdownShortcuts: false,
+    useEmojiAutocomplete: false,
+  };
+
+  setContext('editorStore', editorStore);
+
+  let inserted = false;
+
+  $effect(() => {
+    const { editor, initialized } = editorStore;
+
+    if (!editor || !initialized || inserted) {
+      return;
+    }
+
+    inserted = true;
+
+    editor.update(() => {
+      const paragraph = createParagraphNode();
+
+      getRoot().clear().append(paragraph);
+      paragraph.select();
+      insertNodes([component.createNode()]);
+    });
+  });
+
+  $effect(() => {
+    markdown = editorStore.inputValue.trim();
+  });
+
+  /**
+   * Get the component’s Markdown right now. The bound `markdown` is only updated after a short
+   * delay, so it may not reflect a field that has just been changed.
+   * @returns {string} Markdown.
+   */
+  export const getMarkdown = () => {
+    const { editor, enabledTransformers } = editorStore;
+
+    // The dialog can only be submitted once the editor is there
+    /* v8 ignore next 3 */
+    if (!editor) {
+      return markdown;
+    }
+
+    return editor
+      .getEditorState()
+      .read(() => onEditorUpdate(editor, enabledTransformers))
+      .trim();
+  };
+</script>
+
+<LexicalRoot aria-label={component.label} />

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

@@ -0,0 +1,35 @@
+export default ComponentEditor;
+type ComponentEditor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+} & {
+    getMarkdown: () => string;
+};
+/**
+ * A minimal rich text editor holding a single editor component, so it can be edited with its own
+ * field UI outside the main editor, and exported to Markdown. Used to insert a component in the
+ * plain text mode.
+ */
+declare const ComponentEditor: import("svelte").Component<{
+    /**
+     * Editor component to edit.
+     */
+    component: TextEditorComponent;
+    /**
+     * Markdown output of the component.
+     */
+    markdown?: string | undefined;
+}, {
+    getMarkdown: () => string;
+}, "markdown">;
+type Props = {
+    /**
+     * Editor component to edit.
+     */
+    component: TextEditorComponent;
+    /**
+     * Markdown output of the component.
+     */
+    markdown?: string | undefined;
+};
+import type { TextEditorComponent } from '../../../typedefs';

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

@@ -1,11 +1,18 @@
 <script>
   import { _ } from '@sveltia/i18n';
+  import { isMac, matchesShortcuts } from '@sveltia/utils/events';
   import { FORMAT_TEXT_COMMAND } from 'lexical';
   import { getContext } from 'svelte';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
   import { focusEditor } from '../core.js';
+  import {
+    applyRawTextEdit,
+    getRawTextState,
+    isRawTextEditable,
+    toggleInlineFormat,
+  } from '../raw-markdown.js';
 
   /**
    * @import { TextEditorFormatType, TextEditorStore } from '../../../typedefs';
@@ -28,21 +35,74 @@
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
   const selectionTypeMatches = $derived(editorStore.selection.inlineTypes.includes(type));
+
+  /**
+   * Keyboard shortcut keys for the plain text mode. The rich text editor handles them on its own.
+   * @type {Record<string, string>}
+   */
+  const SHORTCUT_KEYS = { bold: 'B', italic: 'I' };
+
+  /**
+   * Format the selection.
+   */
+  const format = async () => {
+    const { editor, textArea, useRichText } = editorStore;
+
+    if (!useRichText) {
+      // The button is only enabled while the `<textarea>` is there
+      /* v8 ignore else */
+      if (textArea) {
+        applyRawTextEdit(textArea, toggleInlineFormat(getRawTextState(textArea), type));
+      }
+
+      return;
+    }
+
+    // The button is only enabled while the editor is there
+    /* v8 ignore else */
+    if (editor) {
+      await focusEditor(editor);
+      editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
+    }
+  };
+
+  $effect(() => {
+    const { textArea } = editorStore;
+    const key = SHORTCUT_KEYS[type];
+
+    if (!textArea || !key) {
+      return undefined;
+    }
+
+    /**
+     * Handle the keyboard shortcut in the plain text mode.
+     * @param {KeyboardEvent} event `keydown` event.
+     */
+    const onKeyDown = (event) => {
+      if (
+        isRawTextEditable(textArea) &&
+        matchesShortcuts(event, isMac() ? `Meta+${key}` : `Ctrl+${key}`)
+      ) {
+        event.preventDefault();
+        format();
+      }
+    };
+
+    textArea.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      textArea.removeEventListener('keydown', onKeyDown);
+    };
+  });
 </script>
 
 <Button
   iconic
   aria-label={_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
-  aria-controls={`${editorStore.editorId}-lexical-root`}
-  disabled={!editorStore.useRichText}
+  aria-controls={editorStore.controlId}
   pressed={selectionTypeMatches}
-  onclick={async () => {
-    // The button is only enabled while the editor is there
-    /* v8 ignore else */
-    if (editorStore.editor) {
-      await focusEditor(editorStore.editor);
-      editorStore.editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
-    }
+  onclick={() => {
+    format();
   }}
 >
   {#snippet startIcon()}

package/dist/components/text-editor/toolbar/insert-component-dialog.svelte

@@ -0,0 +1,92 @@
+<!--
+  @component
+  A dialog to insert an editor component in the plain text mode. The component is edited with its
+  own field UI in a minimal rich text editor, then inserted into the `<textarea>` as Markdown.
+-->
+<script>
+  import { _ } from '@sveltia/i18n';
+  import { getContext } from 'svelte';
+  import Dialog from '../../dialog/dialog.svelte';
+  import { applyRawTextEdit, getRawTextState, insertMarkdown } from '../raw-markdown.js';
+  import ComponentEditor from './component-editor.svelte';
+
+  /**
+   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {TextEditorComponent | undefined} component Editor component to insert.
+   * @property {boolean} [open] Whether to open the dialog.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    component,
+    open = $bindable(false),
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {TextEditorStore} */
+  const editorStore = getContext('editorStore');
+
+  let markdown = $state('');
+  /** @type {ComponentEditor | undefined} */
+  let componentEditor = $state();
+  /**
+   * Markdown taken from the editor as the dialog starts closing, while it’s still there.
+   * @type {string}
+   */
+  let latestMarkdown = '';
+
+  /**
+   * Insert the component’s Markdown into the `<textarea>`, or just bring the focus back there.
+   * @param {CustomEvent} event `close` event.
+   */
+  const onClose = (event) => {
+    const { textArea } = editorStore;
+
+    // The dialog can only be opened from a button, which needs the `<textarea>`
+    /* v8 ignore next 3 */
+    if (!textArea) {
+      return;
+    }
+
+    if (event.detail.returnValue !== 'cancel' && latestMarkdown) {
+      // A component matched by a single-line pattern is inline; anything else is a block
+      const block = component?.transformer?.type !== 'text-match';
+
+      applyRawTextEdit(
+        textArea,
+        insertMarkdown(getRawTextState(textArea), latestMarkdown, { block }),
+      );
+    } else {
+      textArea.focus();
+    }
+
+    markdown = '';
+    latestMarkdown = '';
+  };
+</script>
+
+<Dialog
+  title={component?.label ?? ''}
+  size="large"
+  bind:open
+  okLabel={_('_sui.insert')}
+  okDisabled={!markdown}
+  restoreFocus={false}
+  onClosing={() => {
+    // Get the latest Markdown, as the bound value is updated with a delay
+    latestMarkdown = componentEditor?.getMarkdown() ?? markdown;
+  }}
+  onClose={(event) => {
+    onClose(event);
+  }}
+>
+  <!-- The dialog unmounts its content once closed, so each opening gets a fresh editor -->
+  {#if component}
+    <ComponentEditor bind:this={componentEditor} {component} bind:markdown />
+  {/if}
+</Dialog>

package/dist/components/text-editor/toolbar/insert-component-dialog.svelte.d.ts

@@ -0,0 +1,30 @@
+export default InsertComponentDialog;
+type InsertComponentDialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+/**
+ * A dialog to insert an editor component in the plain text mode. The component is edited with its
+ * own field UI in a minimal rich text editor, then inserted into the `<textarea>` as Markdown.
+ */
+declare const InsertComponentDialog: import("svelte").Component<{
+    /**
+     * Editor component to insert.
+     */
+    component: TextEditorComponent | undefined;
+    /**
+     * Whether to open the dialog.
+     */
+    open?: boolean | undefined;
+}, {}, "open">;
+type Props = {
+    /**
+     * Editor component to insert.
+     */
+    component: TextEditorComponent | undefined;
+    /**
+     * Whether to open the dialog.
+     */
+    open?: boolean | undefined;
+};
+import type { TextEditorComponent } from '../../../typedefs';

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

@@ -6,6 +6,7 @@
   import { getContext } from 'svelte';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
+  import InsertComponentDialog from './insert-component-dialog.svelte';
 
   /**
    * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
@@ -27,6 +28,8 @@
   const editorStore = getContext('editorStore');
 
   const { label, icon, createNode } = $derived(component);
+
+  let openDialog = $state(false);
 </script>
 
 <Button
@@ -34,9 +37,15 @@
   label={icon ? undefined : label}
   title={label}
   aria-label={label}
-  aria-controls={`${editorStore.editorId}-lexical-root`}
-  disabled={!editorStore.useRichText}
+  aria-controls={editorStore.controlId}
   onclick={() => {
+    // The plain text mode needs a dialog to fill in the component’s fields
+    if (!editorStore.useRichText) {
+      openDialog = true;
+
+      return;
+    }
+
     editorStore.editor?.update(() => {
       // Add an additional paragraph for easier editing
       insertNodes([createNode(), createParagraphNode()]);
@@ -49,3 +58,5 @@
     {/if}
   {/snippet}
 </Button>
+
+<InsertComponentDialog {component} bind:open={openDialog} />