@sveltia/ui 0.12.1 → 0.12.2

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

@@ -68,7 +68,7 @@
   const selectionBlockType = writable('paragraph');
   const selectionInlineTypes = writable([]);
   const editorId = writable(generateElementId('editor'));
-  const useRichText = writable(modes.includes('rich-text'));
+  const useRichText = writable(modes[0] === 'rich-text');
   const hasConverterError = writable(false);
   let showConverterError = false;
 

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

@@ -6,8 +6,8 @@
   import Spacer from '../../divider/spacer.svelte';
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
-  import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
   import Menu from '../../menu/menu.svelte';
+  import Switch from '../../switch/switch.svelte';
   import {
     availableButtons,
     blockButtonTypes,
@@ -99,29 +99,20 @@
     {/if}
     <Spacer flex />
     {#if modes.length > 1}
-      <MenuButton
-        variant="ghost"
-        iconic
+      <Switch
         disabled={$hasConverterError}
-        popupPosition="bottom-right"
-        aria-label={$_('_sui.text_editor.show_edit_options')}
-      >
-        <Icon slot="start-icon" name="more_vert" />
-        <Menu slot="popup" aria-label={$_('_sui.text_editor.edit_options')}>
-          <MenuItemCheckbox
-            label={$_('_sui.text_editor.use_rich_text')}
-            bind:checked={$useRichText}
-            on:change={async () => {
-              // Wait for `$useRichText` to be updated
-              await tick();
+        bind:checked={$useRichText}
+        label={$_('_sui.text_editor.rich_text')}
+        aria-label={$_('_sui.text_editor.use_rich_text_mode')}
+        on:change={async () => {
+          // Wait for `$useRichText` to be updated
+          await tick();
 
-              if ($useRichText) {
-                convertMarkdown();
-              }
-            }}
-          />
-        </Menu>
-      </MenuButton>
+          if ($useRichText) {
+            convertMarkdown();
+          }
+        }}
+      />
     {/if}
   </Toolbar>
 </div>
@@ -141,7 +132,10 @@
   padding: 8px;
   background-color: var(--sui-tertiary-background-color);
 }
-.wrapper :global(button) {
+.wrapper :global(.sui.menu-button) {
+  padding: 0 4px;
+}
+.wrapper :global(.sui.button) {
   flex: none;
   margin: 0 !important;
 }

package/package/locales/en.d.ts

@@ -57,9 +57,8 @@ export namespace strings {
         export const update_link: string;
         export const text: string;
         export const url: string;
-        export const edit_options: string;
-        export const show_edit_options: string;
-        export const use_rich_text: string;
+        export const rich_text: string;
+        export const use_rich_text_mode: string;
         export const converter_error: string;
     }
 }

package/package/locales/en.js

@@ -56,9 +56,8 @@ export const strings = {
     update_link: 'Update Link',
     text: 'Text',
     url: 'URL',
-    edit_options: 'Edit Options',
-    show_edit_options: 'Show Edit Options',
-    use_rich_text: 'Use Rich Text',
+    rich_text: 'Rich Text',
+    use_rich_text_mode: 'Use Rich Text Mode',
     converter_error:
       'There was an error while enabling rich text mode. Please use the plain text editor instead.',
   },

package/package/locales/ja.d.ts

@@ -57,9 +57,8 @@ export namespace strings {
         export const update_link: string;
         export const text: string;
         export const url: string;
-        export const edit_options: string;
-        export const show_edit_options: string;
-        export const use_rich_text: string;
+        export const rich_text: string;
+        export const use_rich_text_mode: string;
         export const converter_error: string;
     }
 }

package/package/locales/ja.js

@@ -56,9 +56,8 @@ export const strings = {
     update_link: 'リンクを更新',
     text: 'テキスト',
     url: 'URL',
-    edit_options: '編集オプション',
-    show_edit_options: '編集オプションを表示',
-    use_rich_text: 'リッチテキストを使用',
+    rich_text: 'リッチテキスト',
+    use_rich_text_mode: 'リッチテキストモードを使用',
     converter_error:
       'リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -32,7 +32,7 @@
     "@lexical/selection": "^0.14.5",
     "@lexical/table": "^0.14.5",
     "@lexical/utils": "^0.14.5",
-    "@sveltia/utils": "^0.1.0",
+    "@sveltia/utils": "^0.1.1",
     "lexical": "^0.14.5",
     "svelte": "^4.2.15"
   },