@sveltia/ui 0.77.2 → 0.78.0

package/dist/components/text-editor/shiki/theme.js

@@ -34,23 +34,44 @@ export const getCodeTheme = () => {
 };
 
 /**
- * Keep code blocks in sync with the app’s appearance.
- *
- * Unlike Prism, Shiki bakes token colours into inline styles, so a theme change cannot be handled
- * in CSS alone: every code node has to be re-tokenized.
- * @param {LexicalEditor} editor Editor instance.
+ * Call the given function whenever the app’s appearance, and therefore the matching syntax
+ * highlighting theme, may have changed.
+ * @param {() => void} callback Function to call.
  * @returns {() => void} Cleanup function.
  */
-export const observeCodeTheme = (editor) => {
+export const onCodeThemeChange = (callback) => {
   /* v8 ignore next 3 */
   if (typeof document === 'undefined') {
     return () => undefined;
   }
 
-  /**
-   * Apply the current theme to every code block in the editor.
-   */
-  const update = () => {
+  const observer = new MutationObserver(callback);
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  });
+
+  const media = window.matchMedia('(prefers-color-scheme: dark)');
+
+  media.addEventListener('change', callback);
+
+  return () => {
+    observer.disconnect();
+    media.removeEventListener('change', callback);
+  };
+};
+
+/**
+ * Keep code blocks in sync with the app’s appearance.
+ *
+ * Unlike Prism, Shiki bakes token colours into inline styles, so a theme change cannot be handled
+ * in CSS alone: every code node has to be re-tokenized.
+ * @param {LexicalEditor} editor Editor instance.
+ * @returns {() => void} Cleanup function.
+ */
+export const observeCodeTheme = (editor) =>
+  onCodeThemeChange(() => {
     const theme = getCodeTheme();
 
     editor.update(
@@ -66,21 +87,4 @@ export const observeCodeTheme = (editor) => {
       },
       { tag: HISTORY_MERGE_TAG },
     );
-  };
-
-  const observer = new MutationObserver(update);
-
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['data-theme'],
   });
-
-  const media = window.matchMedia('(prefers-color-scheme: dark)');
-
-  media.addEventListener('change', update);
-
-  return () => {
-    observer.disconnect();
-    media.removeEventListener('change', update);
-  };
-};

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.77.2";
+export const UI_VERSION: "0.78.0";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.77.2';
+export const UI_VERSION = '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,21 +9,32 @@
   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 `<textarea>` element.
+   * @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.
    * @property {TextEditorMode[]} [modes] Enabled modes.
    * @property {TextEditorNodeType[]} [buttons] Enabled buttons.
    * @property {TextEditorComponent[]} [components] Editor components.
@@ -55,6 +66,7 @@
   let {
     /* eslint-disable prefer-const */
     value = $bindable(''),
+    pending = $bindable(false),
     flex = false,
     dir = undefined,
     modes = ['rich-text', 'plain-text'],
@@ -102,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 */
@@ -137,6 +271,7 @@
   <TextEditorToolbar {disabled} {readonly} />
   <LexicalRoot
     {...labelAttrs}
+    {dir}
     hidden={!editorStore.useRichText || hidden}
     {disabled}
     {readonly}
@@ -145,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,15 +6,24 @@ 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.
      */
     flex?: boolean | undefined;
     /**
-     * The `dir` attribute on the `<textarea>` element.
+     * The `dir` attribute on the editable text box, both
+     * the rich text editor and the `<textarea>` element of the plain text mode.
      */
     dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
@@ -85,18 +94,27 @@ 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.
      */
     flex?: boolean | undefined;
     /**
-     * The `dir` attribute on the `<textarea>` element.
+     * The `dir` attribute on the editable text box, both
+     * the rich text editor and the `<textarea>` element of the plain text mode.
      */
     dir?: "ltr" | "rtl" | "auto" | undefined;
     /**

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -36,6 +36,16 @@
 
   let selectedLanguage = $state('plain');
 
+  // A code block can carry an alias, e.g. `js`, while the options are keyed by the canonical ID,
+  // e.g. `javascript`, so resolve the alias for the selector to find its option. A language that
+  // isn’t listed, e.g. `txt`, is shown as plain text; otherwise the selector would keep the label
+  // of the previous block, as it only updates the label when an option matches
+  const selectedKey = $derived(
+    codeLanguages.find(
+      ({ key, aliases }) => key === selectedLanguage || aliases.includes(selectedLanguage),
+    )?.key ?? 'plain',
+  );
+
   $effect(() => {
     void editorStore.selection.blockNodeKey;
 
@@ -57,9 +67,9 @@
 <Select
   {disabled}
   ariaLabel={_('_sui.text_editor.language')}
-  value={selectedLanguage}
+  value={selectedKey}
   onChange={async ({ detail: { value: lang } }) => {
-    if (!editorStore.editor || selectedLanguage === lang) {
+    if (!editorStore.editor || selectedKey === lang) {
       return;
     }
 
@@ -87,12 +97,7 @@
   }}
 >
   <Option label={_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />
-  {#each codeLanguages as { key, label, aliases } (key)}
-    <Option
-      {label}
-      value={key}
-      selected={key === selectedLanguage || aliases.includes(selectedLanguage)}
-      dir="ltr"
-    />
+  {#each codeLanguages as { key, label } (key)}
+    <Option {label} value={key} selected={key === selectedKey} dir="ltr" />
   {/each}
 </Select>

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()}