@sveltia/ui 0.78.2 → 0.78.3

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

@@ -5,6 +5,7 @@ export function isSafeLinkURL(url: string): boolean;
 export function getSelectionTypes(): TextEditorSelectionState;
 export function exportMarkdown(enabledTransformers: Transformer[]): string;
 export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Transformer[], cachedValue?: string): string;
+export function getComponentMarkdown({ node, createNode, transformer, createMarkdown }: TextEditorComponent): string;
 export function initEditor({ enabledButtons, components, useMarkdownShortcuts, isCodeEditor, defaultLanguage, }: TextEditorConfig): InitEditorResult;
 export function loadCodeHighlighter(lang: string): Promise<void>;
 export function convertMarkdownToLexical(editor: LexicalEditor, value: string, enabledTransformers: Transformer[]): Promise<string>;
@@ -26,4 +27,5 @@ export type InitEditorResult = {
 import type { LexicalEditor } from 'lexical';
 import type { TextEditorSelectionState } from '../../typedefs';
 import type { Transformer } from '@lexical/markdown';
+import type { TextEditorComponent } from '../../typedefs';
 import type { TextEditorConfig } from '../../typedefs';

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

@@ -91,6 +91,7 @@ import { TABLE } from './transformers/table.js';
  * @import { Transformer } from '@lexical/markdown';
  * @import {
  * TextEditorBlockType,
+ * TextEditorComponent,
  * TextEditorConfig,
  * TextEditorInlineType,
  * TextEditorNodeType,
@@ -479,6 +480,54 @@ export const onEditorUpdate = (editor, enabledTransformers, cachedValue) => {
   return value;
 };
 
+/**
+ * Get the Markdown of a new instance of the given editor component, to insert it in the plain text
+ * mode. The component’s own `createMarkdown` function is used if any. Otherwise, a new node is
+ * created in a temporary editor and exported with the component’s transformer, just like the rich
+ * text editor does.
+ * @param {TextEditorComponent} component Editor component.
+ * @returns {string} Markdown. It can be empty, for example if the component’s output depends on a
+ * field value that is not set yet.
+ */
+export const getComponentMarkdown = ({ node, createNode, transformer, createMarkdown }) => {
+  if (createMarkdown) {
+    return createMarkdown().trim();
+  }
+
+  const editor = createEditor({
+    namespace: 'component',
+    nodes: node ? [/** @type {any} */ (node)] : [],
+    /**
+     * Throw an error, so the export below fails as a whole.
+     * @param {Error} error Error.
+     * @throws {Error} Always.
+     */
+    onError: (error) => {
+      throw error;
+    },
+  });
+
+  let markdown = '';
+
+  try {
+    editor.update(
+      () => {
+        const newNode = createNode();
+
+        // An inline node needs a paragraph to live in
+        getRoot().append(newNode.isInline() ? createParagraphNode().append(newNode) : newNode);
+
+        markdown = onEditorUpdate(editor, [transformer]);
+      },
+      { discrete: true },
+    );
+  } catch {
+    // The component cannot be created or exported outside the rich text editor
+  }
+
+  return markdown.trim();
+};
+
 /**
  * Initialize the Lexical editor.
  * @param {TextEditorConfig} config Editor configuration.

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

@@ -224,10 +224,10 @@
 .lexical-root[aria-invalid=true] {
   border-color: var(--sui-error-border-color);
 }
-.lexical-root :global([dir]:first-child) {
+.lexical-root :global(:not(.sui):first-child) {
   margin-top: 0;
 }
-.lexical-root :global([dir]:last-child) {
+.lexical-root :global(:not(.sui):last-child) {
   margin-bottom: 0;
 }
 .lexical-root :global(strong.italic) {

package/dist/components/text-editor/raw-markdown.d.ts

@@ -1,11 +1,9 @@
 /**
- * Markdown editing helpers for the plain text mode of the text editor, where the toolbar buttons
- * edit the Markdown source in the `<textarea>` instead of Lexical nodes. Apart from
- * {@link getRawTextState} and {@link applyRawTextEdit}, everything here is pure: a function takes
- * the current value and selection, and returns the edit to apply.
- */
-/**
- * @import { TextEditorBlockType, TextEditorFormatType } from '../../typedefs';
+ * @import {
+ * TextEditorBlockType,
+ * TextEditorComponent,
+ * TextEditorFormatType,
+ * } from '../../typedefs';
  */
 /**
  * Current value and selection of the `<textarea>`.
@@ -43,6 +41,7 @@ export function getRawTextState({ value, selectionStart, selectionEnd }: HTMLTex
 export function focusTextArea(textArea: HTMLTextAreaElement): Promise<boolean>;
 export function isRawTextEditable({ readOnly, disabled }: HTMLTextAreaElement): boolean;
 export function applyRawTextEdit(textArea: HTMLTextAreaElement, { start, end, text, selectionStart, selectionEnd }: RawTextEdit): Promise<void>;
+export function insertComponent(textArea: HTMLTextAreaElement, component: TextEditorComponent): Promise<void>;
 /**
  * Current value and selection of the `<textarea>`.
  */
@@ -88,3 +87,4 @@ export type RawTextEdit = {
 };
 import type { TextEditorFormatType } from '../../typedefs';
 import type { TextEditorBlockType } from '../../typedefs';
+import type { TextEditorComponent } from '../../typedefs';

package/dist/components/text-editor/raw-markdown.js

@@ -1,12 +1,18 @@
 /**
  * Markdown editing helpers for the plain text mode of the text editor, where the toolbar buttons
  * edit the Markdown source in the `<textarea>` instead of Lexical nodes. Apart from
- * {@link getRawTextState} and {@link applyRawTextEdit}, everything here is pure: a function takes
- * the current value and selection, and returns the edit to apply.
+ * {@link getRawTextState}, {@link applyRawTextEdit} and {@link insertComponent}, everything here is
+ * pure: a function takes the current value and selection, and returns the edit to apply.
  */
 
+import { getComponentMarkdown } from './core.js';
+
 /**
- * @import { TextEditorBlockType, TextEditorFormatType } from '../../typedefs';
+ * @import {
+ * TextEditorBlockType,
+ * TextEditorComponent,
+ * TextEditorFormatType,
+ * } from '../../typedefs';
  */
 
 /**
@@ -469,3 +475,26 @@ export const applyRawTextEdit = async (
 
   textArea.setSelectionRange(selectionStart, selectionEnd);
 };
+
+/**
+ * Insert the Markdown of a new instance of the given editor component into the `<textarea>`. A
+ * component matched by a single-line pattern is inserted inline at the caret; anything else is
+ * inserted as a separate block. If the component has no Markdown to insert, the focus just moves
+ * back to the `<textarea>`.
+ * @param {HTMLTextAreaElement} textArea `<textarea>` element.
+ * @param {TextEditorComponent} component Editor component.
+ * @returns {Promise<void>} Nothing.
+ */
+export const insertComponent = async (textArea, component) => {
+  const markdown = getComponentMarkdown(component);
+
+  if (!markdown) {
+    textArea.focus();
+
+    return;
+  }
+
+  const block = component.transformer?.type !== 'text-match';
+
+  await applyRawTextEdit(textArea, insertMarkdown(getRawTextState(textArea), markdown, { block }));
+};

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.78.2";
+export const UI_VERSION: "0.78.3";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.78.2';
+export const UI_VERSION = '0.78.3';

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

@@ -6,7 +6,7 @@
   import { getContext } from 'svelte';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
-  import InsertComponentDialog from './insert-component-dialog.svelte';
+  import { insertComponent } from '../raw-markdown.js';
 
   /**
    * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
@@ -28,8 +28,6 @@
   const editorStore = getContext('editorStore');
 
   const { label, icon, createNode } = $derived(component);
-
-  let openDialog = $state(false);
 </script>
 
 <Button
@@ -39,9 +37,15 @@
   aria-label={label}
   aria-controls={editorStore.controlId}
   onclick={() => {
-    // The plain text mode needs a dialog to fill in the component’s fields
-    if (!editorStore.useRichText) {
-      openDialog = true;
+    const { textArea, useRichText } = editorStore;
+
+    // Insert the component’s Markdown in the plain text mode
+    if (!useRichText) {
+      // The button is only enabled while the `<textarea>` is there
+      /* v8 ignore else */
+      if (textArea) {
+        insertComponent(textArea, component);
+      }
 
       return;
     }
@@ -58,5 +62,3 @@
     {/if}
   {/snippet}
 </Button>
-
-<InsertComponentDialog {component} bind:open={openDialog} />

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

@@ -9,7 +9,7 @@
   import MenuButton from '../../menu/menu-button.svelte';
   import MenuItem from '../../menu/menu-item.svelte';
   import Menu from '../../menu/menu.svelte';
-  import InsertComponentDialog from './insert-component-dialog.svelte';
+  import { insertComponent } from '../raw-markdown.js';
 
   /**
    * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
@@ -29,13 +29,6 @@
 
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
-
-  /**
-   * Component to insert with the dialog in the plain text mode.
-   * @type {TextEditorComponent | undefined}
-   */
-  let dialogComponent = $state();
-  let openDialog = $state(false);
 </script>
 
 <MenuButton label={_('_sui.insert')}>
@@ -49,10 +42,15 @@
         <MenuItem
           {label}
           onclick={() => {
-            // The plain text mode needs a dialog to fill in the component’s fields
-            if (!editorStore.useRichText) {
-              dialogComponent = component;
-              openDialog = true;
+            const { textArea, useRichText } = editorStore;
+
+            // Insert the component’s Markdown in the plain text mode
+            if (!useRichText) {
+              // The item is only clickable while the `<textarea>` is there
+              /* v8 ignore else */
+              if (textArea) {
+                insertComponent(textArea, component);
+              }
 
               return;
             }
@@ -73,5 +71,3 @@
     </Menu>
   {/snippet}
 </MenuButton>
-
-<InsertComponentDialog component={dialogComponent} bind:open={openDialog} />

package/dist/typedefs.d.ts

@@ -759,6 +759,13 @@ export type TextEditorComponent = {
      * Node transformer.
      */
     transformer: Transformer;
+    /**
+     * Function to create the Markdown inserted when the
+     * component is chosen in the plain text mode. By default, a new node created with `createNode` is
+     * exported with `transformer`, which may result in an empty string, for example if the output
+     * depends on a field value that is not set yet.
+     */
+    createMarkdown?: (() => string) | undefined;
 };
 export type TextEditorConfig = {
     /**

package/dist/typedefs.js

@@ -318,6 +318,10 @@
  * @property {(props?: Record<string, any>) => LexicalNode} createNode Function to create a new node
  * instance.
  * @property {Transformer} transformer Node transformer.
+ * @property {() => string} [createMarkdown] Function to create the Markdown inserted when the
+ * component is chosen in the plain text mode. By default, a new node created with `createNode` is
+ * exported with `transformer`, which may result in an empty string, for example if the output
+ * depends on a field value that is not set yet.
  */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.78.2",
+  "version": "0.78.3",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",

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

@@ -1,96 +0,0 @@
-<!--
-  @component
-  A minimal rich text editor holding a single editor component, so it can be edited with its own
-  field UI outside the main editor, and exported to Markdown. Used to insert a component in the
-  plain text mode.
--->
-<script>
-  import {
-    $createParagraphNode as createParagraphNode,
-    $getRoot as getRoot,
-    $insertNodes as insertNodes,
-  } from 'lexical';
-  import { getContext, setContext } from 'svelte';
-  import { onEditorUpdate } from '../core.js';
-  import LexicalRoot from '../lexical-root.svelte';
-  import { createEditorStore } from '../store.svelte.js';
-
-  /**
-   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
-   */
-
-  /**
-   * @typedef {object} Props
-   * @property {TextEditorComponent} component Editor component to edit.
-   * @property {string} [markdown] Markdown output of the component.
-   */
-
-  /** @type {Props} */
-  let {
-    /* eslint-disable prefer-const */
-    component,
-    markdown = $bindable(''),
-    /* eslint-enable prefer-const */
-  } = $props();
-
-  /** @type {TextEditorStore} */
-  const parentStore = getContext('editorStore');
-  const editorStore = createEditorStore();
-
-  // svelte-ignore state_referenced_locally
-  editorStore.config = {
-    ...parentStore.config,
-    modes: ['rich-text'],
-    components: [component],
-    useMarkdownShortcuts: false,
-    useEmojiAutocomplete: false,
-  };
-
-  setContext('editorStore', editorStore);
-
-  let inserted = false;
-
-  $effect(() => {
-    const { editor, initialized } = editorStore;
-
-    if (!editor || !initialized || inserted) {
-      return;
-    }
-
-    inserted = true;
-
-    editor.update(() => {
-      const paragraph = createParagraphNode();
-
-      getRoot().clear().append(paragraph);
-      paragraph.select();
-      insertNodes([component.createNode()]);
-    });
-  });
-
-  $effect(() => {
-    markdown = editorStore.inputValue.trim();
-  });
-
-  /**
-   * Get the component’s Markdown right now. The bound `markdown` is only updated after a short
-   * delay, so it may not reflect a field that has just been changed.
-   * @returns {string} Markdown.
-   */
-  export const getMarkdown = () => {
-    const { editor, enabledTransformers } = editorStore;
-
-    // The dialog can only be submitted once the editor is there
-    /* v8 ignore next 3 */
-    if (!editor) {
-      return markdown;
-    }
-
-    return editor
-      .getEditorState()
-      .read(() => onEditorUpdate(editor, enabledTransformers))
-      .trim();
-  };
-</script>
-
-<LexicalRoot aria-label={component.label} />

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

@@ -1,35 +0,0 @@
-export default ComponentEditor;
-type ComponentEditor = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-} & {
-    getMarkdown: () => string;
-};
-/**
- * A minimal rich text editor holding a single editor component, so it can be edited with its own
- * field UI outside the main editor, and exported to Markdown. Used to insert a component in the
- * plain text mode.
- */
-declare const ComponentEditor: import("svelte").Component<{
-    /**
-     * Editor component to edit.
-     */
-    component: TextEditorComponent;
-    /**
-     * Markdown output of the component.
-     */
-    markdown?: string | undefined;
-}, {
-    getMarkdown: () => string;
-}, "markdown">;
-type Props = {
-    /**
-     * Editor component to edit.
-     */
-    component: TextEditorComponent;
-    /**
-     * Markdown output of the component.
-     */
-    markdown?: string | undefined;
-};
-import type { TextEditorComponent } from '../../../typedefs';

package/dist/components/text-editor/toolbar/insert-component-dialog.svelte

@@ -1,92 +0,0 @@
-<!--
-  @component
-  A dialog to insert an editor component in the plain text mode. The component is edited with its
-  own field UI in a minimal rich text editor, then inserted into the `<textarea>` as Markdown.
--->
-<script>
-  import { _ } from '@sveltia/i18n';
-  import { getContext } from 'svelte';
-  import Dialog from '../../dialog/dialog.svelte';
-  import { applyRawTextEdit, getRawTextState, insertMarkdown } from '../raw-markdown.js';
-  import ComponentEditor from './component-editor.svelte';
-
-  /**
-   * @import { TextEditorComponent, TextEditorStore } from '../../../typedefs';
-   */
-
-  /**
-   * @typedef {object} Props
-   * @property {TextEditorComponent | undefined} component Editor component to insert.
-   * @property {boolean} [open] Whether to open the dialog.
-   */
-
-  /** @type {Props} */
-  let {
-    /* eslint-disable prefer-const */
-    component,
-    open = $bindable(false),
-    /* eslint-enable prefer-const */
-  } = $props();
-
-  /** @type {TextEditorStore} */
-  const editorStore = getContext('editorStore');
-
-  let markdown = $state('');
-  /** @type {ComponentEditor | undefined} */
-  let componentEditor = $state();
-  /**
-   * Markdown taken from the editor as the dialog starts closing, while it’s still there.
-   * @type {string}
-   */
-  let latestMarkdown = '';
-
-  /**
-   * Insert the component’s Markdown into the `<textarea>`, or just bring the focus back there.
-   * @param {CustomEvent} event `close` event.
-   */
-  const onClose = (event) => {
-    const { textArea } = editorStore;
-
-    // The dialog can only be opened from a button, which needs the `<textarea>`
-    /* v8 ignore next 3 */
-    if (!textArea) {
-      return;
-    }
-
-    if (event.detail.returnValue !== 'cancel' && latestMarkdown) {
-      // A component matched by a single-line pattern is inline; anything else is a block
-      const block = component?.transformer?.type !== 'text-match';
-
-      applyRawTextEdit(
-        textArea,
-        insertMarkdown(getRawTextState(textArea), latestMarkdown, { block }),
-      );
-    } else {
-      textArea.focus();
-    }
-
-    markdown = '';
-    latestMarkdown = '';
-  };
-</script>
-
-<Dialog
-  title={component?.label ?? ''}
-  size="large"
-  bind:open
-  okLabel={_('_sui.insert')}
-  okDisabled={!markdown}
-  restoreFocus={false}
-  onClosing={() => {
-    // Get the latest Markdown, as the bound value is updated with a delay
-    latestMarkdown = componentEditor?.getMarkdown() ?? markdown;
-  }}
-  onClose={(event) => {
-    onClose(event);
-  }}
->
-  <!-- The dialog unmounts its content once closed, so each opening gets a fresh editor -->
-  {#if component}
-    <ComponentEditor bind:this={componentEditor} {component} bind:markdown />
-  {/if}
-</Dialog>

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

@@ -1,30 +0,0 @@
-export default InsertComponentDialog;
-type InsertComponentDialog = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-/**
- * A dialog to insert an editor component in the plain text mode. The component is edited with its
- * own field UI in a minimal rich text editor, then inserted into the `<textarea>` as Markdown.
- */
-declare const InsertComponentDialog: import("svelte").Component<{
-    /**
-     * Editor component to insert.
-     */
-    component: TextEditorComponent | undefined;
-    /**
-     * Whether to open the dialog.
-     */
-    open?: boolean | undefined;
-}, {}, "open">;
-type Props = {
-    /**
-     * Editor component to insert.
-     */
-    component: TextEditorComponent | undefined;
-    /**
-     * Whether to open the dialog.
-     */
-    open?: boolean | undefined;
-};
-import type { TextEditorComponent } from '../../../typedefs';