@sveltia/ui 0.78.3 → 0.79.0

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

@@ -24,7 +24,7 @@
   import EmojiSuggestions from '../emoji/emoji-suggestions.svelte';
 
   /**
-   * @import { EmojiAnchorRect, EmojiEntry, EmojiTrigger, TextEditorStore } from '../../typedefs';
+   * @import { EmojiAnchorRect, EmojiEntry, EmojiTrigger, TextEditorStore } from '../../typedefs.js';
    */
 
   /**

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

@@ -6,7 +6,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { TextEditorStore } from '../../typedefs';
+   * @import { TextEditorStore } from '../../typedefs.js';
    */
 
   /**

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

@@ -1,33 +1,4 @@
-/**
- * @import {
- * TextEditorBlockType,
- * TextEditorComponent,
- * TextEditorFormatType,
- * } from '../../typedefs';
- */
-/**
- * Current value and selection of the `<textarea>`.
- * @typedef {object} RawTextState
- * @property {string} value Value.
- * @property {number} start Selection start.
- * @property {number} end Selection end.
- */
-/**
- * Edit to apply to the `<textarea>`: replace the text between `start` and `end` with `text`, then
- * select the text between `selectionStart` and `selectionEnd`, which are offsets in the new value.
- * @typedef {object} RawTextEdit
- * @property {number} start Start of the range to replace.
- * @property {number} end End of the range to replace.
- * @property {string} text Replacement text.
- * @property {number} selectionStart New selection start.
- * @property {number} selectionEnd New selection end.
- */
-/**
- * Markdown markers for the inline formats.
- * @type {Record<TextEditorFormatType, string>}
- */
-export const INLINE_MARKERS: Record<TextEditorFormatType, string>;
-export function getBlockType({ value, start }: RawTextState): TextEditorBlockType;
+export function getBlockType(state: RawTextState): TextEditorBlockType;
 export function toggleInlineFormat({ value, start, end }: RawTextState, type: TextEditorFormatType): RawTextEdit;
 export function setBlockType(state: RawTextState, type: TextEditorBlockType): RawTextEdit;
 export function insertLink({ value, start, end }: RawTextState, { url, text }: {
@@ -41,6 +12,8 @@ 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 editRawText(textArea: HTMLTextAreaElement | undefined, getEdit: (state: RawTextState) => RawTextEdit): Promise<void>;
+export function registerRawTextShortcut(textArea: HTMLTextAreaElement, key: string, handler: () => void): () => void;
 export function insertComponent(textArea: HTMLTextAreaElement, component: TextEditorComponent): Promise<void>;
 /**
  * Current value and selection of the `<textarea>`.
@@ -85,6 +58,6 @@ export type RawTextEdit = {
      */
     selectionEnd: number;
 };
-import type { TextEditorFormatType } from '../../typedefs';
-import type { TextEditorBlockType } from '../../typedefs';
-import type { TextEditorComponent } from '../../typedefs';
+import type { TextEditorBlockType } from '../../typedefs.js';
+import type { TextEditorFormatType } from '../../typedefs.js';
+import type { TextEditorComponent } from '../../typedefs.js';

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

@@ -1,10 +1,12 @@
 /**
  * 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}, {@link applyRawTextEdit} and {@link insertComponent}, everything here is
- * pure: a function takes the current value and selection, and returns the edit to apply.
+ * {@link getRawTextState}, {@link applyRawTextEdit}, {@link editRawText},
+ * {@link registerRawTextShortcut} and {@link insertComponent}, everything here is pure: a function
+ * takes the current value and selection, and returns the edit to apply.
  */
 
+import { isMac, matchesShortcuts } from '@sveltia/utils/events';
 import { getComponentMarkdown } from './core.js';
 
 /**
@@ -12,7 +14,7 @@ import { getComponentMarkdown } from './core.js';
  * TextEditorBlockType,
  * TextEditorComponent,
  * TextEditorFormatType,
- * } from '../../typedefs';
+ * } from '../../typedefs.js';
  */
 
 /**
@@ -38,7 +40,7 @@ import { getComponentMarkdown } from './core.js';
  * Markdown markers for the inline formats.
  * @type {Record<TextEditorFormatType, string>}
  */
-export const INLINE_MARKERS = {
+const INLINE_MARKERS = {
   bold: '**',
   italic: '_',
   strikethrough: '~~',
@@ -66,6 +68,13 @@ const getLineRange = ({ value, start, end }) => {
   return { lineStart, lineEnd: lineEndIndex === -1 ? value.length : lineEndIndex };
 };
 
+/**
+ * Get the index of the line where the selection starts.
+ * @param {RawTextState} state Current state.
+ * @returns {number} Line index.
+ */
+const getStartLineIndex = ({ value, start }) => value.slice(0, start).split('\n').length - 1;
+
 /**
  * Find the fenced code block the given line is in.
  * @param {string[]} lines All the lines.
@@ -104,9 +113,9 @@ const findCodeBlock = (lines, lineIndex) => {
  * @param {RawTextState} state Current state.
  * @returns {TextEditorBlockType} Block type.
  */
-export const getBlockType = ({ value, start }) => {
-  const lines = value.split('\n');
-  const lineIndex = value.slice(0, start).split('\n').length - 1;
+export const getBlockType = (state) => {
+  const lines = state.value.split('\n');
+  const lineIndex = getStartLineIndex(state);
   const line = lines[lineIndex];
 
   if (findCodeBlock(lines, lineIndex)) {
@@ -205,7 +214,7 @@ export const toggleInlineFormat = ({ value, start, end }, type) => {
 export const setBlockType = (state, type) => {
   const { value, start, end } = state;
   const lines = value.split('\n');
-  const firstIndex = value.slice(0, start).split('\n').length - 1;
+  const firstIndex = getStartLineIndex(state);
   const codeBlock = findCodeBlock(lines, firstIndex);
 
   // Leave a code block by removing its fences, then change the type of the selected lines
@@ -476,6 +485,52 @@ export const applyRawTextEdit = async (
   textArea.setSelectionRange(selectionStart, selectionEnd);
 };
 
+/**
+ * Apply the edit made by the given function from the current state of the `<textarea>`, and focus
+ * it. Nothing happens if there’s no `<textarea>`.
+ * @param {HTMLTextAreaElement | undefined} textArea `<textarea>` element.
+ * @param {(state: RawTextState) => RawTextEdit} getEdit Function to make the edit from the current
+ * state.
+ * @returns {Promise<void>} Nothing.
+ */
+export const editRawText = async (textArea, getEdit) => {
+  if (!textArea) {
+    return;
+  }
+
+  await applyRawTextEdit(textArea, getEdit(getRawTextState(textArea)));
+};
+
+/**
+ * Handle the given keyboard shortcut, Accel+{key}, on the `<textarea>` while it’s editable. The
+ * rich text editor handles its shortcuts on its own.
+ * @param {HTMLTextAreaElement} textArea `<textarea>` element.
+ * @param {string} key Key to combine with the Accel key, like `B`.
+ * @param {() => void} handler Function to call when the shortcut is pressed.
+ * @returns {() => void} Function to stop handling the shortcut.
+ */
+export const registerRawTextShortcut = (textArea, key, handler) => {
+  /**
+   * Handle the `keydown` event.
+   * @param {KeyboardEvent} event `keydown` event.
+   */
+  const onKeyDown = (event) => {
+    if (
+      isRawTextEditable(textArea) &&
+      matchesShortcuts(event, isMac() ? `Meta+${key}` : `Ctrl+${key}`)
+    ) {
+      event.preventDefault();
+      handler();
+    }
+  };
+
+  textArea.addEventListener('keydown', onKeyDown);
+
+  return () => {
+    textArea.removeEventListener('keydown', onKeyDown);
+  };
+};
+
 /**
  * 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

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

@@ -18,4 +18,4 @@ import type { LexicalEditor } from 'lexical';
 import type { NodeKey } from 'lexical';
 import type { CodeNode } from '@lexical/code-core';
 import type { LexicalNode } from 'lexical';
-import type { HighlightedToken } from '../../../typedefs';
+import type { HighlightedToken } from '../../../typedefs.js';

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

@@ -29,7 +29,7 @@ import { getCodeTheme } from './theme.js';
 /**
  * @import { CodeNode } from '@lexical/code-core';
  * @import { LexicalEditor, LexicalNode, NodeKey } from 'lexical';
- * @import { HighlightedToken } from '../../../typedefs';
+ * @import { HighlightedToken } from '../../../typedefs.js';
  */
 
 /**
@@ -242,15 +242,48 @@ const resolvePayload = async (kind, id, load) => {
   return payload;
 };
 
+/**
+ * Load a grammar or theme into the highlighter once, then refresh the given code node. The
+ * configured loader and the highlighter share the method name for each kind.
+ * @param {'lang' | 'theme'} kind Payload kind.
+ * @param {string} id Language or theme ID.
+ * @param {LexicalEditor} [editor] Editor instance to refresh once the payload is loaded.
+ * @param {NodeKey} [codeNodeKey] Key of the code node to refresh.
+ * @returns {Promise<void>} Promise resolving when the payload is loaded.
+ */
+const loadAsset = (kind, id, editor, codeNodeKey) => {
+  const method = kind === 'lang' ? 'loadLanguage' : 'loadTheme';
+
+  return loadOnce(
+    `${kind}/${id}`,
+    async () => {
+      const payload = await resolvePayload(kind, id, () => getCodeHighlighterLoaders()[method](id));
+
+      if (payload) {
+        await highlighter[method](payload);
+      }
+    },
+    editor,
+    codeNodeKey,
+  );
+};
+
+/**
+ * Find the metadata of the given language.
+ * @param {string} language Language identifier or alias, like `ts`.
+ * @returns {(typeof LANGUAGES)[number] | undefined} Language metadata, or `undefined` when the
+ * language is unknown.
+ */
+const findLanguage = (language) =>
+  LANGUAGES.find(({ id, aliases }) => id === language || aliases?.includes(language));
+
 /**
  * Resolve a language alias to its canonical identifier.
  * @param {string} language Language identifier or alias, like `ts`.
  * @returns {string} Canonical identifier, like `typescript`. Returns the input unchanged when the
  * language is unknown.
  */
-export const normalizeCodeLanguage = (language) =>
-  LANGUAGES.find(({ id, aliases }) => id === language || aliases?.includes(language))?.id ??
-  language;
+export const normalizeCodeLanguage = (language) => findLanguage(language)?.id ?? language;
 
 /**
  * Load the grammar for the given language, then refresh the given code node.
@@ -267,26 +300,13 @@ export const loadCodeLanguage = (language, editor, codeNodeKey) => {
     return undefined;
   }
 
-  const info = LANGUAGES.find(({ id: langId, aliases }) => langId === id || aliases?.includes(id));
+  const info = findLanguage(id);
 
   if (!info) {
     return undefined;
   }
 
-  return loadOnce(
-    `lang/${info.id}`,
-    async () => {
-      const payload = await resolvePayload('lang', info.id, () =>
-        getCodeHighlighterLoaders().loadLanguage(info.id),
-      );
-
-      if (payload) {
-        await highlighter.loadLanguage(payload);
-      }
-    },
-    editor,
-    codeNodeKey,
-  );
+  return loadAsset('lang', info.id, editor, codeNodeKey);
 };
 
 /**
@@ -319,20 +339,7 @@ export const loadCodeTheme = (theme, editor, codeNodeKey) => {
     return undefined;
   }
 
-  return loadOnce(
-    `theme/${theme}`,
-    async () => {
-      const payload = await resolvePayload('theme', theme, () =>
-        getCodeHighlighterLoaders().loadTheme(theme),
-      );
-
-      if (payload) {
-        await highlighter.loadTheme(payload);
-      }
-    },
-    editor,
-    codeNodeKey,
-  );
+  return loadAsset('theme', theme, editor, codeNodeKey);
 };
 
 /**
@@ -419,6 +426,24 @@ export const getHighlightNodes = (codeNode, language) => {
   return mapTokensToLexicalStructure(tokens, !!diffedLanguage);
 };
 
+/**
+ * Get the theme to highlight a snippet of code with, if it can be highlighted synchronously: the
+ * engine, the grammar of the given language and the theme are all loaded.
+ * @param {string} id Canonical language identifier.
+ * @param {string} [theme] Shiki theme ID. Defaults to the one matching the app’s appearance.
+ * @returns {string | undefined} Theme ID, or `undefined` when the code cannot be highlighted yet.
+ */
+const getHighlightTheme = (id, theme) => {
+  if (!highlighter || isPlainLanguage(id) || !isCodeLanguageLoaded(id)) {
+    return undefined;
+  }
+
+  // Resolved only once the cheap checks pass, so bailing out early costs nothing
+  const resolvedTheme = theme ?? getCodeTheme();
+
+  return isCodeThemeLoaded(resolvedTheme) ? resolvedTheme : undefined;
+};
+
 /**
  * Highlight a snippet of code as an HTML string.
  *
@@ -436,16 +461,11 @@ export const getHighlightNodes = (codeNode, language) => {
  * yet.
  */
 export const highlightCodeToHTML = (code, language, { theme } = {}) => {
+  // Unlike tokens, the HTML is highlighted with the language a `diff-*` language wraps
   const id = normalizeCodeLanguage(getDiffedLanguage(language) ?? language);
+  const resolvedTheme = getHighlightTheme(id, theme);
 
-  if (!highlighter || isPlainLanguage(id) || !isCodeLanguageLoaded(id)) {
-    return undefined;
-  }
-
-  // Resolved only once the cheap checks pass, so bailing out early costs nothing
-  const resolvedTheme = theme ?? getCodeTheme();
-
-  if (!isCodeThemeLoaded(resolvedTheme)) {
+  if (resolvedTheme === undefined) {
     return undefined;
   }
 
@@ -471,14 +491,9 @@ export const highlightCodeToHTML = (code, language, { theme } = {}) => {
  */
 export const highlightCodeToTokens = (code, language, { theme } = {}) => {
   const id = normalizeCodeLanguage(language);
+  const resolvedTheme = getHighlightTheme(id, theme);
 
-  if (!highlighter || isPlainLanguage(id) || !isCodeLanguageLoaded(id)) {
-    return undefined;
-  }
-
-  const resolvedTheme = theme ?? getCodeTheme();
-
-  if (!isCodeThemeLoaded(resolvedTheme)) {
+  if (resolvedTheme === undefined) {
     return undefined;
   }
 

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

@@ -3,7 +3,7 @@
  * version bundled into `dist/shiki-engine.js`, because grammar and theme payloads are only
  * guaranteed to be compatible with the matching engine.
  */
-export const SHIKI_VERSION: "4.4.3";
+export const SHIKI_VERSION: "4.5.0";
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

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

@@ -5,7 +5,7 @@
  * version bundled into `dist/shiki-engine.js`, because grammar and theme payloads are only
  * guaranteed to be compatible with the matching engine.
  */
-export const SHIKI_VERSION = "4.4.3";
+export const SHIKI_VERSION = "4.5.0";
 
 /**
  * Available syntax highlighting languages, sorted by display name.

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

@@ -1,3 +1,8 @@
+/**
+ * @import { CodeNode as CodeNodeType } from '@lexical/code-core';
+ * @import { LexicalEditor, LexicalNode, NodeKey } from 'lexical';
+ * @import { CodeTokenizer, CodeTransformState } from '../../../typedefs.js';
+ */
 /**
  * Default tokenizer backed by Shiki.
  *
@@ -7,5 +12,5 @@
  */
 export const shikiTokenizer: CodeTokenizer;
 export function registerCodeHighlighting(editor: LexicalEditor, tokenizer?: CodeTokenizer): () => void;
-import type { CodeTokenizer } from '../../../typedefs';
+import type { CodeTokenizer } from '../../../typedefs.js';
 import type { LexicalEditor } from 'lexical';

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

@@ -44,15 +44,14 @@ import {
   loadCodeTheme,
   loadEngine,
 } from './facade.js';
+import { CODE_THEME_LIGHT } from './theme.js';
 
 /**
  * @import { CodeNode as CodeNodeType } from '@lexical/code-core';
  * @import { LexicalEditor, LexicalNode, NodeKey } from 'lexical';
- * @import { CodeTokenizer, CodeTransformState } from '../../../typedefs';
+ * @import { CodeTokenizer, CodeTransformState } from '../../../typedefs.js';
  */
 
-const DEFAULT_CODE_THEME = 'github-light';
-
 /**
  * Default tokenizer backed by Shiki.
  *
@@ -62,7 +61,7 @@ const DEFAULT_CODE_THEME = 'github-light';
  */
 export const shikiTokenizer = {
   defaultLanguage: DEFAULT_CODE_LANGUAGE,
-  defaultTheme: DEFAULT_CODE_THEME,
+  defaultTheme: CODE_THEME_LIGHT,
   /**
    * Convert a code node’s content into Lexical nodes.
    * @param {CodeNodeType} codeNode Code node to tokenize.

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

@@ -3,4 +3,4 @@ export function getLanguageURL(id: string): string;
 export function getThemeURL(id: string): string;
 export function setCodeHighlighterLoaders(overrides: Partial<CodeHighlighterLoaders>): void;
 export function getCodeHighlighterLoaders(): CodeHighlighterLoaders;
-import type { CodeHighlighterLoaders } from '../../../typedefs';
+import type { CodeHighlighterLoaders } from '../../../typedefs.js';

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

@@ -2,7 +2,7 @@ import { SHIKI_VERSION } from './generated.js';
 import { UI_VERSION } from './version.js';
 
 /**
- * @import { CodeHighlighterLoaders } from '../../../typedefs';
+ * @import { CodeHighlighterLoaders } from '../../../typedefs.js';
  */
 
 const SHIKI_CDN_BASE_URL = 'https://unpkg.com/@shikijs';

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.3";
+export const UI_VERSION: "0.79.0";

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.3';
+export const UI_VERSION = '0.79.0';

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

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

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

@@ -4,7 +4,7 @@ import { convertMarkdownToLexical } from './core.js';
 /**
  * @import { LexicalEditor } from 'lexical';
  * @import { Transformer } from '@lexical/markdown';
- * @import { TextEditorConfig, TextEditorSelectionState, TextEditorStore } from '../../typedefs';
+ * @import { TextEditorConfig, TextEditorSelectionState, TextEditorStore } from '../../typedefs.js';
  */
 
 /**
@@ -86,7 +86,10 @@ export const createEditorStore = () => {
         enabledTransformers,
       );
 
-      lastImport = { source: originalValue, exported };
+      // Skip an import superseded by a newer one, which sets its own value
+      if (exported !== undefined) {
+        lastImport = { source: originalValue, exported };
+      }
     } catch (ex) {
       // Go through the setter, so the editor actually falls back to the plain text mode
       setConverterError(true);

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

@@ -20,8 +20,8 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { TextEditorComponent, TextEditorMode, TextEditorNodeType } from '../../typedefs';
-   * @import { HighlightedToken } from '../../typedefs';
+   * @import { TextEditorComponent, TextEditorMode, TextEditorNodeType } from '../../typedefs.js';
+   * @import { HighlightedToken } from '../../typedefs.js';
    */
 
   /**

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

@@ -186,7 +186,7 @@ type Props = {
      */
     children?: Snippet<[]> | undefined;
 };
-import type { TextEditorMode } from '../../typedefs';
-import type { TextEditorNodeType } from '../../typedefs';
-import type { TextEditorComponent } from '../../typedefs';
+import type { TextEditorMode } from '../../typedefs.js';
+import type { TextEditorNodeType } from '../../typedefs.js';
+import type { TextEditorComponent } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/text-editor/toolbar/code-language-switcher.svelte

@@ -9,7 +9,8 @@
   import { LANGUAGES } from '../shiki/generated.js';
 
   /**
-   * @import { TextEditorStore } from '../../../typedefs';
+   * @import { CodeNode } from '@lexical/code-core';
+   * @import { TextEditorStore } from '../../../typedefs.js';
    */
 
   /**
@@ -46,15 +47,31 @@
     )?.key ?? 'plain',
   );
 
+  /**
+   * Get the code block the switcher targets. A code editor has exactly one code block, and its
+   * `blockNodeKey` is still unset the first time the switcher is used, before the editor has ever
+   * been focused. Call this within `editor.read()` or `editor.update()`.
+   * @returns {CodeNode | null} Code node, or `null` if the selection is not in a code block.
+   */
+  const getCodeNode = () => {
+    const { blockNodeKey } = editorStore.selection;
+
+    const node = editorStore.config.isCodeEditor
+      ? getRoot().getChildren()[0]
+      : blockNodeKey
+        ? getNodeByKey(blockNodeKey)
+        : null;
+
+    return isCodeNode(node) ? node : null;
+  };
+
   $effect(() => {
     void editorStore.selection.blockNodeKey;
 
     editorStore.editor?.read(() => {
-      const node = editorStore.config.isCodeEditor
-        ? getRoot().getChildren()[0]
-        : getNodeByKey(/** @type {string} */ (editorStore.selection.blockNodeKey));
+      const node = getCodeNode();
 
-      if (isCodeNode(node)) {
+      if (node) {
         // The highlighter gives a block without a language the default one as it’s transformed,
         // so the fallbacks here are only for the unexpected
         /* v8 ignore next */
@@ -77,19 +94,10 @@
     await loadCodeHighlighter(lang);
 
     editorStore.editor.update(() => {
-      // Resolve the target the same way the effect above does. A code editor has exactly one code
-      // block, and its `blockNodeKey` is still unset the first time the switcher is used, before
-      // the editor has ever been focused.
       // https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L713
-      const { blockNodeKey } = editorStore.selection;
-
-      const node = editorStore.config.isCodeEditor
-        ? getRoot().getChildren()[0]
-        : blockNodeKey
-          ? getNodeByKey(blockNodeKey)
-          : null;
+      const node = getCodeNode();
 
-      if (isCodeNode(node)) {
+      if (node) {
         node.setLanguage(lang);
         selectedLanguage = lang;
       }

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

@@ -1,21 +1,15 @@
 <script>
   import { _ } from '@sveltia/i18n';
-  import { isMac, matchesShortcuts } from '@sveltia/utils/events';
   import { FORMAT_TEXT_COMMAND } from 'lexical';
   import { getContext } from 'svelte';
   import Button from '../../button/button.svelte';
   import Icon from '../../icon/icon.svelte';
   import { AVAILABLE_BUTTONS } from '../constants.js';
   import { focusEditor } from '../core.js';
-  import {
-    applyRawTextEdit,
-    getRawTextState,
-    isRawTextEditable,
-    toggleInlineFormat,
-  } from '../raw-markdown.js';
+  import { editRawText, registerRawTextShortcut, toggleInlineFormat } from '../raw-markdown.js';
 
   /**
-   * @import { TextEditorFormatType, TextEditorStore } from '../../../typedefs';
+   * @import { TextEditorFormatType, TextEditorStore } from '../../../typedefs.js';
    */
 
   /**
@@ -50,10 +44,7 @@
 
     if (!useRichText) {
       // The button is only enabled while the `<textarea>` is there
-      /* v8 ignore else */
-      if (textArea) {
-        applyRawTextEdit(textArea, toggleInlineFormat(getRawTextState(textArea), type));
-      }
+      editRawText(textArea, (state) => toggleInlineFormat(state, type));
 
       return;
     }
@@ -74,25 +65,10 @@
       return undefined;
     }
 
-    /**
-     * Handle the keyboard shortcut in the plain text mode.
-     * @param {KeyboardEvent} event `keydown` event.
-     */
-    const onKeyDown = (event) => {
-      if (
-        isRawTextEditable(textArea) &&
-        matchesShortcuts(event, isMac() ? `Meta+${key}` : `Ctrl+${key}`)
-      ) {
-        event.preventDefault();
-        format();
-      }
-    };
-
-    textArea.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      textArea.removeEventListener('keydown', onKeyDown);
-    };
+    // Handle the keyboard shortcut in the plain text mode
+    return registerRawTextShortcut(textArea, key, () => {
+      format();
+    });
   });
 </script>
 

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

@@ -15,4 +15,4 @@ type Props = {
      */
     type: TextEditorFormatType;
 };
-import type { TextEditorFormatType } from '../../../typedefs';
+import type { TextEditorFormatType } from '../../../typedefs.js';

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

@@ -0,0 +1,3 @@
+export function insertEditorComponent(editorStore: TextEditorStore, component: TextEditorComponent): void;
+import type { TextEditorStore } from '../../../typedefs.js';
+import type { TextEditorComponent } from '../../../typedefs.js';