@sveltia/ui 0.28.0 → 0.28.2

package/dist/components/text-editor/{index.d.ts → constants.d.ts}

@@ -5,7 +5,7 @@
  * List of available buttons.
  * @type {{ [key: string]: { labelKey: string, icon: string, inline: boolean } }}
  */
-export const availableButtons: {
+export const AVAILABLE_BUTTONS: {
     [key: string]: {
         labelKey: string;
         icon: string;
@@ -15,15 +15,19 @@ export const availableButtons: {
 /**
  * @type {TextEditorFormatType[]}
  */
-export const textFormatButtonTypes: TextEditorFormatType[];
+export const TEXT_FORMAT_BUTTON_TYPES: TextEditorFormatType[];
 /**
  * @type {TextEditorInlineType[]}
  */
-export const inlineButtonTypes: TextEditorInlineType[];
+export const INLINE_BUTTON_TYPES: TextEditorInlineType[];
 /**
  * @type {TextEditorBlockType[]}
  */
-export const blockButtonTypes: TextEditorBlockType[];
+export const BLOCK_BUTTON_TYPES: TextEditorBlockType[];
+/**
+ * Image related components IDs. `linked-image` is used in Sveltia CMS.
+ */
+export const IMAGE_COMPONENT_IDS: string[];
 import type { TextEditorFormatType } from '../../typedefs';
 import type { TextEditorInlineType } from '../../typedefs';
 import type { TextEditorBlockType } from '../../typedefs';

package/dist/components/text-editor/{index.js → constants.js}

@@ -6,7 +6,7 @@
  * List of available buttons.
  * @type {{ [key: string]: { labelKey: string, icon: string, inline: boolean } }}
  */
-export const availableButtons = {
+export const AVAILABLE_BUTTONS = {
   bold: {
     labelKey: 'bold',
     icon: 'format_bold',
@@ -83,18 +83,21 @@ export const availableButtons = {
     inline: false,
   },
 };
+
 /**
  * @type {TextEditorFormatType[]}
  */
-export const textFormatButtonTypes = ['bold', 'italic', 'code'];
+export const TEXT_FORMAT_BUTTON_TYPES = ['bold', 'italic', 'code'];
+
 /**
  * @type {TextEditorInlineType[]}
  */
-export const inlineButtonTypes = [...textFormatButtonTypes, 'link'];
+export const INLINE_BUTTON_TYPES = [...TEXT_FORMAT_BUTTON_TYPES, 'link'];
+
 /**
  * @type {TextEditorBlockType[]}
  */
-export const blockButtonTypes = [
+export const BLOCK_BUTTON_TYPES = [
   'paragraph',
   'heading-1',
   'heading-2',
@@ -107,3 +110,8 @@ export const blockButtonTypes = [
   'blockquote',
   'code-block',
 ];
+
+/**
+ * Image related components IDs. `linked-image` is used in Sveltia CMS.
+ */
+export const IMAGE_COMPONENT_IDS = ['image', 'linked-image'];

package/dist/components/text-editor/core.js

@@ -52,7 +52,7 @@ import {
   $isRangeSelection as isRangeSelection,
 } from 'lexical';
 import prismComponents from 'prismjs/components';
-import { blockButtonTypes, textFormatButtonTypes } from '.';
+import { BLOCK_BUTTON_TYPES, TEXT_FORMAT_BUTTON_TYPES } from './constants';
 import { TABLE } from './transformers/table';
 
 /**
@@ -155,7 +155,7 @@ const getSelectionTypes = () => {
   /** @type {ElementNode | null} */
   let parent = null;
   /** @type {TextEditorInlineType[]} */
-  const inlineTypes = textFormatButtonTypes.filter((type) => selection.hasFormat(type));
+  const inlineTypes = TEXT_FORMAT_BUTTON_TYPES.filter((type) => selection.hasFormat(type));
 
   if (anchor.getType() !== 'root') {
     parent = anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
@@ -194,7 +194,7 @@ const getSelectionTypes = () => {
 
       const type = parent.getType();
 
-      if (blockButtonTypes.includes(/** @type {any} */ (type))) {
+      if (BLOCK_BUTTON_TYPES.includes(/** @type {any} */ (type))) {
         return type;
       }
 

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

@@ -5,10 +5,10 @@
 <script>
   import { setContext, untrack } from 'svelte';
   import { _ } from 'svelte-i18n';
-  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 { BLOCK_BUTTON_TYPES, INLINE_BUTTON_TYPES } from './constants';
   import LexicalRoot from './lexical-root.svelte';
   import { createEditorStore } from './store.svelte';
   import TextEditorToolbar from './toolbar/text-editor-toolbar.svelte';
@@ -51,7 +51,7 @@
     value = $bindable(''),
     flex = false,
     modes = ['rich-text', 'plain-text'],
-    buttons = [...inlineButtonTypes, ...blockButtonTypes],
+    buttons = [...INLINE_BUTTON_TYPES, ...BLOCK_BUTTON_TYPES],
     components = [],
     hidden = false,
     disabled = false,

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

@@ -2,9 +2,9 @@
   import { FORMAT_TEXT_COMMAND } from 'lexical';
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import { availableButtons } from '..';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
+  import { AVAILABLE_BUTTONS } from '../constants';
   import { focusEditor } from '../core';
 
   /**
@@ -32,7 +32,7 @@
 
 <Button
   iconic
-  aria-label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
+  aria-label={$_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
   aria-controls="{editorStore.editorId}-lexical-root"
   disabled={!editorStore.useRichText}
   pressed={selectionTypeMatches}
@@ -44,6 +44,6 @@
   }}
 >
   {#snippet startIcon()}
-    <Icon name={availableButtons[type].icon} />
+    <Icon name={AVAILABLE_BUTTONS[type].icon} />
   {/snippet}
 </Button>

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

@@ -15,12 +15,12 @@
   } from 'lexical';
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import { availableButtons } from '..';
   import { isMac, matchShortcuts } from '../../../services/events.svelte';
   import Button from '../../button/button.svelte';
   import Dialog from '../../dialog/dialog.svelte';
   import Icon from '../../icon/icon.svelte';
   import TextInput from '../../text-field/text-input.svelte';
+  import { AVAILABLE_BUTTONS } from '../constants';
   import { focusEditor } from '../core';
 
   /**
@@ -188,7 +188,7 @@
 
 <Button
   iconic
-  aria-label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
+  aria-label={$_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
   aria-controls="{editorStore.editorId}-lexical-root"
   disabled={!editorStore.useRichText}
   pressed={selectionTypeMatches}
@@ -197,7 +197,7 @@
   }}
 >
   {#snippet startIcon()}
-    <Icon name={availableButtons[type].icon} />
+    <Icon name={AVAILABLE_BUTTONS[type].icon} />
   {/snippet}
 </Button>
 

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

@@ -2,7 +2,6 @@
   import { unique } from '@sveltia/utils/array';
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import { availableButtons, blockButtonTypes, inlineButtonTypes } from '..';
   import ButtonGroup from '../../button/button-group.svelte';
   import Button from '../../button/button.svelte';
   import Divider from '../../divider/divider.svelte';
@@ -10,6 +9,12 @@
   import Icon from '../../icon/icon.svelte';
   import MenuButton from '../../menu/menu-button.svelte';
   import Menu from '../../menu/menu.svelte';
+  import {
+    AVAILABLE_BUTTONS,
+    BLOCK_BUTTON_TYPES,
+    IMAGE_COMPONENT_IDS,
+    INLINE_BUTTON_TYPES,
+  } from '../constants';
   import CodeLanguageSwitcher from './code-language-switcher.svelte';
   import FormatTextButton from './format-text-button.svelte';
   import InsertImageButton from './insert-image-button.svelte';
@@ -43,9 +48,11 @@
 
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
-  const imageComponent = $derived(editorStore.config.components.find(({ id }) => id === 'image'));
+  const imageComponent = $derived(
+    editorStore.config.components.find(({ id }) => IMAGE_COMPONENT_IDS.includes(id)),
+  );
   const otherComponents = $derived(
-    editorStore.config.components.filter(({ id }) => id !== 'image'),
+    editorStore.config.components.filter(({ id }) => !IMAGE_COMPONENT_IDS.includes(id)),
   );
 
   /**
@@ -56,7 +63,7 @@
     unique([
       'paragraph', // Always needed
       ...editorStore.config.enabledButtons.filter((type) =>
-        blockButtonTypes.includes(/** @type {any} */ (type)),
+        BLOCK_BUTTON_TYPES.includes(/** @type {any} */ (type)),
       ),
     ]),
   );
@@ -68,7 +75,7 @@
   const inlineLevelButtons = $derived(
     unique([
       ...editorStore.config.enabledButtons.filter((type) =>
-        inlineButtonTypes.includes(/** @type {any} */ (type)),
+        INLINE_BUTTON_TYPES.includes(/** @type {any} */ (type)),
       ),
     ]),
   );
@@ -82,7 +89,7 @@
   >
     {#snippet startIcon()}
       <Icon
-        name={availableButtons[editorStore.selection.blockType ?? '']?.icon ?? 'format_paragraph'}
+        name={AVAILABLE_BUTTONS[editorStore.selection.blockType ?? '']?.icon ?? 'format_paragraph'}
       />
     {/snippet}
     {#snippet popup()}

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

@@ -12,9 +12,9 @@
   } from 'lexical';
   import { getContext } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import { availableButtons } from '..';
   import Icon from '../../icon/icon.svelte';
   import MenuItemCheckbox from '../../menu/menu-item-checkbox.svelte';
+  import { AVAILABLE_BUTTONS } from '../constants';
   import { focusEditor } from '../core';
 
   /**
@@ -90,7 +90,7 @@
 
 {#key selectionTypeMatches}
   <MenuItemCheckbox
-    label={$_(`_sui.text_editor.${availableButtons[type].labelKey}`)}
+    label={$_(`_sui.text_editor.${AVAILABLE_BUTTONS[type].labelKey}`)}
     checked={selectionTypeMatches}
     onclick={() => {
       if (!selectionTypeMatches) {
@@ -99,7 +99,7 @@
     }}
   >
     {#snippet startIcon()}
-      <Icon name={availableButtons[type].icon} />
+      <Icon name={AVAILABLE_BUTTONS[type].icon} />
     {/snippet}
   </MenuItemCheckbox>
 {/key}

package/dist/services/i18n.js

@@ -10,7 +10,7 @@ import { addMessages, locale as appLocale, init } from 'svelte-i18n';
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
   /** @type {{ [key: string]: { strings: object }}} */
-  const modules = import.meta.glob('./locales/*.js', { eager: true });
+  const modules = import.meta.glob('../locales/*.js', { eager: true });
 
   Object.entries(modules).forEach(([path, { strings }]) => {
     const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -49,15 +49,15 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/kit": "^2.39.1",
-    "@sveltejs/package": "^2.5.1",
+    "@sveltejs/kit": "^2.40.0",
+    "@sveltejs/package": "^2.5.2",
     "@sveltejs/vite-plugin-svelte": "6.2.0",
     "cspell": "^9.2.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^57.0.7",
+    "eslint-plugin-jsdoc": "^57.0.10",
     "eslint-plugin-svelte": "^2.46.1",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",