@sveltia/ui 0.23.2 → 0.24.0

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

@@ -0,0 +1,120 @@
+import { generateElementId } from '@sveltia/utils/element';
+import { convertMarkdownToLexical } from './core';
+
+/**
+ * Create an editor editor store that contains all the states and configuration.
+ * @returns {import('../../typedefs').TextEditorStore} Store.
+ */
+export const createEditorStore = () => {
+  /** @type {string} */
+  const editorId = generateElementId('editor');
+  /** @type {boolean} */
+  let initialized = $state(false);
+  /** @type {import('lexical').LexicalEditor | undefined} */
+  let editor = $state();
+  /** @type {import('../../typedefs').TextEditorConfig} */
+  let config = $state({ modes: [], enabledButtons: [], components: [], isCodeEditor: false });
+  /** @type {string} */
+  let inputValue = $state('');
+  /** @type {import('../../typedefs').TextEditorSelectionState} */
+  let selection = $state({ blockNodeKey: null, blockType: 'paragraph', inlineTypes: [] });
+  /** @type {boolean} */
+  let useRichText = $state(true);
+  /** @type {boolean} */
+  let hasConverterError = $state(false);
+  /** @type {boolean} */
+  let showConverterError = $state(false);
+
+  /**
+   * Convert the Markdown {@link inputValue} to Lexical nodes. Disable the rich text mode and
+   * restore the original value when there is an error while conversion.
+   */
+  const convertMarkdown = async () => {
+    if (!editor || !initialized) {
+      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 (ex) {
+      hasConverterError = true;
+      inputValue = originalValue;
+      // eslint-disable-next-line no-console
+      console.error(ex);
+    }
+  };
+
+  return {
+    /* eslint-disable jsdoc/require-jsdoc */
+    get editor() {
+      return editor;
+    },
+    set editor(newValue) {
+      editor = newValue;
+    },
+    get initialized() {
+      return initialized;
+    },
+    set initialized(newValue) {
+      initialized = newValue;
+    },
+    get config() {
+      return config;
+    },
+    set config(newValue) {
+      config = newValue;
+      useRichText = newValue.modes[0] === 'rich-text';
+    },
+    get inputValue() {
+      return inputValue;
+    },
+    set inputValue(newValue) {
+      const hasChange = inputValue !== newValue;
+
+      if (hasChange) {
+        inputValue = newValue;
+      }
+
+      if (useRichText && (hasChange || editor?.getEditorState().isEmpty())) {
+        convertMarkdown();
+      }
+    },
+    get selection() {
+      return selection;
+    },
+    set selection(newValue) {
+      selection = newValue;
+    },
+    get useRichText() {
+      return useRichText;
+    },
+    set useRichText(newValue) {
+      useRichText = newValue;
+    },
+    get hasConverterError() {
+      return hasConverterError;
+    },
+    set hasConverterError(newValue) {
+      hasConverterError = newValue;
+
+      if (hasConverterError) {
+        useRichText = false;
+        showConverterError = true;
+      }
+    },
+    get showConverterError() {
+      return showConverterError;
+    },
+    set showConverterError(newValue) {
+      showConverterError = newValue;
+    },
+    editorId,
+    convertMarkdown,
+    /* eslint-enable jsdoc/require-jsdoc */
+  };
+};

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

@@ -3,17 +3,15 @@
   A rich text editor based on Lexical.
 -->
 <script>
-  import { generateElementId } from '@sveltia/utils/element';
-  import { onMount, setContext, untrack } from 'svelte';
+  import { setContext, untrack } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import { writable } from 'svelte/store';
   import { blockButtonTypes, inlineButtonTypes } from '.';
   import Alert from '../alert/alert.svelte';
   import TextArea from '../text-field/text-area.svelte';
   import Toast from '../toast/toast.svelte';
-  import { convertMarkdown as convertMarkdownToLexical, initEditor } from './core';
   import LexicalRoot from './lexical-root.svelte';
-  import EditorToolbar from './toolbar/editor-toolbar.svelte';
+  import { createEditorStore } from './store.svelte';
+  import TextEditorToolbar from './toolbar/text-editor-toolbar.svelte';
 
   /**
    * @typedef {object} Props
@@ -56,108 +54,45 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /** @type {import('svelte/store').Writable<import('lexical').LexicalEditor | undefined>} */
-  const editor = writable();
-  const selectionBlockType = writable('paragraph');
-  const selectionInlineTypes = writable([]);
-  const editorId = writable(generateElementId('editor'));
-  const useRichText = writable(modes[0] === 'rich-text');
-  const hasConverterError = writable(false);
-  let inputValue = $state('');
-  let showConverterError = $state(false);
+  const editorStore = createEditorStore();
 
-  /**
-   * Convert the Markdown {@link inputValue} to Lexical nodes. Disable the rich text mode and
-   * restore the original value when there is an error while conversion.
-   */
-  const convertMarkdown = async () => {
-    if (!$editor?.getRootElement()) {
-      return;
-    }
-
-    const originalValue = inputValue;
+  editorStore.config.modes = modes;
+  editorStore.config.enabledButtons = buttons;
+  editorStore.config.components = components;
 
-    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 (ex) {
-      $hasConverterError = true;
-      inputValue = originalValue;
-      // eslint-disable-next-line no-console
-      console.error(ex);
-    }
-  };
+  setContext('editorStore', editorStore);
 
   $effect(() => {
-    void $editor;
+    if (!editorStore.initialized) {
+      return;
+    }
 
     const newValue = value;
 
-    // Avoid a cycle dependency & infinite loop
     untrack(() => {
-      const hasChange = inputValue !== newValue;
-
-      if (hasChange) {
-        inputValue = newValue ?? '';
-      }
-
-      if ($useRichText && (hasChange || $editor?.getEditorState().isEmpty())) {
-        convertMarkdown();
-      }
+      editorStore.inputValue = newValue;
     });
   });
 
   $effect(() => {
-    if (!$editor) {
+    if (!editorStore.initialized) {
       return;
     }
 
-    const newValue = inputValue;
+    const newValue = editorStore.inputValue;
 
-    // Avoid a cycle dependency & infinite loop
     untrack(() => {
       if (value !== newValue) {
         value = newValue;
       }
     });
   });
-
-  $effect(() => {
-    if ($hasConverterError) {
-      $useRichText = false;
-      showConverterError = true;
-    }
-  });
-
-  // The editor has to be initialized in the browser
-  onMount(() => {
-    $editor = initEditor({ components });
-  });
-
-  setContext(
-    'state',
-    /** @type {import('../../typedefs').TextEditorState} */ ({
-      editor,
-      editorId,
-      selectionBlockType,
-      selectionInlineTypes,
-      modes,
-      useRichText,
-      hasConverterError,
-      enabledButtons: buttons,
-      components,
-      convertMarkdown,
-    }),
-  );
 </script>
 
-<div {...restProps} role="none" class="sui text-editor" {hidden}>
-  <EditorToolbar {disabled} {readonly} />
+<div {...restProps} role="none" class="sui text-editor" class:flex {hidden}>
+  <TextEditorToolbar {disabled} {readonly} />
   <LexicalRoot
-    bind:value={inputValue}
-    hidden={!$useRichText || hidden}
+    hidden={!editorStore.useRichText || hidden}
     {disabled}
     {readonly}
     {required}
@@ -165,9 +100,9 @@
   />
   <TextArea
     autoResize={true}
-    bind:value={inputValue}
+    bind:value={editorStore.inputValue}
     {flex}
-    hidden={$useRichText || hidden}
+    hidden={editorStore.useRichText || hidden}
     {disabled}
     {readonly}
     {required}
@@ -175,8 +110,8 @@
   />
 </div>
 
-{#if showConverterError}
-  <Toast bind:show={showConverterError}>
+{#if editorStore.showConverterError}
+  <Toast bind:show={editorStore.showConverterError}>
     <Alert status="error">{$_('_sui.text_editor.converter_error')}</Alert>
   </Toast>
 {/if}

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

@@ -0,0 +1,28 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import CodeLanguageSwitcher from './code-language-switcher.svelte';
+  import ToolbarWrapper from './toolbar-wrapper.svelte';
+
+  /**
+   * @typedef {object} Props
+   * @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.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    disabled = false,
+    readonly = false,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<ToolbarWrapper disabled={disabled || readonly} aria-label={$_('_sui.text_editor.code_editor')}>
+  <CodeLanguageSwitcher disabled={disabled || readonly} />
+</ToolbarWrapper>

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

@@ -1,9 +1,9 @@
-export default EditorToolbar;
-type EditorToolbar = {
+export default CodeEditorToolbar;
+type CodeEditorToolbar = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props & Record<string, any>>): void;
 };
-declare const EditorToolbar: import("svelte").Component<{
+declare const CodeEditorToolbar: import("svelte").Component<{
     /**
      * - Whether to hide the widget.
      */

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

@@ -0,0 +1,96 @@
+<script>
+  import { $isCodeNode as isCodeNode } from '@lexical/code';
+  import { $getNodeByKey as getNodeByKey, $getRoot as getRoot } from 'lexical';
+  import prismComponents from 'prismjs/components';
+  import { getContext } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import Option from '../../listbox/option.svelte';
+  import Select from '../../select/select.svelte';
+  import { focusEditor, loadCodeHighlighter } from '../core';
+
+  /**
+   * @typedef {object} Props
+   * @property {boolean} [disabled] - Whether to disable the switcher.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    disabled = false,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {{ key: string, label: string, aliases: string[] }[]} */
+  const codeLanguages = Object.entries(prismComponents.languages)
+    .filter(([, config]) => 'title' in config)
+    .map(([key, val]) => {
+      const { title: label, aliasTitles, alias } = /** @type {Record<string, any>} */ (val);
+      let aliases = [];
+
+      if (alias && !aliasTitles) {
+        aliases = Array.isArray(alias) ? alias : [alias];
+      }
+
+      return [
+        { key, label, aliases },
+        ...Object.entries(aliasTitles ?? {}).map(([k, v]) => ({ key: k, label: v, aliases: [] })),
+      ];
+    })
+    .flat(1)
+    .sort((a, b) => a.label.localeCompare(b.label));
+
+  /** @type {import('../../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
+
+  let selectedLanguage = $state('');
+
+  $effect(() => {
+    void editorStore.selection.blockNodeKey;
+
+    editorStore.editor?.read(() => {
+      const node = editorStore.config.isCodeEditor
+        ? getRoot().getChildren()[0]
+        : getNodeByKey(/** @type {string} */ (editorStore.selection.blockNodeKey));
+
+      if (isCodeNode(node)) {
+        selectedLanguage = node.getLanguage() ?? editorStore.config.defaultLanguage ?? '';
+      }
+    });
+  });
+</script>
+
+<Select
+  {disabled}
+  aria-label={$_('_sui.text_editor.language')}
+  value={selectedLanguage}
+  onChange={async ({ detail: { value: lang } }) => {
+    if (!editorStore.editor || selectedLanguage === lang) {
+      return;
+    }
+
+    await focusEditor(editorStore.editor);
+
+    if (editorStore.selection?.blockNodeKey) {
+      await loadCodeHighlighter(lang);
+
+      editorStore.editor.update(() => {
+        // https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L713
+        const node = getNodeByKey(/** @type {string} */ (editorStore.selection.blockNodeKey));
+
+        if (isCodeNode(node)) {
+          node.setLanguage(lang);
+          selectedLanguage = lang;
+        }
+      });
+    }
+  }}
+>
+  <Option label={$_('_sui.text_editor.plain_text')} value="" />
+  {#each codeLanguages as { key, label, aliases } (key)}
+    <Option
+      {label}
+      value={key}
+      selected={key === selectedLanguage || aliases.includes(selectedLanguage)}
+    />
+  {/each}
+</Select>

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

@@ -0,0 +1,17 @@
+export default CodeLanguageSwitcher;
+type CodeLanguageSwitcher = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const CodeLanguageSwitcher: import("svelte").Component<{
+    /**
+     * - Whether to disable the switcher.
+     */
+    disabled?: boolean | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * - Whether to disable the switcher.
+     */
+    disabled?: boolean | undefined;
+};

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

@@ -21,22 +21,22 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * Text editor state.
-   * @type {import('../../../typedefs').TextEditorState}
-   */
-  const { editor, editorId, selectionInlineTypes, useRichText } = getContext('state');
+  /** @type {import('../../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
+  const selectionTypeMatches = $derived(editorStore.selection.inlineTypes.includes(type));
 </script>
 
 <Button
   iconic
   aria-label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
-  aria-controls="{$editorId}-lexical-root"
-  disabled={!$useRichText}
-  pressed={$selectionInlineTypes.includes(type)}
+  aria-controls="{editorStore.editorId}-lexical-root"
+  disabled={!editorStore.useRichText}
+  pressed={selectionTypeMatches}
   onclick={async () => {
-    await focusEditor($editor);
-    $editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
+    if (editorStore.editor) {
+      await focusEditor(editorStore.editor);
+      editorStore.editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);
+    }
   }}
 >
   {#snippet startIcon()}

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

@@ -19,20 +19,17 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * Text editor state.
-   * @type {import('../../../typedefs').TextEditorState}
-   */
-  const { editor, editorId, useRichText } = getContext('state');
+  /** @type {import('../../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
 </script>
 
 <Button
   iconic
   aria-label={component.label}
-  aria-controls="{$editorId}-lexical-root"
-  disabled={!$useRichText}
+  aria-controls="{editorStore.editorId}-lexical-root"
+  disabled={!editorStore.useRichText}
   onclick={() => {
-    $editor.update(() => {
+    editorStore.editor?.update(() => {
       insertNodes([component.createNode(), createParagraphNode()]);
     });
   }}

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

@@ -31,11 +31,9 @@
    */
   const type = 'link';
 
-  /**
-   * Text editor state.
-   * @type {import('../../../typedefs').TextEditorState}
-   */
-  const { editor, editorId, selectionInlineTypes, useRichText } = getContext('state');
+  /** @type {import('../../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
+  const selectionTypeMatches = $derived(editorStore.selection.inlineTypes.includes(type));
 
   let openDialog = $state(false);
   /** @type {'create' | 'update' | 'remove'} */
@@ -48,7 +46,7 @@
    * Create a new link by showing a dialog to accept a URL and optionally text.
    */
   const createLink = () => {
-    $editor.getEditorState().read(() => {
+    editorStore.editor?.getEditorState().read(() => {
       const textContent = getTextContent().trim();
 
       anchorURL = textContent;
@@ -62,18 +60,18 @@
    * Remove an existing link.
    */
   const removeLink = () => {
-    $editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    editorStore.editor?.dispatchCommand(TOGGLE_LINK_COMMAND, null);
   };
 
   /**
    * Update an existing link.
    */
   const updateLink = () => {
-    $editor.getEditorState().read(() => {
-      const selection = getSelection();
+    editorStore.editor?.getEditorState().read(() => {
+      const _selection = getSelection();
 
-      if (isRangeSelection(selection)) {
-        const anchor = selection.anchor.getNode();
+      if (isRangeSelection(_selection)) {
+        const anchor = _selection.anchor.getNode();
         const parent = anchor instanceof LinkNode ? anchor : getNearestNodeOfType(anchor, LinkNode);
         const url = parent?.getURL();
 
@@ -97,7 +95,7 @@
    * create a new link.
    */
   const onButtonClick = () => {
-    if ($selectionInlineTypes.includes(type)) {
+    if (selectionTypeMatches) {
       updateLink();
     } else {
       createLink();
@@ -121,19 +119,23 @@
    */
   const onDialogClose = async (event) => {
     if (event.detail.returnValue !== 'cancel' && dialogMode !== 'remove') {
+      if (!editorStore.editor) {
+        return;
+      }
+
       await new Promise((resolve) => {
-        $editor.update(async () => {
-          let selection = getSelection() ?? getPreviousSelection()?.clone();
+        editorStore.editor?.update(async () => {
+          let _selection = getSelection() ?? getPreviousSelection()?.clone();
 
-          if (!isRangeSelection(selection)) {
-            selection = createRangeSelection();
+          if (!isRangeSelection(_selection)) {
+            _selection = createRangeSelection();
           }
 
           if (!hasAnchor) {
             anchorText = anchorText.trim();
             anchorText ||= anchorURL;
 
-            const { anchor, focus } = /** @type {import('lexical').RangeSelection} */ (selection);
+            const { anchor, focus } = /** @type {import('lexical').RangeSelection} */ (_selection);
             const node = createTextNode(anchorText);
             const key = node.getKey();
 
@@ -142,13 +144,13 @@
             focus.set(key, 0, 'text');
           }
 
-          setSelection(selection);
+          setSelection(_selection);
           resolve(undefined);
         });
       });
 
-      await focusEditor($editor);
-      $editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
+      await focusEditor(editorStore.editor);
+      editorStore.editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
     }
 
     anchorURL = '';
@@ -159,7 +161,7 @@
    * Open the dialog with a keyboard shortcut: Accel+K.
    */
   const _registerCommand = () => {
-    $editor.registerCommand(
+    editorStore.editor?.registerCommand(
       KEY_DOWN_COMMAND,
       (event) => {
         if (matchShortcuts(event, isMac() ? 'Meta+K' : 'Ctrl+K')) {
@@ -174,7 +176,7 @@
   };
 
   $effect(() => {
-    if ($editor) {
+    if (editorStore.editor) {
       _registerCommand();
     }
   });
@@ -183,9 +185,9 @@
 <Button
   iconic
   aria-label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
-  aria-controls="{$editorId}-lexical-root"
-  disabled={!$useRichText}
-  pressed={$selectionInlineTypes.includes(type)}
+  aria-controls="{editorStore.editorId}-lexical-root"
+  disabled={!editorStore.useRichText}
+  pressed={selectionTypeMatches}
   onclick={() => {
     onButtonClick();
   }}

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

@@ -19,14 +19,11 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * Text editor state.
-   * @type {import('../../../typedefs').TextEditorState}
-   */
-  const { editor, useRichText } = getContext('state');
+  /** @type {import('../../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
 </script>
 
-<MenuButton disabled={!$useRichText} label={$_('_sui.insert')}>
+<MenuButton disabled={!editorStore.useRichText} label={$_('_sui.insert')}>
   {#snippet endIcon()}
     <Icon name="arrow_drop_down" class="small-arrow" />
   {/snippet}
@@ -36,7 +33,7 @@
         <MenuItem
           {label}
           onclick={() => {
-            $editor.update(() => {
+            editorStore.editor?.update(() => {
               insertNodes([createNode()]);
             });
           }}