@sveltia/ui 0.41.1 → 0.41.3

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

@@ -1,6 +1,18 @@
 /**
- * @import { TextEditorBlockType, TextEditorFormatType, TextEditorInlineType } from '../../typedefs';
+ * @import { EditorThemeClasses } from 'lexical';
+ * @import { Transformer } from '@lexical/markdown';
+ * @import {
+ * TextEditorBlockType,
+ * TextEditorFormatType,
+ * TextEditorInlineType,
+ * TextEditorNodeType,
+ * } from '../../typedefs';
  */
+export const PRISM_BASE_URL: "https://unpkg.com/prismjs@1.30.0";
+/**
+ * @type {EditorThemeClasses}
+ */
+export const EDITOR_THEME: EditorThemeClasses;
 /**
  * List of available buttons.
  * @type {{ [key: string]: { labelKey: string, icon: string, inline: boolean } }}
@@ -28,6 +40,30 @@ export const BLOCK_BUTTON_TYPES: TextEditorBlockType[];
  * Image related components IDs. `linked-image` is used in Sveltia CMS.
  */
 export const IMAGE_COMPONENT_IDS: string[];
+/**
+ * Map of Lexical nodes for each block type. The `paragraph` block type is excluded because it is
+ * the default block type.
+ * @type {Record<Exclude<TextEditorBlockType | 'link', 'paragraph'>, any[]>}
+ */
+export const NODE_MAP: Record<Exclude<TextEditorBlockType | "link", "paragraph">, any[]>;
+/**
+ * Map of Lexical transformers for each block type. The `paragraph` block type is excluded because
+ * it is the default block type.
+ * @type {Record<Exclude<TextEditorNodeType, 'paragraph'>, Transformer[]>}
+ */
+export const TRANSFORMER_MAP: Record<Exclude<TextEditorNodeType, "paragraph">, Transformer[]>;
+/**
+ * List of Markdown tags that should be disabled in the editor when converting Lexical nodes to
+ * Markdown (but not when converting Markdown to Lexical nodes because we don’t want to lose any
+ * formatting). Use underscore for italic text in Markdown instead of asterisks, and use double
+ * asterisks for bold text in Markdown instead of underscores. Also, disable triple asterisks and
+ * triple underscores for bold+italic text in Markdown, which can be confusing and is not commonly
+ * used. This is to ensure that the Markdown output is more readable and consistent.
+ */
+export const DISABLED_MARKDOWN_TAGS: string[];
+import type { EditorThemeClasses } from 'lexical';
 import type { TextEditorFormatType } from '../../typedefs';
 import type { TextEditorInlineType } from '../../typedefs';
 import type { TextEditorBlockType } from '../../typedefs';
+import type { TextEditorNodeType } from '../../typedefs';
+import type { Transformer } from '@lexical/markdown';

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

@@ -1,6 +1,89 @@
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import {
+  BOLD_ITALIC_STAR,
+  BOLD_ITALIC_UNDERSCORE,
+  BOLD_STAR,
+  BOLD_UNDERSCORE,
+  CODE,
+  HEADING,
+  INLINE_CODE,
+  ITALIC_STAR,
+  ITALIC_UNDERSCORE,
+  LINK,
+  ORDERED_LIST,
+  QUOTE,
+  STRIKETHROUGH,
+  UNORDERED_LIST,
+} from '@lexical/markdown';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+
+/**
+ * @import { EditorThemeClasses } from 'lexical';
+ * @import { Transformer } from '@lexical/markdown';
+ * @import {
+ * TextEditorBlockType,
+ * TextEditorFormatType,
+ * TextEditorInlineType,
+ * TextEditorNodeType,
+ * } from '../../typedefs';
+ */
+
+export const PRISM_BASE_URL = `https://unpkg.com/prismjs@1.30.0`;
+
 /**
- * @import { TextEditorBlockType, TextEditorFormatType, TextEditorInlineType } from '../../typedefs';
+ * @type {EditorThemeClasses}
  */
+export const EDITOR_THEME = {
+  text: {
+    /**
+     * Enable bold+italic and strikethrough styling.
+     * @see https://github.com/facebook/lexical/discussions/4381
+     */
+    italic: 'italic',
+    strikethrough: 'strikethrough',
+  },
+  list: {
+    nested: {
+      listitem: 'nested',
+    },
+  },
+  code: 'code-block',
+  // https://github.com/facebook/lexical/blob/main/packages/lexical-website/docs/getting-started/theming.md
+  codeHighlight: {
+    atrule: 'token atrule',
+    attr: 'token attr',
+    boolean: 'token boolean',
+    builtin: 'token builtin',
+    cdata: 'token cdata',
+    char: 'token char',
+    class: 'token class',
+    'class-name': 'token class-name',
+    comment: 'token comment',
+    constant: 'token constant',
+    deleted: 'token deleted',
+    doctype: 'token doctype',
+    entity: 'token entity',
+    function: 'token function',
+    important: 'token important',
+    inserted: 'token inserted',
+    keyword: 'token keyword',
+    namespace: 'token namespace',
+    number: 'token number',
+    operator: 'token operator',
+    prolog: 'token prolog',
+    property: 'token property',
+    punctuation: 'token punctuation',
+    regex: 'token regex',
+    selector: 'token selector',
+    string: 'token string',
+    symbol: 'token symbol',
+    tag: 'token tag',
+    url: 'token url',
+    variable: 'token variable',
+  },
+};
 
 /**
  * List of available buttons.
@@ -120,3 +203,71 @@ export const BLOCK_BUTTON_TYPES = [
  * Image related components IDs. `linked-image` is used in Sveltia CMS.
  */
 export const IMAGE_COMPONENT_IDS = ['image', 'linked-image'];
+
+/**
+ * Map of Lexical nodes for each block type. The `paragraph` block type is excluded because it is
+ * the default block type.
+ * @type {Record<Exclude<TextEditorBlockType | 'link', 'paragraph'>, any[]>}
+ */
+export const NODE_MAP = {
+  'heading-1': [HeadingNode],
+  'heading-2': [HeadingNode],
+  'heading-3': [HeadingNode],
+  'heading-4': [HeadingNode],
+  'heading-5': [HeadingNode],
+  'heading-6': [HeadingNode],
+  'bulleted-list': [ListNode, ListItemNode],
+  'numbered-list': [ListNode, ListItemNode],
+  blockquote: [QuoteNode],
+  'code-block': [CodeNode, CodeHighlightNode],
+  link: [LinkNode],
+};
+
+/**
+ * Map of Lexical transformers for each block type. The `paragraph` block type is excluded because
+ * it is the default block type.
+ * @type {Record<Exclude<TextEditorNodeType, 'paragraph'>, Transformer[]>}
+ */
+export const TRANSFORMER_MAP = {
+  // ELEMENT_TRANSFORMERS
+  'heading-1': [HEADING],
+  'heading-2': [HEADING],
+  'heading-3': [HEADING],
+  'heading-4': [HEADING],
+  'heading-5': [HEADING],
+  'heading-6': [HEADING],
+  'bulleted-list': [UNORDERED_LIST],
+  'numbered-list': [ORDERED_LIST],
+  blockquote: [QUOTE],
+  // MULTILINE_ELEMENT_TRANSFORMERS
+  'code-block': [CODE],
+  // TEXT_FORMAT_TRANSFORMERS
+  code: [INLINE_CODE],
+  bold: [
+    BOLD_STAR,
+    // Disabled for Markdown output in `DISABLED_MARKDOWN_TAGS` below
+    BOLD_UNDERSCORE,
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+  ],
+  italic: [
+    ITALIC_UNDERSCORE,
+    // Disabled for Markdown output in `DISABLED_MARKDOWN_TAGS` below
+    ITALIC_STAR,
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+  ],
+  strikethrough: [STRIKETHROUGH],
+  // TEXT_MATCH_TRANSFORMERS
+  link: [LINK],
+};
+
+/**
+ * List of Markdown tags that should be disabled in the editor when converting Lexical nodes to
+ * Markdown (but not when converting Markdown to Lexical nodes because we don’t want to lose any
+ * formatting). Use underscore for italic text in Markdown instead of asterisks, and use double
+ * asterisks for bold text in Markdown instead of underscores. Also, disable triple asterisks and
+ * triple underscores for bold+italic text in Markdown, which can be confusing and is not commonly
+ * used. This is to ensure that the Markdown output is more readable and consistent.
+ */
+export const DISABLED_MARKDOWN_TAGS = ['*', '__', '***', '___'];

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

@@ -1,12 +1,24 @@
 export function getSelectionTypes(): TextEditorSelectionState;
-export function onEditorUpdate(editor: LexicalEditor): void;
-export function initEditor({ components, useMarkdownShortcuts, isCodeEditor, defaultLanguage, }: TextEditorConfig): {
+export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Transformer[]): void;
+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<void>;
+export function focusEditor(editor: LexicalEditor): Promise<void>;
+export type InitEditorResult = {
+    /**
+     * Editor instance.
+     */
     editor: LexicalEditor;
+    /**
+     * List of enabled Markdown transformers.
+     */
+    enabledTransformers: Transformer[];
+    /**
+     * Remove all registered Lexical listeners.
+     */
     dispose: () => void;
 };
-export function loadCodeHighlighter(lang: string): Promise<void>;
-export function convertMarkdownToLexical(editor: LexicalEditor, value: string): Promise<void>;
-export function focusEditor(editor: LexicalEditor): Promise<void>;
 import type { TextEditorSelectionState } from '../../typedefs';
 import type { LexicalEditor } from 'lexical';
+import type { Transformer } from '@lexical/markdown';
 import type { TextEditorConfig } from '../../typedefs';

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

@@ -3,8 +3,6 @@
 import 'prismjs';
 
 import {
-  CodeHighlightNode,
-  CodeNode,
   $createCodeNode as createCodeNode,
   $isCodeHighlightNode as isCodeHighlightNode,
   $isCodeNode as isCodeNode,
@@ -15,7 +13,6 @@ import { HorizontalRuleNode } from '@lexical/extension';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import {
   $isLinkNode as isLinkNode,
-  LinkNode,
   TOGGLE_LINK_COMMAND,
   $toggleLink as toggleLink,
 } from '@lexical/link';
@@ -26,20 +23,16 @@ import {
   $insertList as insertList,
   $isListItemNode as isListItemNode,
   $isListNode as isListNode,
-  ListItemNode,
   ListNode,
 } from '@lexical/list';
 import {
   $convertFromMarkdownString as convertFromMarkdownString,
   $convertToMarkdownString as convertToMarkdownString,
   registerMarkdownShortcuts,
-  TRANSFORMERS,
 } from '@lexical/markdown';
 import {
-  HeadingNode,
   $isHeadingNode as isHeadingNode,
   $isQuoteNode as isQuoteNode,
-  QuoteNode,
   registerRichText,
 } from '@lexical/rich-text';
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
@@ -57,93 +50,37 @@ import {
   OUTDENT_CONTENT_COMMAND,
 } from 'lexical';
 import prismComponents from 'prismjs/components';
-import { BLOCK_BUTTON_TYPES, TEXT_FORMAT_BUTTON_TYPES } from './constants.js';
+import {
+  BLOCK_BUTTON_TYPES,
+  DISABLED_MARKDOWN_TAGS,
+  EDITOR_THEME,
+  NODE_MAP,
+  PRISM_BASE_URL,
+  TEXT_FORMAT_BUTTON_TYPES,
+  TRANSFORMER_MAP,
+} from './constants.js';
 import { increaseListIndentation, splitMultilineFormatting } from './markdown.js';
 import { HR } from './transformers/hr.js';
 import { TABLE } from './transformers/table.js';
 
 /**
  * @import { CreateEditorArgs, LexicalEditor } from 'lexical';
+ * @import { Transformer } from '@lexical/markdown';
  * @import {
  * TextEditorBlockType,
  * TextEditorConfig,
  * TextEditorInlineType,
+ * TextEditorNodeType,
  * TextEditorSelectionState,
  * } from '../../typedefs';
  */
 
-const allTransformers = [...TRANSFORMERS, HR, TABLE];
-const prismBaseURL = `https://unpkg.com/prismjs@1.30.0`;
-
 /**
- * Lexical editor configuration.
- * @type {CreateEditorArgs}
+ * @typedef {object} InitEditorResult
+ * @property {LexicalEditor} editor Editor instance.
+ * @property {Transformer[]} enabledTransformers List of enabled Markdown transformers.
+ * @property {() => void} dispose Remove all registered Lexical listeners.
  */
-const editorConfig = {
-  namespace: 'editor',
-  nodes: [
-    HeadingNode,
-    QuoteNode,
-    LinkNode,
-    ListNode,
-    ListItemNode,
-    CodeNode,
-    CodeHighlightNode,
-    HorizontalRuleNode,
-    TableNode,
-    TableCellNode,
-    TableRowNode,
-  ],
-  theme: {
-    text: {
-      /**
-       * Enable bold+italic and strikethrough styling.
-       * @see https://github.com/facebook/lexical/discussions/4381
-       */
-      italic: 'italic',
-      strikethrough: 'strikethrough',
-    },
-    list: {
-      nested: {
-        listitem: 'nested',
-      },
-    },
-    code: 'code-block',
-    // https://github.com/facebook/lexical/blob/main/packages/lexical-website/docs/getting-started/theming.md
-    codeHighlight: {
-      atrule: 'token atrule',
-      attr: 'token attr',
-      boolean: 'token boolean',
-      builtin: 'token builtin',
-      cdata: 'token cdata',
-      char: 'token char',
-      class: 'token class',
-      'class-name': 'token class-name',
-      comment: 'token comment',
-      constant: 'token constant',
-      deleted: 'token deleted',
-      doctype: 'token doctype',
-      entity: 'token entity',
-      function: 'token function',
-      important: 'token important',
-      inserted: 'token inserted',
-      keyword: 'token keyword',
-      namespace: 'token namespace',
-      number: 'token number',
-      operator: 'token operator',
-      prolog: 'token prolog',
-      property: 'token property',
-      punctuation: 'token punctuation',
-      regex: 'token regex',
-      selector: 'token selector',
-      string: 'token string',
-      symbol: 'token symbol',
-      tag: 'token tag',
-      url: 'token url',
-      variable: 'token variable',
-    },
-  },
-};
 
 /**
  * Get the current selection’s block node key as well as block and inline level types.
@@ -223,15 +160,18 @@ export const getSelectionTypes = () => {
  * Listen to changes made on the editor and trigger the Update event.
  * @internal
  * @param {LexicalEditor} editor Editor instance.
+ * @param {Transformer[]} enabledTransformers Enabled Markdown transformers.
  */
-export const onEditorUpdate = (editor) => {
+export const onEditorUpdate = (editor, enabledTransformers) => {
+  const transformers = enabledTransformers.filter(
+    (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
+  );
+
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
-        value: convertToMarkdownString(
-          // Use underscores for italic text in Markdown instead of asterisks
-          allTransformers.filter((/** @type {any} */ { tag }) => tag !== '*'),
-        ) // Remove unnecessary backslash for underscore and backslash characters
+        value: convertToMarkdownString(transformers)
+          // Remove unnecessary backslash for underscore and backslash characters
           // @see https://github.com/sveltia/sveltia-cms/issues/430
           // @see https://github.com/sveltia/sveltia-cms/issues/512
           .replace(/\\([_\\])/g, '$1')
@@ -249,18 +189,44 @@ export const onEditorUpdate = (editor) => {
 /**
  * Initialize the Lexical editor.
  * @param {TextEditorConfig} config Editor configuration.
- * @returns {{ editor: LexicalEditor, dispose: () => void }} Editor instance and cleanup.
+ * @returns {InitEditorResult} Editor instance and cleanup.
  */
 export const initEditor = ({
+  enabledButtons = [],
   components = [],
   useMarkdownShortcuts,
   isCodeEditor = false,
   defaultLanguage = 'plain',
 }) => {
-  components.forEach(({ node, transformer }) => {
-    /** @type {any[]} */ (editorConfig.nodes).unshift(node);
-    allTransformers.unshift(transformer);
-  });
+  /** @type {CreateEditorArgs} */
+  const editorConfig = {
+    namespace: 'editor',
+    nodes: [
+      ...components.map(({ node }) => node),
+      ...new Set(
+        Object.entries(NODE_MAP)
+          .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
+          .flatMap(([, nodes]) => nodes),
+      ),
+      HorizontalRuleNode,
+      TableNode,
+      TableCellNode,
+      TableRowNode,
+    ],
+    theme: EDITOR_THEME,
+  };
+
+  /** @type {Transformer[]} */
+  const enabledTransformers = [
+    ...components.map(({ transformer }) => transformer),
+    ...new Set(
+      Object.entries(TRANSFORMER_MAP)
+        .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
+        .flatMap(([, transformers]) => transformers),
+    ),
+    HR,
+    TABLE,
+  ];
 
   const editor = createEditor(editorConfig);
   /** @type {Array<() => void>} */
@@ -282,63 +248,73 @@ export const initEditor = ({
   addUnregister(registerHistory(editor, createEmptyHistoryState(), 1000));
 
   if (useMarkdownShortcuts) {
-    addUnregister(registerMarkdownShortcuts(editor, allTransformers));
+    addUnregister(registerMarkdownShortcuts(editor, enabledTransformers));
   }
 
-  addUnregister(
-    registerCodeHighlighting(editor, {
-      defaultLanguage,
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      tokenize: (code, lang = 'plain') =>
-        window.Prism.tokenize(code, window.Prism.languages[lang] ?? window.Prism.languages.plain),
-      $tokenize: PrismTokenizer.$tokenize,
-    }),
-  );
-
-  addUnregister(
-    editor.registerCommand(
-      TOGGLE_LINK_COMMAND,
-      (payload) => {
-        toggleLink(typeof payload === 'string' ? payload : null);
-
-        return true;
-      },
-      COMMAND_PRIORITY_NORMAL,
-    ),
-  );
-
-  addUnregister(
-    editor.registerCommand(
-      INSERT_UNORDERED_LIST_COMMAND,
-      () => {
-        insertList('bullet');
+  if (enabledButtons.includes('code-block') || isCodeEditor) {
+    addUnregister(
+      registerCodeHighlighting(editor, {
+        defaultLanguage,
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        tokenize: (code, lang = 'plain') =>
+          window.Prism.tokenize(code, window.Prism.languages[lang] ?? window.Prism.languages.plain),
+        $tokenize: PrismTokenizer.$tokenize,
+      }),
+    );
+  }
 
-        return true;
-      },
-      COMMAND_PRIORITY_NORMAL,
-    ),
-  );
+  if (enabledButtons.includes('link')) {
+    addUnregister(
+      editor.registerCommand(
+        TOGGLE_LINK_COMMAND,
+        (payload) => {
+          toggleLink(typeof payload === 'string' ? payload : null);
+
+          return true;
+        },
+        COMMAND_PRIORITY_NORMAL,
+      ),
+    );
+  }
 
-  addUnregister(
-    editor.registerCommand(
-      INSERT_ORDERED_LIST_COMMAND,
-      () => {
-        insertList('number');
+  if (enabledButtons.includes('bulleted-list')) {
+    addUnregister(
+      editor.registerCommand(
+        INSERT_UNORDERED_LIST_COMMAND,
+        () => {
+          insertList('bullet');
+
+          return true;
+        },
+        COMMAND_PRIORITY_NORMAL,
+      ),
+    );
+  }
 
-        return true;
-      },
-      COMMAND_PRIORITY_NORMAL,
-    ),
-  );
+  if (enabledButtons.includes('numbered-list')) {
+    addUnregister(
+      editor.registerCommand(
+        INSERT_ORDERED_LIST_COMMAND,
+        () => {
+          insertList('number');
+
+          return true;
+        },
+        COMMAND_PRIORITY_NORMAL,
+      ),
+    );
+  }
 
-  // https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/shared/useList.ts
-  addUnregister(
-    editor.registerCommand(
-      INSERT_PARAGRAPH_COMMAND,
-      () => handleListInsertParagraph(),
-      COMMAND_PRIORITY_NORMAL,
-    ),
-  );
+  if (enabledButtons.includes('bulleted-list') || enabledButtons.includes('numbered-list')) {
+    // https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/shared/useList.ts
+    addUnregister(
+      editor.registerCommand(
+        INSERT_PARAGRAPH_COMMAND,
+        () => handleListInsertParagraph(),
+        COMMAND_PRIORITY_NORMAL,
+      ),
+    );
+  }
 
   addUnregister(
     editor.registerUpdateListener(() => {
@@ -369,7 +345,7 @@ export const initEditor = ({
             }
           }
 
-          onEditorUpdate(editor);
+          onEditorUpdate(editor, enabledTransformers);
         });
       })();
     }),
@@ -424,6 +400,7 @@ export const initEditor = ({
 
   return {
     editor,
+    enabledTransformers,
     /**
      * Remove all registered Lexical listeners.
      */
@@ -455,7 +432,7 @@ export const loadCodeHighlighter = async (lang) => {
 
   try {
     // eslint-disable-next-line jsdoc/no-bad-blocks
-    await import(/* @vite-ignore */ `${prismBaseURL}/components/prism-${canonicalLang}.min.js`);
+    await import(/* @vite-ignore */ `${PRISM_BASE_URL}/components/prism-${canonicalLang}.min.js`);
   } catch {
     //
   }
@@ -465,10 +442,11 @@ export const loadCodeHighlighter = async (lang) => {
  * Convert Markdown to Lexical nodes.
  * @param {LexicalEditor} editor Editor instance.
  * @param {string} value Current Markdown value.
+ * @param {Transformer[]} enabledTransformers List of enabled Markdown transformers.
  * @returns {Promise<void>} Nothing.
  * @throws {Error} Failed to convert the value to Lexical nodes.
  */
-export const convertMarkdownToLexical = async (editor, value) => {
+export const convertMarkdownToLexical = async (editor, value, enabledTransformers) => {
   // 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 = 'plain' } = {} }) =>
@@ -485,7 +463,7 @@ export const convertMarkdownToLexical = async (editor, value) => {
   return new Promise((resolve, reject) => {
     editor.update(() => {
       try {
-        convertFromMarkdownString(value, allTransformers);
+        convertFromMarkdownString(value, enabledTransformers);
         resolve(undefined);
       } catch (ex) {
         reject(new Error('Failed to convert Markdown', { cause: ex }));

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

@@ -88,9 +88,10 @@
   };
 
   onMount(() => {
-    const { editor, dispose } = initEditor(editorStore.config);
+    const { editor, enabledTransformers, dispose } = initEditor(editorStore.config);
 
     editorStore.editor = editor;
+    editorStore.enabledTransformers = enabledTransformers;
 
     lexicalRoot?.addEventListener('Update', onUpdate);
     lexicalRoot?.addEventListener('click', onClick);

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

@@ -2,8 +2,9 @@ import { generateElementId } from '@sveltia/utils/element';
 import { convertMarkdownToLexical } from './core.js';
 
 /**
- * @import { TextEditorConfig, TextEditorSelectionState, TextEditorStore } from '../../typedefs';
  * @import { LexicalEditor } from 'lexical';
+ * @import { Transformer } from '@lexical/markdown';
+ * @import { TextEditorConfig, TextEditorSelectionState, TextEditorStore } from '../../typedefs';
  */
 
 /**
@@ -17,6 +18,8 @@ export const createEditorStore = () => {
   let initialized = $state(false);
   /** @type {LexicalEditor | undefined} */
   let editor = $state();
+  /** @type {Transformer[]} */
+  let enabledTransformers = $state([]);
 
   /** @type {TextEditorConfig} */
   let config = $state({
@@ -53,7 +56,7 @@ export const createEditorStore = () => {
       // We should avoid an empty editor; there should be at least one `<p>`, so give it an empty
       // string if the `value` is `undefined`
       // @see https://github.com/facebook/lexical/issues/2308
-      await convertMarkdownToLexical(editor, inputValue || '');
+      await convertMarkdownToLexical(editor, inputValue || '', enabledTransformers);
     } catch (ex) {
       hasConverterError = true;
       inputValue = originalValue;
@@ -70,6 +73,12 @@ export const createEditorStore = () => {
     set editor(newValue) {
       editor = newValue;
     },
+    set enabledTransformers(newValue) {
+      enabledTransformers = newValue;
+    },
+    get enabledTransformers() {
+      return enabledTransformers;
+    },
     get initialized() {
       return initialized;
     },

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

@@ -15,12 +15,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import {
-   * TextEditorBlockType,
-   * TextEditorComponent,
-   * TextEditorInlineType,
-   * TextEditorMode,
-   * } from '../../typedefs';
+   * @import { TextEditorComponent, TextEditorMode, TextEditorNodeType } from '../../typedefs';
    */
 
   /**
@@ -29,7 +24,7 @@
    * @property {boolean} [flex] Make the text input container flexible.
    * @property {'ltr' | 'rtl' | 'auto'} [dir] The `dir` attribute on the `<textarea>` element.
    * @property {TextEditorMode[]} [modes] Enabled modes.
-   * @property {(TextEditorBlockType | TextEditorInlineType)[]} [buttons] Enabled buttons.
+   * @property {TextEditorNodeType[]} [buttons] Enabled buttons.
    * @property {TextEditorComponent[]} [components] Editor components.
    * @property {boolean} [useMarkdownShortcuts] Whether to enable Markdown keyboard shortcuts in the
    * rich text editor.

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

@@ -24,7 +24,7 @@ declare const TextEditor: import("svelte").Component<{
     /**
      * Enabled buttons.
      */
-    buttons?: (TextEditorBlockType | TextEditorInlineType)[] | undefined;
+    buttons?: TextEditorNodeType[] | undefined;
     /**
      * Editor components.
      */
@@ -87,7 +87,7 @@ type Props = {
     /**
      * Enabled buttons.
      */
-    buttons?: (TextEditorBlockType | TextEditorInlineType)[] | undefined;
+    buttons?: TextEditorNodeType[] | undefined;
     /**
      * Editor components.
      */
@@ -131,7 +131,6 @@ type Props = {
     children?: Snippet<[]> | undefined;
 };
 import type { TextEditorMode } from '../../typedefs';
-import type { TextEditorBlockType } from '../../typedefs';
-import type { TextEditorInlineType } from '../../typedefs';
+import type { TextEditorNodeType } from '../../typedefs';
 import type { TextEditorComponent } from '../../typedefs';
 import type { Snippet } from 'svelte';

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

@@ -82,24 +82,27 @@
 </script>
 
 <ToolbarWrapper disabled={disabled || readonly} aria-label={_('_sui.text_editor.text_editor')}>
-  <MenuButton
-    disabled={!editorStore.useRichText}
-    aria-label={_('_sui.text_editor.show_text_style_options')}
-    aria-controls="{editorStore.editorId}-lexical-root"
-  >
-    {#snippet startIcon()}
-      <Icon
-        name={AVAILABLE_BUTTONS[editorStore.selection.blockType ?? '']?.icon ?? 'format_paragraph'}
-      />
-    {/snippet}
-    {#snippet popup()}
-      <Menu aria-label={_('_sui.text_editor.text_style_options')}>
-        {#each blockLevelButtons as type (type)}
-          <ToggleBlockMenuItem {type} />
-        {/each}
-      </Menu>
-    {/snippet}
-  </MenuButton>
+  {#if blockLevelButtons.length > 1}
+    <MenuButton
+      disabled={!editorStore.useRichText}
+      aria-label={_('_sui.text_editor.show_text_style_options')}
+      aria-controls="{editorStore.editorId}-lexical-root"
+    >
+      {#snippet startIcon()}
+        <Icon
+          name={AVAILABLE_BUTTONS[editorStore.selection.blockType ?? '']?.icon ??
+            'format_paragraph'}
+        />
+      {/snippet}
+      {#snippet popup()}
+        <Menu aria-label={_('_sui.text_editor.text_style_options')}>
+          {#each blockLevelButtons as type (type)}
+            <ToggleBlockMenuItem {type} />
+          {/each}
+        </Menu>
+      {/snippet}
+    </MenuButton>
+  {/if}
   {#if editorStore.selection.blockType === 'code-block'}
     <Divider orientation="vertical" />
     <CodeLanguageSwitcher disabled={!editorStore.useRichText} />

package/dist/typedefs.d.ts

@@ -664,6 +664,7 @@ export type ToastPosition = "auto" | "top-left" | "top-center" | "top-right" | "
 export type TextEditorBlockType = "paragraph" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "bulleted-list" | "numbered-list" | "blockquote" | "code-block";
 export type TextEditorFormatType = "bold" | "italic" | "strikethrough" | "code";
 export type TextEditorInlineType = TextEditorFormatType | "link";
+export type TextEditorNodeType = TextEditorBlockType | TextEditorInlineType;
 export type TextEditorMode = "rich-text" | "plain-text";
 export type TextEditorComponent = {
     /**
@@ -701,7 +702,7 @@ export type TextEditorConfig = {
      * Enabled buttons for the
      * editor.
      */
-    enabledButtons: (TextEditorBlockType | TextEditorInlineType)[];
+    enabledButtons: TextEditorNodeType[];
     /**
      * Editor components.
      */
@@ -739,6 +740,10 @@ export type TextEditorStore = {
      * Lexical editor instance.
      */
     editor: LexicalEditor | undefined;
+    /**
+     * Enabled Lexical transformers.
+     */
+    enabledTransformers: Transformer[];
     /**
      * Whether the Lexical editor is initialized.
      */

package/dist/typedefs.js

@@ -270,6 +270,10 @@
  * @typedef {TextEditorFormatType | 'link'} TextEditorInlineType
  */
 
+/**
+ * @typedef {TextEditorBlockType | TextEditorInlineType} TextEditorNodeType
+ */
+
 /**
  * @typedef {'rich-text' | 'plain-text'} TextEditorMode
  */
@@ -288,7 +292,7 @@
 /**
  * @typedef {object} TextEditorConfig
  * @property {TextEditorMode[]} modes Enabled modes.
- * @property {(TextEditorBlockType | TextEditorInlineType)[]} enabledButtons Enabled buttons for the
+ * @property {TextEditorNodeType[]} enabledButtons Enabled buttons for the
  * editor.
  * @property {TextEditorComponent[]} components Editor components.
  * @property {boolean} useMarkdownShortcuts Whether to enable Markdown keyboard shortcuts in the
@@ -307,6 +311,7 @@
 /**
  * @typedef {object} TextEditorStore
  * @property {LexicalEditor | undefined} editor Lexical editor instance.
+ * @property {Transformer[]} enabledTransformers Enabled Lexical transformers.
  * @property {boolean} initialized Whether the Lexical editor is initialized.
  * @property {string} editorId Random ID assigned to the editor.
  * @property {TextEditorConfig} config Editor configuration.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.41.1",
+  "version": "0.41.3",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -55,19 +55,19 @@
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.69.1",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@sveltejs/vite-plugin-svelte": "^7.1.4",
+    "@vitest/coverage-v8": "^4.1.10",
     "cspell": "^10.0.1",
     "eslint": "^9.39.4",
     "eslint-config-airbnb-extended": "^3.1.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^63.0.11",
+    "eslint-plugin-jsdoc": "^63.0.12",
     "eslint-plugin-package-json": "^1.5.0",
     "eslint-plugin-svelte": "^3.20.0",
     "globals": "^17.7.0",
     "happy-dom": "^20.10.6",
-    "oxlint": "^1.72.0",
+    "oxlint": "^1.73.0",
     "postcss": "^8.5.16",
     "postcss-html": "^1.8.1",
     "prettier": "^3.9.4",
@@ -81,7 +81,7 @@
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
     "vite": "^8.1.3",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"