@sveltia/ui 0.25.7 → 0.25.9

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

@@ -6,101 +6,102 @@ type CodeEditor = {
 /** A code editor based on Lexical. */
 declare const CodeEditor: import("svelte").Component<{
     /**
-     * - Input value.
+     * Input value.
      */
     code?: string | undefined;
     /**
-     * - Selected language.
+     * Selected language.
      */
     lang?: string | undefined;
     /**
-     * - Whether to show the language selector.
+     * Whether to show the language selector.
      */
     showLanguageSwitcher?: boolean | undefined;
     /**
-     * - Make the text input container flexible.
+     * Make the text input container flexible.
      */
     flex?: boolean | undefined;
     /**
-     * - The `class` attribute on the wrapper element.
+     * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
     /**
-     * - Whether to hide the widget.
+     * Whether to hide the widget.
      */
     hidden?: boolean | undefined;
     /**
-     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * 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
+     * Whether to make the widget read-only. An alias of the
      * `aria-readonly` attribute.
      */
     readonly?: boolean | undefined;
     /**
-     * - Whether to mark the widget required. An alias of the
+     * Whether to mark the widget required. An alias of the
      * `aria-required` attribute.
      */
     required?: boolean | undefined;
     /**
-     * - Whether to mark the widget invalid. An alias of the
+     * Whether to mark the widget invalid. An alias of the
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
     /**
-     * - Primary slot content.
+     * Primary slot content.
      */
-    children?: import("svelte").Snippet<[]> | undefined;
+    children?: Snippet<[]> | undefined;
 } & Record<string, any>, {}, "code" | "lang">;
 type Props = {
     /**
-     * - Input value.
+     * Input value.
      */
     code?: string | undefined;
     /**
-     * - Selected language.
+     * Selected language.
      */
     lang?: string | undefined;
     /**
-     * - Whether to show the language selector.
+     * Whether to show the language selector.
      */
     showLanguageSwitcher?: boolean | undefined;
     /**
-     * - Make the text input container flexible.
+     * Make the text input container flexible.
      */
     flex?: boolean | undefined;
     /**
-     * - The `class` attribute on the wrapper element.
+     * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
     /**
-     * - Whether to hide the widget.
+     * Whether to hide the widget.
      */
     hidden?: boolean | undefined;
     /**
-     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * 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
+     * Whether to make the widget read-only. An alias of the
      * `aria-readonly` attribute.
      */
     readonly?: boolean | undefined;
     /**
-     * - Whether to mark the widget required. An alias of the
+     * Whether to mark the widget required. An alias of the
      * `aria-required` attribute.
      */
     required?: boolean | undefined;
     /**
-     * - Whether to mark the widget invalid. An alias of the
+     * Whether to mark the widget invalid. An alias of the
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
     /**
-     * - Primary slot content.
+     * Primary slot content.
      */
-    children?: import("svelte").Snippet<[]> | undefined;
+    children?: Snippet<[]> | undefined;
 };
+import type { Snippet } from 'svelte';

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

@@ -1,4 +1,6 @@
-export function initEditor({ components, isCodeEditor, defaultLanguage }: import("../../typedefs").TextEditorConfig): import("lexical").LexicalEditor;
+export function initEditor({ components, isCodeEditor, defaultLanguage }: TextEditorConfig): LexicalEditor;
 export function loadCodeHighlighter(lang: string): Promise<void>;
-export function convertMarkdownToLexical(editor: import("lexical").LexicalEditor, value: string): Promise<void>;
-export function focusEditor(editor: import("lexical").LexicalEditor): Promise<void>;
+export function convertMarkdownToLexical(editor: LexicalEditor, value: string): Promise<void>;
+export function focusEditor(editor: LexicalEditor): Promise<void>;
+import type { TextEditorConfig } from '../../typedefs';
+import type { LexicalEditor } from 'lexical';

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

@@ -52,13 +52,26 @@ import {
 } from 'lexical';
 import prismComponents from 'prismjs/components';
 import { blockButtonTypes, textFormatButtonTypes } from '.';
+import { dependencies } from '../../../../package.json';
 import { TABLE } from './transformers/table';
 
+/**
+ * @import { CreateEditorArgs, LexicalEditor } from 'lexical';
+ * @import {
+ * TextEditorBlockType,
+ * TextEditorConfig,
+ * TextEditorInlineType,
+ * TextEditorSelectionState,
+ * } from '../../typedefs';
+ */
+
 const allTransformers = [...TRANSFORMERS, TABLE];
+const prismVersion = dependencies.prismjs.replace(/^\D/, '');
+const prismBaseURL = `https://unpkg.com/prismjs@${prismVersion}`;
 
 /**
  * Lexical editor configuration.
- * @type {import('lexical').CreateEditorArgs}
+ * @type {CreateEditorArgs}
  */
 const editorConfig = {
   namespace: 'editor',
@@ -126,7 +139,7 @@ const editorConfig = {
 
 /**
  * Get the current selection’s block node key as well as block and inline level types.
- * @returns {import('../../typedefs').TextEditorSelectionState} Current selection state.
+ * @returns {TextEditorSelectionState} Current selection state.
  */
 const getSelectionTypes = () => {
   const selection = getSelection();
@@ -142,7 +155,7 @@ const getSelectionTypes = () => {
   const anchor = selection.anchor.getNode();
   /** @type {ElementNode | null} */
   let parent = null;
-  /** @type {import('../../typedefs').TextEditorInlineType[]} */
+  /** @type {TextEditorInlineType[]} */
   const inlineTypes = textFormatButtonTypes.filter((type) => selection.hasFormat(type));
 
   if (anchor.getType() !== 'root') {
@@ -158,7 +171,7 @@ const getSelectionTypes = () => {
     }
   }
 
-  const blockType = /** @type {import('../../typedefs').TextEditorBlockType} */ (
+  const blockType = /** @type {TextEditorBlockType} */ (
     (() => {
       if (!parent) {
         return 'paragraph';
@@ -199,7 +212,7 @@ const getSelectionTypes = () => {
 
 /**
  * Listen to changes made on the editor and trigger the Update event.
- * @param {import('lexical').LexicalEditor} editor - Editor instance.
+ * @param {LexicalEditor} editor Editor instance.
  */
 const onEditorUpdate = (editor) => {
   editor.getRootElement()?.dispatchEvent(
@@ -217,8 +230,8 @@ const onEditorUpdate = (editor) => {
 
 /**
  * Initialize the Lexical editor.
- * @param {import('../../typedefs').TextEditorConfig} config - Editor configuration.
- * @returns {import('lexical').LexicalEditor} Editor instance.
+ * @param {TextEditorConfig} config Editor configuration.
+ * @returns {LexicalEditor} Editor instance.
  */
 export const initEditor = ({ components = [], isCodeEditor = false, defaultLanguage = '' }) => {
   components.forEach(({ node, transformer }) => {
@@ -343,7 +356,7 @@ export const initEditor = ({ components = [], isCodeEditor = false, defaultLangu
 
 /**
  * Load additional Prism syntax highlighter settings for the given programming language.
- * @param {string} lang - Language name, like scss.
+ * @param {string} lang Language name, like scss.
  */
 export const loadCodeHighlighter = async (lang) => {
   if (lang in window.Prism.languages) {
@@ -361,10 +374,8 @@ export const loadCodeHighlighter = async (lang) => {
   }
 
   try {
-    await import(
-      // eslint-disable-next-line jsdoc/no-bad-blocks
-      /* @vite-ignore */ `https://unpkg.com/prismjs@1.29.0/components/prism-${canonicalLang}.min.js`
-    );
+    // eslint-disable-next-line jsdoc/no-bad-blocks
+    await import(/* @vite-ignore */ `${prismBaseURL}/components/prism-${canonicalLang}.min.js`);
   } catch {
     //
   }
@@ -372,8 +383,8 @@ export const loadCodeHighlighter = async (lang) => {
 
 /**
  * Convert Markdown to Lexical nodes.
- * @param {import('lexical').LexicalEditor} editor - Editor instance.
- * @param {string} value - Current Markdown value.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {string} value Current Markdown value.
  * @returns {Promise<void>} Nothing.
  * @throws {Error} Failed to convert the value to Lexical nodes.
  */
@@ -399,7 +410,7 @@ export const convertMarkdownToLexical = async (editor, value) => {
 
 /**
  * Move focus to the editor so the user can start editing immediately.
- * @param {import('lexical').LexicalEditor} editor - Editor instance.
+ * @param {LexicalEditor} editor Editor instance.
  * @returns {Promise<void>} Nothing.
  */
 export const focusEditor = async (editor) => {

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

@@ -1,3 +1,6 @@
+/**
+ * @import { TextEditorBlockType, TextEditorFormatType, TextEditorInlineType } from '../../typedefs';
+ */
 /**
  * List of available buttons.
  * @type {{ [key: string]: { labelKey: string, icon: string, inline: boolean } }}
@@ -10,14 +13,17 @@ export const availableButtons: {
     };
 };
 /**
- * @type {import('../../typedefs').TextEditorFormatType[]}
+ * @type {TextEditorFormatType[]}
  */
-export const textFormatButtonTypes: import("../../typedefs").TextEditorFormatType[];
+export const textFormatButtonTypes: TextEditorFormatType[];
 /**
- * @type {import('../../typedefs').TextEditorInlineType[]}
+ * @type {TextEditorInlineType[]}
  */
-export const inlineButtonTypes: import("../../typedefs").TextEditorInlineType[];
+export const inlineButtonTypes: TextEditorInlineType[];
 /**
- * @type {import('../../typedefs').TextEditorBlockType[]}
+ * @type {TextEditorBlockType[]}
  */
-export const blockButtonTypes: import("../../typedefs").TextEditorBlockType[];
+export const blockButtonTypes: TextEditorBlockType[];
+import type { TextEditorFormatType } from '../../typedefs';
+import type { TextEditorInlineType } from '../../typedefs';
+import type { TextEditorBlockType } from '../../typedefs';

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

@@ -1,3 +1,7 @@
+/**
+ * @import { TextEditorBlockType, TextEditorFormatType, TextEditorInlineType } from '../../typedefs';
+ */
+
 /**
  * List of available buttons.
  * @type {{ [key: string]: { labelKey: string, icon: string, inline: boolean } }}
@@ -80,15 +84,15 @@ export const availableButtons = {
   },
 };
 /**
- * @type {import('../../typedefs').TextEditorFormatType[]}
+ * @type {TextEditorFormatType[]}
  */
 export const textFormatButtonTypes = ['bold', 'italic', 'code'];
 /**
- * @type {import('../../typedefs').TextEditorInlineType[]}
+ * @type {TextEditorInlineType[]}
  */
 export const inlineButtonTypes = [...textFormatButtonTypes, 'link'];
 /**
- * @type {import('../../typedefs').TextEditorBlockType[]}
+ * @type {TextEditorBlockType[]}
  */
 export const blockButtonTypes = [
   'paragraph',

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

@@ -2,19 +2,24 @@
   import { getContext, onMount } from 'svelte';
   import { initEditor } from './core';
 
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { TextEditorStore } from '../../typedefs';
+   */
+
   /**
    * @typedef {object} Props
-   * @property {string} [class] - The `class` attribute on the wrapper element.
-   * @property {boolean} [hidden] - Whether to hide the widget.
-   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @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
+   * @property {boolean} [readonly] Whether to make the widget read-only. An alias of the
    * `aria-readonly` attribute.
-   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+   * @property {boolean} [required] Whether to mark the widget required. An alias of the
    * `aria-required` attribute.
-   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+   * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` attribute.
-   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {Snippet} [children] Primary slot content.
    */
 
   /**
@@ -33,7 +38,7 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /** @type {import('../../typedefs').TextEditorStore} */
+  /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
 
   /**
@@ -50,39 +55,31 @@
 
   /**
    * Update {@link value} and other state variables whenever the editor content is updated.
-   * @param {Event} event - `Update` custom event.
+   * @param {Event} event `Update` custom event.
    */
   const onUpdate = (event) => {
-    if (editorStore.hasConverterError) {
+    const { hasConverterError, useRichText, inputValue } = editorStore;
+
+    if (hasConverterError || !useRichText) {
       return;
     }
 
-    const { detail } = /** @type {CustomEvent} */ (event);
-    const newValue = detail.value;
-
-    if (editorStore.inputValue !== newValue) {
-      const { useRichText } = editorStore;
-
-      if (useRichText) {
-        // Temporarily disable rich text to prevent unnecessary Markdown conversion that resets
-        // Lexical nodes and selection
-        editorStore.useRichText = false;
-      }
+    const { value: newValue, selection } = /** @type {CustomEvent} */ (event).detail;
 
+    if (inputValue !== newValue) {
+      // Temporarily disable rich text to prevent unnecessary Markdown conversion that resets
+      // Lexical nodes and selection, then restore the state
+      editorStore.useRichText = false;
       editorStore.inputValue = newValue;
-
-      if (useRichText) {
-        // Restore the rich text state
-        editorStore.useRichText = true;
-      }
+      editorStore.useRichText = true;
     }
 
-    editorStore.selection = detail.selection;
+    editorStore.selection = selection;
   };
 
   /**
    * Listen to `click` events on the editor. Ignore a click on a link.
-   * @param {MouseEvent} event - `click` event.
+   * @param {MouseEvent} event `click` event.
    */
   const onClick = (event) => {
     if (/** @type {HTMLElement} */ (event.target)?.matches('a')) {
@@ -156,10 +153,10 @@
 .lexical-root[aria-invalid=true] {
   border-color: var(--sui-error-border-color);
 }
-.lexical-root > :global(:first-child) {
+.lexical-root :global(:first-child) {
   margin-top: 0;
 }
-.lexical-root > :global(:last-child) {
+.lexical-root :global(:last-child) {
   margin-bottom: 0;
 }
 .lexical-root :global(strong.italic) {

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

@@ -5,69 +5,70 @@ type LexicalRoot = {
 };
 declare const LexicalRoot: import("svelte").Component<{
     /**
-     * - The `class` attribute on the wrapper element.
+     * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
     /**
-     * - Whether to hide the widget.
+     * Whether to hide the widget.
      */
     hidden?: boolean | undefined;
     /**
-     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * 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
+     * Whether to make the widget read-only. An alias of the
      * `aria-readonly` attribute.
      */
     readonly?: boolean | undefined;
     /**
-     * - Whether to mark the widget required. An alias of the
+     * Whether to mark the widget required. An alias of the
      * `aria-required` attribute.
      */
     required?: boolean | undefined;
     /**
-     * - Whether to mark the widget invalid. An alias of the
+     * Whether to mark the widget invalid. An alias of the
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
     /**
-     * - Primary slot content.
+     * Primary slot content.
      */
-    children?: import("svelte").Snippet<[]> | undefined;
+    children?: Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
 type Props = {
     /**
-     * - The `class` attribute on the wrapper element.
+     * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
     /**
-     * - Whether to hide the widget.
+     * Whether to hide the widget.
      */
     hidden?: boolean | undefined;
     /**
-     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * 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
+     * Whether to make the widget read-only. An alias of the
      * `aria-readonly` attribute.
      */
     readonly?: boolean | undefined;
     /**
-     * - Whether to mark the widget required. An alias of the
+     * Whether to mark the widget required. An alias of the
      * `aria-required` attribute.
      */
     required?: boolean | undefined;
     /**
-     * - Whether to mark the widget invalid. An alias of the
+     * Whether to mark the widget invalid. An alias of the
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
     /**
-     * - Primary slot content.
+     * Primary slot content.
      */
-    children?: import("svelte").Snippet<[]> | undefined;
+    children?: Snippet<[]> | undefined;
 };
+import type { Snippet } from 'svelte';

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

@@ -1 +1,2 @@
-export function createEditorStore(): import("../../typedefs").TextEditorStore;
+export function createEditorStore(): TextEditorStore;
+import type { TextEditorStore } from '../../typedefs';

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

@@ -1,22 +1,27 @@
 import { generateElementId } from '@sveltia/utils/element';
 import { convertMarkdownToLexical } from './core';
 
+/**
+ * @import { TextEditorConfig, TextEditorSelectionState, TextEditorStore } from '../../typedefs';
+ * @import { LexicalEditor } from 'lexical';
+ */
+
 /**
  * Create an editor editor store that contains all the states and configuration.
- * @returns {import('../../typedefs').TextEditorStore} Store.
+ * @returns {TextEditorStore} Store.
  */
 export const createEditorStore = () => {
   /** @type {string} */
   const editorId = generateElementId('editor');
   /** @type {boolean} */
   let initialized = $state(false);
-  /** @type {import('lexical').LexicalEditor | undefined} */
+  /** @type {LexicalEditor | undefined} */
   let editor = $state();
-  /** @type {import('../../typedefs').TextEditorConfig} */
+  /** @type {TextEditorConfig} */
   let config = $state({ modes: [], enabledButtons: [], components: [], isCodeEditor: false });
   /** @type {string} */
   let inputValue = $state('');
-  /** @type {import('../../typedefs').TextEditorSelectionState} */
+  /** @type {TextEditorSelectionState} */
   let selection = $state({ blockNodeKey: null, blockType: 'paragraph', inlineTypes: [] });
   /** @type {boolean} */
   let useRichText = $state(true);
@@ -68,7 +73,7 @@ export const createEditorStore = () => {
     },
     set config(newValue) {
       config = newValue;
-      useRichText = newValue.modes[0] === 'rich-text';
+      useRichText = newValue.modes[0] === 'rich-text' || newValue.isCodeEditor;
     },
     get inputValue() {
       return inputValue;

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

@@ -13,25 +13,34 @@
   import { createEditorStore } from './store.svelte';
   import TextEditorToolbar from './toolbar/text-editor-toolbar.svelte';
 
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import {
+   * TextEditorBlockType,
+   * TextEditorComponent,
+   * TextEditorInlineType,
+   * TextEditorMode,
+   * } from '../../typedefs';
+   */
+
   /**
    * @typedef {object} Props
-   * @property {string} [value] - Input value.
-   * @property {boolean} [flex] - Make the text input container flexible.
-   * @property {import('../../typedefs').TextEditorMode[]} [modes] - Enabled modes.
-   * @property {(import('../../typedefs').TextEditorBlockType |
-   * import('../../typedefs').TextEditorInlineType)[]} [buttons] - Enabled buttons.
-   * @property {import('../../typedefs').TextEditorComponent[]} [components] - Editor components.
-   * @property {string} [class] - The `class` attribute on the wrapper element.
-   * @property {boolean} [hidden] - Whether to hide the widget.
-   * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+   * @property {string} [value] Input value.
+   * @property {boolean} [flex] Make the text input container flexible.
+   * @property {TextEditorMode[]} [modes] Enabled modes.
+   * @property {(TextEditorBlockType | TextEditorInlineType)[]} [buttons] Enabled buttons.
+   * @property {TextEditorComponent[]} [components] Editor components.
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @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
+   * @property {boolean} [readonly] Whether to make the widget read-only. An alias of the
    * `aria-readonly` attribute.
-   * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+   * @property {boolean} [required] Whether to mark the widget required. An alias of the
    * `aria-required` attribute.
-   * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+   * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` attribute.
-   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   * @property {Snippet} [children] Primary slot content.
    */
 
   /**