@sveltia/ui 0.23.2 → 0.24.0

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

@@ -0,0 +1,121 @@
+<!--
+  @component
+  A code editor based on Lexical.
+-->
+<script>
+  import { setContext, untrack } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import Alert from '../alert/alert.svelte';
+  import Toast from '../toast/toast.svelte';
+  import LexicalRoot from './lexical-root.svelte';
+  import { createEditorStore } from './store.svelte';
+  import CodeEditorToolbar from './toolbar/code-editor-toolbar.svelte';
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [code] - Input value.
+   * @property {string} [lang] - Selected language.
+   * @property {boolean} [showLanguageSwitcher] - Whether to show the language selector.
+   * @property {boolean} [flex] - Make the text input container flexible.
+   * @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
+   * `aria-readonly` attribute.
+   * @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
+   * `aria-invalid` attribute.
+   * @property {import('svelte').Snippet} [children] - Primary slot content.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    code = $bindable(''),
+    lang = $bindable(''),
+    showLanguageSwitcher = false,
+    flex = false,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const backticks = '```';
+  const editorStore = createEditorStore();
+
+  editorStore.config.isCodeEditor = true;
+  editorStore.config.defaultLanguage = lang;
+
+  setContext('editorStore', editorStore);
+
+  $effect(() => {
+    if (!editorStore.initialized) {
+      return;
+    }
+
+    void code;
+    void lang;
+
+    untrack(() => {
+      const newValue = code
+        ? `${backticks}${lang}\n${code}\n${backticks}`
+        : `${backticks}${lang}\n${backticks}`;
+
+      editorStore.inputValue = newValue;
+    });
+  });
+
+  $effect(() => {
+    if (!editorStore.initialized) {
+      return;
+    }
+
+    void editorStore.inputValue;
+
+    untrack(() => {
+      const { lang: _lang = '', code: _code = '' } =
+        editorStore.inputValue.match(/^```(?<lang>\w+?)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
+
+      if (lang !== _lang) {
+        lang = _lang;
+      }
+
+      if (code !== _code) {
+        code = _code;
+      }
+    });
+  });
+</script>
+
+<div {...restProps} role="none" class="sui code-editor" class:flex {hidden}>
+  {#if showLanguageSwitcher}
+    <CodeEditorToolbar {disabled} {readonly} />
+  {/if}
+  <LexicalRoot
+    hidden={!editorStore.useRichText || hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
+  />
+</div>
+
+{#if editorStore.showConverterError}
+  <Toast bind:show={editorStore.showConverterError}>
+    <Alert status="error">{$_('_sui.text_editor.converter_error')}</Alert>
+  </Toast>
+{/if}
+
+<style>.code-editor {
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}</style>

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

@@ -0,0 +1,106 @@
+export default CodeEditor;
+type CodeEditor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+/** A code editor based on Lexical. */
+declare const CodeEditor: import("svelte").Component<{
+    /**
+     * - Input value.
+     */
+    code?: string | undefined;
+    /**
+     * - Selected language.
+     */
+    lang?: string | undefined;
+    /**
+     * - Whether to show the language selector.
+     */
+    showLanguageSwitcher?: boolean | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: boolean | undefined;
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - 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;
+    /**
+     * - 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
+     * `aria-invalid` attribute.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+} & Record<string, any>, {}, "code" | "lang">;
+type Props = {
+    /**
+     * - Input value.
+     */
+    code?: string | undefined;
+    /**
+     * - Selected language.
+     */
+    lang?: string | undefined;
+    /**
+     * - Whether to show the language selector.
+     */
+    showLanguageSwitcher?: boolean | undefined;
+    /**
+     * - Make the text input container flexible.
+     */
+    flex?: boolean | undefined;
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - 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;
+    /**
+     * - 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
+     * `aria-invalid` attribute.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,5 +1,4 @@
-export function initEditor({ components }?: {
-    components?: import("../../typedefs").TextEditorComponent[] | undefined;
-} | undefined): import("lexical").LexicalEditor;
-export function convertMarkdown(editor: import("lexical").LexicalEditor, value: string): Promise<void>;
+export function initEditor({ components, isCodeEditor, defaultLanguage }: import("../../typedefs").TextEditorConfig): import("lexical").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>;

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

@@ -1,6 +1,7 @@
 import {
   CodeHighlightNode,
   CodeNode,
+  $createCodeNode as createCodeNode,
   $isCodeHighlightNode as isCodeHighlightNode,
   $isCodeNode as isCodeNode,
   registerCodeHighlighting,
@@ -45,6 +46,7 @@ import {
   INSERT_PARAGRAPH_COMMAND,
   OUTDENT_CONTENT_COMMAND,
   createEditor,
+  $getRoot as getRoot,
   $getSelection as getSelection,
   $isRangeSelection as isRangeSelection,
 } from 'lexical';
@@ -122,15 +124,18 @@ const editorConfig = {
 };
 
 /**
- * Get the current selection’s block and inline level types.
- * @returns {{ blockType: import('../../typedefs').TextEditorBlockType,
- * inlineTypes: import('../../typedefs').TextEditorInlineType[] }} Types.
+ * Get the current selection’s block node key as well as block and inline level types.
+ * @returns {import('../../typedefs').TextEditorSelectionState} Current selection state.
  */
 const getSelectionTypes = () => {
   const selection = getSelection();
 
   if (!isRangeSelection(selection)) {
-    return { blockType: 'paragraph', inlineTypes: [] };
+    return {
+      blockNodeKey: null,
+      blockType: 'paragraph',
+      inlineTypes: [],
+    };
   }
 
   const anchor = selection.anchor.getNode();
@@ -184,7 +189,11 @@ const getSelectionTypes = () => {
     })()
   );
 
-  return { blockType, inlineTypes };
+  return {
+    blockNodeKey: parent?.getKey() ?? null,
+    blockType,
+    inlineTypes,
+  };
 };
 
 /**
@@ -192,8 +201,6 @@ const getSelectionTypes = () => {
  * @param {import('lexical').LexicalEditor} editor - Editor instance.
  */
 const onEditorUpdate = (editor) => {
-  const { blockType, inlineTypes } = getSelectionTypes();
-
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
@@ -201,8 +208,7 @@ const onEditorUpdate = (editor) => {
           // Use underscores for italic text in Markdown instead of asterisks
           allTransformers.filter((/** @type {any} */ { tag }) => tag !== '*'),
         ),
-        selectionBlockType: blockType,
-        selectionInlineTypes: inlineTypes,
+        selection: getSelectionTypes(),
       },
     }),
   );
@@ -210,12 +216,11 @@ const onEditorUpdate = (editor) => {
 
 /**
  * Initialize the Lexical editor.
- * @param {object} [options] - Options.
- * @param {import('../../typedefs').TextEditorComponent[]} [options.components] - Editor components.
+ * @param {import('../../typedefs').TextEditorConfig} config - Editor configuration.
  * @returns {import('lexical').LexicalEditor} Editor instance.
  */
-export const initEditor = ({ components } = {}) => {
-  components?.forEach(({ node, transformer }) => {
+export const initEditor = ({ components = [], isCodeEditor = false, defaultLanguage = '' }) => {
+  components.forEach(({ node, transformer }) => {
     /** @type {any[]} */ (editorConfig.nodes).unshift(node);
     allTransformers.unshift(transformer);
   });
@@ -227,10 +232,10 @@ export const initEditor = ({ components } = {}) => {
   registerHistory(editor, createEmptyHistoryState(), 1000);
 
   registerCodeHighlighting(editor, {
-    defaultLanguage: '',
+    defaultLanguage,
     // eslint-disable-next-line jsdoc/require-jsdoc
-    tokenize: (code, language = 'plain') =>
-      window.Prism.tokenize(code, window.Prism.languages[language] ?? window.Prism.languages.plain),
+    tokenize: (code, lang = 'plain') =>
+      window.Prism.tokenize(code, window.Prism.languages[lang] ?? window.Prism.languages.plain),
   });
 
   editor.registerCommand(
@@ -270,12 +275,31 @@ export const initEditor = ({ components } = {}) => {
     COMMAND_PRIORITY_NORMAL,
   );
 
-  editor.registerUpdateListener(({ editorState }) => {
+  editor.registerUpdateListener(async () => {
     if (editor?.isComposing()) {
       return;
     }
 
-    editorState.read(() => {
+    await sleep(100);
+
+    editor.update(() => {
+      // Prevent CodeNode from being removed
+      if (isCodeEditor) {
+        const root = getRoot();
+        const children = root.getChildren();
+
+        if (children.length === 1 && !isCodeNode(children[0])) {
+          children[0].remove();
+        }
+
+        if (children.length === 0) {
+          const node = createCodeNode();
+
+          node.setLanguage(defaultLanguage);
+          root.append(node);
+        }
+      }
+
       onEditorUpdate(editor);
     });
   });
@@ -316,6 +340,35 @@ export const initEditor = ({ components } = {}) => {
   return editor;
 };
 
+/**
+ * Load additional Prism syntax highlighter settings for the given programming language.
+ * @param {string} lang - Language name, like scss.
+ */
+export const loadCodeHighlighter = async (lang) => {
+  if (lang in window.Prism.languages) {
+    return;
+  }
+
+  const canonicalLang = Object.entries(prismComponents.languages).find(
+    // @ts-ignore
+    ([key, { alias }]) =>
+      key === lang || (Array.isArray(alias) ? alias.includes(lang) : alias === lang),
+  )?.[0];
+
+  if (!canonicalLang) {
+    return;
+  }
+
+  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`
+    );
+  } catch {
+    //
+  }
+};
+
 /**
  * Convert Markdown to Lexical nodes.
  * @param {import('lexical').LexicalEditor} editor - Editor instance.
@@ -323,28 +376,19 @@ export const initEditor = ({ components } = {}) => {
  * @returns {Promise<void>} Nothing.
  * @throws {Error} Failed to convert the value to Lexical nodes.
  */
-export const convertMarkdown = async (editor, value) => {
+export const convertMarkdownToLexical = async (editor, value) => {
   // Load Prism language support on demand; the `loadLanguages` Prism utility method cannot be used
   await Promise.all(
-    [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang } = {} }) => {
-      if (!(lang in window.Prism.languages) && lang in prismComponents.languages) {
-        try {
-          await import(
-            // eslint-disable-next-line jsdoc/no-bad-blocks
-            /* @vite-ignore */ `https://unpkg.com/prismjs@1.29.0/components/prism-${lang}.min.js`
-          );
-        } catch {
-          //
-        }
-      }
-    }),
+    [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang } = {} }) =>
+      loadCodeHighlighter(lang),
+    ),
   );
 
   return new Promise((resolve, reject) => {
     editor.update(() => {
       try {
         convertFromMarkdownString(value, allTransformers);
-        resolve(void 0);
+        resolve(undefined);
       } catch (ex) {
         reject(new Error('Failed to convert Markdown', { cause: ex }));
       }
@@ -362,7 +406,8 @@ export const focusEditor = async (editor) => {
   editor.getRootElement()?.focus();
 
   return new Promise((resolve) => {
-    editor.focus(() => {
+    editor.focus(async () => {
+      await sleep(100);
       resolve(undefined);
     });
   });

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

@@ -1,9 +1,9 @@
 <script>
   import { getContext, onMount } from 'svelte';
+  import { initEditor } from './core';
 
   /**
    * @typedef {object} Props
-   * @property {string} [value] - Input value.
    * @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`
@@ -22,7 +22,6 @@
    */
   let {
     /* eslint-disable prefer-const */
-    value = $bindable(),
     class: className,
     hidden = false,
     disabled = false,
@@ -34,12 +33,8 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * Text editor state.
-   * @type {import('../../typedefs').TextEditorState}
-   */
-  const { editor, editorId, selectionBlockType, selectionInlineTypes, hasConverterError } =
-    getContext('state');
+  /** @type {import('../../typedefs').TextEditorStore} */
+  const editorStore = getContext('editorStore');
 
   /**
    * Reference to the Lexical editor root element.
@@ -50,7 +45,7 @@
   const editable = $derived(!(disabled || readonly));
 
   $effect(() => {
-    $editor?.setEditable(editable);
+    editorStore.editor?.setEditable(editable);
   });
 
   /**
@@ -58,19 +53,31 @@
    * @param {Event} event - `Update` custom event.
    */
   const onUpdate = (event) => {
-    if ($hasConverterError) {
+    if (editorStore.hasConverterError) {
       return;
     }
 
     const { detail } = /** @type {CustomEvent} */ (event);
     const newValue = detail.value;
 
-    if (value !== newValue) {
-      value = newValue;
+    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;
+      }
+
+      editorStore.inputValue = newValue;
+
+      if (useRichText) {
+        // Restore the rich text state
+        editorStore.useRichText = true;
+      }
     }
 
-    $selectionBlockType = detail.selectionBlockType;
-    $selectionInlineTypes = detail.selectionInlineTypes;
+    editorStore.selection = detail.selection;
   };
 
   /**
@@ -84,6 +91,8 @@
   };
 
   onMount(() => {
+    editorStore.editor = initEditor(editorStore.config);
+
     lexicalRoot?.addEventListener('Update', onUpdate);
     lexicalRoot?.addEventListener('click', onClick);
 
@@ -94,8 +103,9 @@
   });
 
   $effect(() => {
-    if ($editor && lexicalRoot) {
-      $editor.setRootElement(lexicalRoot);
+    if (editorStore.editor && lexicalRoot) {
+      editorStore.editor.setRootElement(lexicalRoot);
+      editorStore.initialized = true;
     }
   });
 </script>
@@ -111,14 +121,16 @@
   aria-required={required}
   aria-invalid={invalid}
   class="lexical-root"
-  id="{$editorId}-lexical-root"
+  class:code={editorStore.config.isCodeEditor}
+  id="{editorStore.editorId}-lexical-root"
   contenteditable={editable}
   {hidden}
 ></div>
 
 <style>.lexical-root {
+  overflow: hidden;
   border: 1px solid var(--sui-textbox-border-color);
-  border-radius: 0 0 var(--sui-textbox-border-radius) var(--sui-textbox-border-radius) !important;
+  border-radius: var(--sui-textbox-border-radius) !important;
   padding: var(--sui-textbox-multiline-padding);
   min-height: 8em;
   color: var(--sui-textbox-foreground-color);
@@ -127,6 +139,17 @@
   font-size: var(--sui-textbox-font-size);
   line-height: var(--sui-textbox-multiline-line-height);
 }
+.lexical-root:not(:first-child) {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+.lexical-root.code {
+  padding: 0;
+}
+.lexical-root.code :global(.code-block) {
+  border-radius: 0 !important;
+  min-height: 120px;
+}
 .lexical-root:focus-visible {
   outline: 0;
 }
@@ -166,7 +189,7 @@
   padding: 8px;
   min-width: 40px;
   color: var(--sui-tertiary-foreground-color);
-  background-color: var(--sui-secondary-background-color);
+  background-color: var(--sui-tertiary-background-color);
   text-align: right;
 }
 .lexical-root :global([data-lexical-text=true]) {

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

@@ -4,10 +4,6 @@ type LexicalRoot = {
     $set?(props: Partial<Props & Record<string, any>>): void;
 };
 declare const LexicalRoot: import("svelte").Component<{
-    /**
-     * - Input value.
-     */
-    value?: string | undefined;
     /**
      * - The `class` attribute on the wrapper element.
      */
@@ -40,12 +36,8 @@ declare const LexicalRoot: import("svelte").Component<{
      * - Primary slot content.
      */
     children?: import("svelte").Snippet<[]> | undefined;
-} & Record<string, any>, {}, "value">;
+} & Record<string, any>, {}, "">;
 type Props = {
-    /**
-     * - Input value.
-     */
-    value?: string | undefined;
     /**
      * - The `class` attribute on the wrapper element.
      */

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

@@ -0,0 +1 @@
+export function createEditorStore(): import("../../typedefs").TextEditorStore;