@sveltia/ui 0.23.2 → 0.24.1

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

@@ -10,12 +10,13 @@
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
   import Menu from '../../menu/menu.svelte';
-  import Toolbar from '../../toolbar/toolbar.svelte';
+  import CodeLanguageSwitcher from './code-language-switcher.svelte';
   import FormatTextButton from './format-text-button.svelte';
   import InsertImageButton from './insert-image-button.svelte';
   import InsertLinkButton from './insert-link-button.svelte';
   import InsertMenuButton from './insert-menu-button.svelte';
   import ToggleBlockMenuItem from './toggle-block-menu-item.svelte';
+  import ToolbarWrapper from './toolbar-wrapper.svelte';
 
   /**
    * @typedef {object} Props
@@ -36,23 +37,12 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * Text editor state.
-   * @type {import('../../../typedefs').TextEditorState}
-   */
-  const {
-    editorId,
-    selectionBlockType,
-    modes,
-    useRichText,
-    hasConverterError,
-    enabledButtons,
-    components,
-    convertMarkdown,
-  } = getContext('state');
-
-  const imageComponent = $derived(components.find(({ id }) => id === 'image'));
-  const otherComponents = $derived(components.filter(({ id }) => id !== 'image'));
+  /** @type {import('../../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
+  const imageComponent = $derived(editorStore.config.components.find(({ id }) => id === 'image'));
+  const otherComponents = $derived(
+    editorStore.config.components.filter(({ id }) => id !== 'image'),
+  );
 
   /**
    * Enabled block level buttons.
@@ -61,7 +51,9 @@
   const blockLevelButtons = $derived(
     unique([
       'paragraph', // Always needed
-      ...enabledButtons.filter((type) => blockButtonTypes.includes(/** @type {any} */ (type))),
+      ...editorStore.config.enabledButtons.filter((type) =>
+        blockButtonTypes.includes(/** @type {any} */ (type)),
+      ),
     ]),
   );
 
@@ -71,29 +63,36 @@
    */
   const inlineLevelButtons = $derived(
     unique([
-      ...enabledButtons.filter((type) => inlineButtonTypes.includes(/** @type {any} */ (type))),
+      ...editorStore.config.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"
-    >
-      {#snippet startIcon()}
-        <Icon name={availableButtons[$selectionBlockType]?.icon ?? 'format_paragraph'} />
-      {/snippet}
-      {#snippet popup()}
-        <Menu aria-label={$_('_sui.text_editor.text_style_options')}>
-          {#each blockLevelButtons as type (type)}
-            <ToggleBlockMenuItem {type} />
-          {/each}
-        </Menu>
-      {/snippet}
-    </MenuButton>
+<ToolbarWrapper disabled={disabled || readonly} aria-label={$_('_sui.text_editor.text_editor')}>
+  <MenuButton
+    disabled={!editorStore.useRichText}
+    aria-label={$_('_sui.text_editor.show_text_style_options')}
+    aria-controls="{editorStore.editorId}-lexical-root"
+  >
+    {#snippet startIcon()}
+      <Icon
+        name={availableButtons[editorStore.selection.blockType ?? '']?.icon ?? 'format_paragraph'}
+      />
+    {/snippet}
+    {#snippet popup()}
+      <Menu aria-label={$_('_sui.text_editor.text_style_options')}>
+        {#each blockLevelButtons as type (type)}
+          <ToggleBlockMenuItem {type} />
+        {/each}
+      </Menu>
+    {/snippet}
+  </MenuButton>
+  {#if editorStore.selection.blockType === 'code-block'}
+    <Divider orientation="vertical" />
+    <CodeLanguageSwitcher disabled={!editorStore.useRichText} />
+  {:else}
     {#if inlineLevelButtons.length}
       <Divider orientation="vertical" />
       <ButtonGroup>
@@ -106,7 +105,7 @@
         {/each}
       </ButtonGroup>
     {/if}
-    {#if components.length}
+    {#if editorStore.config.components.length}
       <Divider orientation="vertical" />
       {#if imageComponent}
         <InsertImageButton component={imageComponent} />
@@ -115,52 +114,25 @@
         <InsertMenuButton components={otherComponents} />
       {/if}
     {/if}
-    <Spacer flex />
-    {#if modes.length > 1}
-      <Button
-        iconic
-        disabled={$hasConverterError}
-        pressed={!$useRichText}
-        aria-label={$_('_sui.text_editor.edit_in_markdown')}
-        onclick={() => {
-          $useRichText = !$useRichText;
-
-          if ($useRichText) {
-            convertMarkdown();
-          }
-        }}
-      >
-        {#snippet startIcon()}
-          <Icon name="markdown" />
-        {/snippet}
-      </Button>
-    {/if}
-  </Toolbar>
-</div>
+  {/if}
+  <Spacer flex />
+  {#if editorStore.config.modes.length > 1}
+    <Button
+      iconic
+      disabled={editorStore.hasConverterError}
+      pressed={!editorStore.useRichText}
+      aria-label={$_('_sui.text_editor.edit_in_markdown')}
+      onclick={() => {
+        editorStore.useRichText = !editorStore.useRichText;
 
-<style>.wrapper {
-  display: contents;
-}
-.wrapper :global([role="toolbar"]) {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  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(.sui.menu-button) {
-  padding: 0 4px;
-}
-.wrapper :global(.sui.button) {
-  flex: none;
-  margin: 0 !important;
-}
-.wrapper :global(.sui.button-group) {
-  gap: 4px;
-}</style>
+        if (editorStore.useRichText) {
+          editorStore.convertMarkdown();
+        }
+      }}
+    >
+      {#snippet startIcon()}
+        <Icon name="markdown" />
+      {/snippet}
+    </Button>
+  {/if}
+</ToolbarWrapper>

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

@@ -0,0 +1,37 @@
+export default TextEditorToolbar;
+type TextEditorToolbar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+declare const TextEditorToolbar: import("svelte").Component<{
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+};

package/dist/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -31,27 +31,24 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * Text editor state.
-   * @type {import('../../../typedefs').TextEditorState}
-   */
-  const { editor, selectionBlockType } = getContext('state');
-
-  /**
-   * Whether the current selection matches the button {@link type}.
-   */
-  const selectionTypeMatches = $derived($selectionBlockType === type);
+  /** @type {import('../../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
+  const selectionTypeMatches = $derived(editorStore.selection.blockType === type);
 
   /**
    * Change the current selection’s type to {@link type}.
    */
   const changeBlockType = async () => {
-    await focusEditor($editor);
+    if (!editorStore.editor) {
+      return;
+    }
+
+    await focusEditor(editorStore.editor);
 
     const [, headingLevel] = type.match(/^heading-(\d)$/) ?? [];
 
     if (headingLevel) {
-      $editor.update(() => {
+      editorStore.editor.update(() => {
         setBlocksType(getSelection(), () =>
           createHeadingNode(
             /** @type {import('@lexical/rich-text').HeadingTagType} */ (`h${headingLevel}`),
@@ -61,27 +58,27 @@
     }
 
     if (type === 'paragraph') {
-      $editor.update(() => {
+      editorStore.editor.update(() => {
         setBlocksType(getSelection(), () => createParagraphNode());
       });
     }
 
     if (type === 'bulleted-list') {
-      $editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+      editorStore.editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
     }
 
     if (type === 'numbered-list') {
-      $editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+      editorStore.editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
     }
 
     if (type === 'blockquote') {
-      $editor.update(() => {
+      editorStore.editor.update(() => {
         setBlocksType(getSelection(), () => createQuoteNode());
       });
     }
 
     if (type === 'code-block') {
-      $editor.update(() => {
+      editorStore.editor.update(() => {
         setBlocksType(getSelection(), () => createCodeNode());
       });
     }

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

@@ -0,0 +1,58 @@
+<script>
+  import Toolbar from '../../toolbar/toolbar.svelte';
+
+  /**
+   * @typedef {object} Props
+   * @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.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    code = $bindable(''),
+    lang = $bindable(''),
+    disabled = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<div role="none" class="wrapper">
+  <Toolbar {...restProps} {disabled}>
+    {@render children?.()}
+  </Toolbar>
+</div>
+
+<style>.wrapper {
+  display: contents;
+}
+.wrapper :global([role="toolbar"]) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  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(.sui.menu-button) {
+  padding: 0 4px;
+}
+.wrapper :global(.sui.button) {
+  flex: none;
+  margin: 0 !important;
+}
+.wrapper :global(.sui.button-group) {
+  gap: 4px;
+}</style>

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

@@ -0,0 +1,37 @@
+export default ToolbarWrapper;
+type ToolbarWrapper = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+declare const ToolbarWrapper: import("svelte").Component<{
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {}, "code" | "lang">;
+type Props = {
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/dist/components/util/app-shell.svelte

@@ -126,7 +126,7 @@
   --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
   --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
   --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
-  --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
+  --sui-code-background-color: hsl(var(--sui-background-color-3-hsl));
   --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
   --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
   --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
@@ -182,7 +182,7 @@
   --sui-font-weight-normal: 325;
   --sui-font-weight-bold: 625;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 0.9em;
+  --sui-font-size-monospace: 0.95em;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { default as TabList } from "./components/tabs/tab-list.svelte";
 export { default as TabPanel } from "./components/tabs/tab-panel.svelte";
 export { default as TabPanels } from "./components/tabs/tab-panels.svelte";
 export { default as Tab } from "./components/tabs/tab.svelte";
+export { default as CodeEditor } from "./components/text-editor/code-editor.svelte";
 export { default as TextEditor } from "./components/text-editor/text-editor.svelte";
 export { default as NumberInput } from "./components/text-field/number-input.svelte";
 export { default as PasswordInput } from "./components/text-field/password-input.svelte";

package/dist/index.js

@@ -83,6 +83,7 @@ export { default as TabList } from './components/tabs/tab-list.svelte';
 export { default as TabPanel } from './components/tabs/tab-panel.svelte';
 export { default as TabPanels } from './components/tabs/tab-panels.svelte';
 export { default as Tab } from './components/tabs/tab.svelte';
+export { default as CodeEditor } from './components/text-editor/code-editor.svelte';
 export { default as TextEditor } from './components/text-editor/text-editor.svelte';
 export { default as NumberInput } from './components/text-field/number-input.svelte';
 export { default as PasswordInput } from './components/text-field/password-input.svelte';

package/dist/locales/en.d.ts

@@ -37,6 +37,7 @@ export namespace strings {
     namespace text_editor {
         let text_editor_1: string;
         export { text_editor_1 as text_editor };
+        export let code_editor: string;
         export let text_style_options: string;
         export let show_text_style_options: string;
         export let paragraph: string;
@@ -60,5 +61,7 @@ export namespace strings {
         export let url: string;
         export let edit_in_markdown: string;
         export let converter_error: string;
+        export let language: string;
+        export let plain_text: string;
     }
 }

package/dist/locales/en.js

@@ -36,6 +36,7 @@ export const strings = {
   },
   text_editor: {
     text_editor: 'Text Editor',
+    code_editor: 'Code Editor',
     text_style_options: 'Text Style Options',
     show_text_style_options: 'Show Text Style Options',
     paragraph: 'Paragraph',
@@ -60,5 +61,7 @@ export const strings = {
     edit_in_markdown: 'Edit in Markdown',
     converter_error:
       'There was an error while enabling rich text mode. Please use the plain text editor instead.',
+    language: 'Language',
+    plain_text: 'Plain Text',
   },
 };

package/dist/locales/ja.d.ts

@@ -37,6 +37,7 @@ export namespace strings {
     namespace text_editor {
         let text_editor_1: string;
         export { text_editor_1 as text_editor };
+        export let code_editor: string;
         export let text_style_options: string;
         export let show_text_style_options: string;
         export let paragraph: string;
@@ -60,5 +61,7 @@ export namespace strings {
         export let url: string;
         export let edit_in_markdown: string;
         export let converter_error: string;
+        export let language: string;
+        export let plain_text: string;
     }
 }

package/dist/locales/ja.js

@@ -36,6 +36,7 @@ export const strings = {
   },
   text_editor: {
     text_editor: 'テキストエディター',
+    code_editor: 'コードエディター',
     text_style_options: 'テキストスタイルオプション',
     show_text_style_options: 'テキストスタイルオプションを表示',
     paragraph: '段落',
@@ -60,5 +61,7 @@ export const strings = {
     edit_in_markdown: 'マークダウンで編集',
     converter_error:
       'リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。',
+    language: '言語',
+    plain_text: 'プレーンテキスト',
   },
 };

package/dist/styles/variables.scss

@@ -102,7 +102,7 @@
     --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
     --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
     --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
-    --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
+    --sui-code-background-color: hsl(var(--sui-background-color-3-hsl));
     --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
     --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
     --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
@@ -162,7 +162,7 @@
     --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
     --sui-font-weight-bold: 625; // ditto
     --sui-font-family-monospace: "Noto Sans Mono", monospace;
-    --sui-font-size-monospace: 0.9em;
+    --sui-font-size-monospace: 0.95em;
     --sui-line-height-default: 1.25;
     --sui-line-height-compact: 1.5;
     --sui-line-height-comfortable: 1.75;

package/dist/typedefs.d.ts

@@ -572,51 +572,84 @@ export type TextEditorComponent = {
      */
     transformer: import("@lexical/markdown").Transformer;
 };
-export type TextEditorState = {
+export type TextEditorConfig = {
     /**
-     * - Lexical
-     * editor instance.
+     * - Enabled modes.
      */
-    editor: import("svelte/store").Writable<import("lexical").LexicalEditor>;
+    modes: TextEditorMode[];
     /**
-     * - Random ID assigned to the editor.
+     * - Enabled buttons for
+     * the editor.
      */
-    editorId: import("svelte/store").Writable<string>;
+    enabledButtons: (TextEditorBlockType | TextEditorInlineType)[];
     /**
-     * - Block level
-     * type of the current selection.
+     * - Editor components.
      */
-    selectionBlockType: import("svelte/store").Writable<TextEditorBlockType>;
+    components: TextEditorComponent[];
     /**
-     * - Inline
-     * level types of the current selection.
+     * - Whether the editor is used as a code editor.
      */
-    selectionInlineTypes: import("svelte/store").Writable<TextEditorInlineType[]>;
+    isCodeEditor: boolean;
     /**
-     * - Enabled modes.
+     * - Default language for the code editor.
      */
-    modes: TextEditorMode[];
+    defaultLanguage?: string | undefined;
+};
+export type TextEditorSelectionState = {
     /**
-     * - Whether to use rich text mode.
-     * If `false`, the editor shows the plain text editor.
+     * - Block level node key.
      */
-    useRichText: import("svelte/store").Writable<boolean>;
+    blockNodeKey: string | null;
     /**
-     * - `true` if there was an
-     * error while converting Markdown to Lexical nodes.
+     * - Block level type of the current selection.
      */
-    hasConverterError: import("svelte/store").Writable<boolean>;
+    blockType: TextEditorBlockType;
     /**
-     * - Enabled buttons for
-     * the editor.
+     * - Inline level types of the current selection.
      */
-    enabledButtons: (TextEditorBlockType | TextEditorInlineType)[];
+    inlineTypes: TextEditorInlineType[];
+};
+export type TextEditorStore = {
     /**
-     * - Editor components.
+     * - Lexical editor instance.
      */
-    components: TextEditorComponent[];
+    editor: import("lexical").LexicalEditor | undefined;
+    /**
+     * - Whether the Lexical editor is initialized.
+     */
+    initialized: boolean;
+    /**
+     * - Random ID assigned to the editor.
+     */
+    editorId: string;
+    /**
+     * - Editor configuration.
+     */
+    config: TextEditorConfig;
+    /**
+     * - Value entered the Lexical editor.
+     */
+    inputValue: string;
+    /**
+     * - Current selection state.
+     */
+    selection: TextEditorSelectionState;
+    /**
+     * - Whether to use rich text mode. If `false`, the editor shows the
+     * plain text editor.
+     */
+    useRichText: boolean;
+    /**
+     * - Whether there was an error while converting Markdown to
+     * Lexical nodes.
+     */
+    hasConverterError: boolean;
+    /**
+     * - Whether to show a converter error in the UI.
+     */
+    showConverterError: boolean;
     /**
      * - Function to trigger the Lexical converter.
      */
-    convertMarkdown: Function;
+    convertMarkdown: () => Promise<void>;
 };