@sveltia/ui 0.77.2 → 0.77.3

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

@@ -1,4 +1,5 @@
 <script>
+  import { $getRoot as getRoot } from 'lexical';
   import { getContext, onMount } from 'svelte';
   import { initEditor } from './core.js';
 
@@ -10,6 +11,8 @@
   /**
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {'ltr' | 'rtl' | 'auto'} [dir] Direction of the text. With `auto` or no value, each
+   * paragraph takes the direction of its own text.
    * @property {boolean} [hidden] Whether to hide the widget.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
@@ -28,6 +31,7 @@
   let {
     /* eslint-disable prefer-const */
     class: className,
+    dir = undefined,
     hidden = false,
     disabled = false,
     readonly = false,
@@ -53,6 +57,26 @@
     editorStore.editor?.setEditable(editable);
   });
 
+  $effect(() => {
+    // Lexical owns the root element’s `dir` attribute, so set the direction on the root node, which
+    // the paragraphs then follow. Without one, each paragraph gets `dir="auto"`
+    const { editor } = editorStore;
+    const direction = dir === 'ltr' || dir === 'rtl' ? dir : null;
+
+    // Check first, as even an update that changes nothing makes the editor convert its content
+    if (!editor || editor.getEditorState().read(() => getRoot().getDirection()) === direction) {
+      return;
+    }
+
+    editor.update(
+      () => {
+        getRoot().setDirection(direction);
+      },
+      // Keep the change out of the undo history
+      { tag: 'history-merge' },
+    );
+  });
+
   /**
    * Update {@link value} and other state variables whenever the editor content is updated.
    * @param {Event} event `Update` custom event.

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

@@ -8,6 +8,11 @@ declare const LexicalRoot: import("svelte").Component<{
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * Direction of the text. With `auto` or no value, each
+     * paragraph takes the direction of its own text.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Whether to hide the widget.
      */
@@ -42,6 +47,11 @@ type Props = {
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * Direction of the text. With `auto` or no value, each
+     * paragraph takes the direction of its own text.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Whether to hide the widget.
      */

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.77.3";

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.77.3';

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

@@ -23,7 +23,8 @@
    * @typedef {object} Props
    * @property {string} [value] Input value.
    * @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.
@@ -137,6 +138,7 @@
   <TextEditorToolbar {disabled} {readonly} />
   <LexicalRoot
     {...labelAttrs}
+    {dir}
     hidden={!editorStore.useRichText || hidden}
     {disabled}
     {readonly}

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

@@ -14,7 +14,8 @@ declare const TextEditor: import("svelte").Component<{
      */
     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;
     /**
@@ -96,7 +97,8 @@ type Props = {
      */
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.77.2",
+  "version": "0.77.3",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",