@sveltia/ui 0.40.3 → 0.40.4

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

@@ -1,4 +1,7 @@
-export function initEditor({ components, isCodeEditor, defaultLanguage, }: TextEditorConfig): LexicalEditor;
+export function initEditor({ components, isCodeEditor, defaultLanguage, }: TextEditorConfig): {
+    editor: LexicalEditor;
+    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>;

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

@@ -3,52 +3,57 @@
 import 'prismjs';
 
 import {
-  $createCodeNode,
-  $isCodeHighlightNode,
-  $isCodeNode,
   CodeHighlightNode,
   CodeNode,
+  $createCodeNode as createCodeNode,
+  $isCodeHighlightNode as isCodeHighlightNode,
+  $isCodeNode as isCodeNode,
 } from '@lexical/code';
 import { PrismTokenizer, registerCodeHighlighting } from '@lexical/code-prism';
 import { registerDragonSupport } from '@lexical/dragon';
 import { HorizontalRuleNode } from '@lexical/extension';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
-import { $isLinkNode, $toggleLink, LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import {
-  $handleListInsertParagraph,
-  $insertList,
-  $isListItemNode,
-  $isListNode,
+  $isLinkNode as isLinkNode,
+  LinkNode,
+  TOGGLE_LINK_COMMAND,
+  $toggleLink as toggleLink,
+} from '@lexical/link';
+import {
+  $handleListInsertParagraph as handleListInsertParagraph,
   INSERT_ORDERED_LIST_COMMAND,
   INSERT_UNORDERED_LIST_COMMAND,
+  $insertList as insertList,
+  $isListItemNode as isListItemNode,
+  $isListNode as isListNode,
   ListItemNode,
   ListNode,
 } from '@lexical/list';
 import {
-  $convertFromMarkdownString,
-  $convertToMarkdownString,
+  $convertFromMarkdownString as convertFromMarkdownString,
+  $convertToMarkdownString as convertToMarkdownString,
   TRANSFORMERS,
 } from '@lexical/markdown';
 import {
-  $isHeadingNode,
-  $isQuoteNode,
   HeadingNode,
+  $isHeadingNode as isHeadingNode,
+  $isQuoteNode as isQuoteNode,
   QuoteNode,
   registerRichText,
 } from '@lexical/rich-text';
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
-import { $getNearestNodeOfType } from '@lexical/utils';
+import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
 import { sleep } from '@sveltia/utils/misc';
 import {
-  $getRoot,
-  $getSelection,
-  $isRangeSelection,
   COMMAND_PRIORITY_NORMAL,
+  createEditor,
   ElementNode,
+  $getRoot as getRoot,
+  $getSelection as getSelection,
   INDENT_CONTENT_COMMAND,
   INSERT_PARAGRAPH_COMMAND,
+  $isRangeSelection as isRangeSelection,
   OUTDENT_CONTENT_COMMAND,
-  createEditor,
 } from 'lexical';
 import prismComponents from 'prismjs/components';
 import { BLOCK_BUTTON_TYPES, TEXT_FORMAT_BUTTON_TYPES } from './constants.js';
@@ -144,9 +149,9 @@ const editorConfig = {
  * @returns {TextEditorSelectionState} Current selection state.
  */
 const getSelectionTypes = () => {
-  const selection = $getSelection();
+  const selection = getSelection();
 
-  if (!$isRangeSelection(selection)) {
+  if (!isRangeSelection(selection)) {
     return {
       blockNodeKey: null,
       blockType: 'paragraph',
@@ -161,15 +166,15 @@ const getSelectionTypes = () => {
   const inlineTypes = TEXT_FORMAT_BUTTON_TYPES.filter((type) => selection.hasFormat(type));
 
   if (anchor.getType() !== 'root') {
-    parent = anchor instanceof ElementNode ? anchor : $getNearestNodeOfType(anchor, ElementNode);
+    parent = anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
 
-    if ($isLinkNode(parent)) {
+    if (isLinkNode(parent)) {
       inlineTypes.push('link');
-      parent = $getNearestNodeOfType(parent, ElementNode);
+      parent = getNearestNodeOfType(parent, ElementNode);
     }
 
-    if ($isListItemNode(parent)) {
-      parent = $getNearestNodeOfType(parent, ListNode);
+    if (isListItemNode(parent)) {
+      parent = getNearestNodeOfType(parent, ListNode);
     }
   }
 
@@ -179,19 +184,19 @@ const getSelectionTypes = () => {
         return 'paragraph';
       }
 
-      if ($isHeadingNode(parent)) {
+      if (isHeadingNode(parent)) {
         return `heading-${parent.getTag().match(/\d/)?.[0]}`;
       }
 
-      if ($isListNode(parent)) {
+      if (isListNode(parent)) {
         return parent.getListType() === 'bullet' ? 'bulleted-list' : 'numbered-list';
       }
 
-      if ($isQuoteNode(parent)) {
+      if (isQuoteNode(parent)) {
         return 'blockquote';
       }
 
-      if ($isCodeNode(parent) || $isCodeHighlightNode(parent)) {
+      if (isCodeNode(parent) || isCodeHighlightNode(parent)) {
         return 'code-block';
       }
 
@@ -220,7 +225,7 @@ const onEditorUpdate = (editor) => {
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
-        value: $convertToMarkdownString(
+        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
@@ -241,7 +246,7 @@ const onEditorUpdate = (editor) => {
 /**
  * Initialize the Lexical editor.
  * @param {TextEditorConfig} config Editor configuration.
- * @returns {LexicalEditor} Editor instance.
+ * @returns {{ editor: LexicalEditor, dispose: () => void }} Editor instance and cleanup.
  */
 export const initEditor = ({
   components = [],
@@ -254,106 +259,138 @@ export const initEditor = ({
   });
 
   const editor = createEditor(editorConfig);
+  /** @type {Array<() => void>} */
+  const unregisters = [];
+
+  /**
+   * Add a cleanup handler if it is defined.
+   * @param {(() => void) | undefined | null} unregister Cleanup handler.
+   */
+  const addUnregister = (unregister) => {
+    if (typeof unregister === 'function') {
+      unregisters.push(unregister);
+    }
+  };
 
-  registerRichText(editor);
-  registerDragonSupport(editor);
-  registerHistory(editor, createEmptyHistoryState(), 1000);
-
-  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(registerRichText(editor));
+  addUnregister(registerDragonSupport(editor));
+  addUnregister(registerHistory(editor, createEmptyHistoryState(), 1000));
+
+  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,
+    }),
+  );
 
-  editor.registerCommand(
-    TOGGLE_LINK_COMMAND,
-    (payload) => {
-      $toggleLink(typeof payload === 'string' ? payload : null);
+  addUnregister(
+    editor.registerCommand(
+      TOGGLE_LINK_COMMAND,
+      (payload) => {
+        toggleLink(typeof payload === 'string' ? payload : null);
 
-      return true;
-    },
-    COMMAND_PRIORITY_NORMAL,
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    ),
   );
 
-  editor.registerCommand(
-    INSERT_UNORDERED_LIST_COMMAND,
-    () => {
-      $insertList('bullet');
+  addUnregister(
+    editor.registerCommand(
+      INSERT_UNORDERED_LIST_COMMAND,
+      () => {
+        insertList('bullet');
 
-      return true;
-    },
-    COMMAND_PRIORITY_NORMAL,
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    ),
   );
 
-  editor.registerCommand(
-    INSERT_ORDERED_LIST_COMMAND,
-    () => {
-      $insertList('number');
+  addUnregister(
+    editor.registerCommand(
+      INSERT_ORDERED_LIST_COMMAND,
+      () => {
+        insertList('number');
 
-      return true;
-    },
-    COMMAND_PRIORITY_NORMAL,
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    ),
   );
 
   // https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/shared/useList.ts
-  editor.registerCommand(
-    INSERT_PARAGRAPH_COMMAND,
-    () => $handleListInsertParagraph(),
-    COMMAND_PRIORITY_NORMAL,
+  addUnregister(
+    editor.registerCommand(
+      INSERT_PARAGRAPH_COMMAND,
+      () => handleListInsertParagraph(),
+      COMMAND_PRIORITY_NORMAL,
+    ),
   );
 
-  editor.registerUpdateListener(() => {
-    if (editor?.isComposing()) {
-      return;
-    }
+  addUnregister(
+    editor.registerUpdateListener(() => {
+      if (editor?.isComposing()) {
+        return;
+      }
 
-    (async () => {
-      await sleep(100);
+      (async () => {
+        await sleep(100);
 
-      editor.update(() => {
-        // Prevent CodeNode from being removed
-        if (isCodeEditor) {
-          const root = $getRoot();
-          const children = root.getChildren();
+        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 === 1 && !isCodeNode(children[0])) {
+              children[0].remove();
+            }
 
-          if (children.length === 0) {
-            const node = $createCodeNode();
+            if (children.length === 0) {
+              const node = createCodeNode();
 
-            node.setLanguage(defaultLanguage);
-            root.append(node);
+              node.setLanguage(defaultLanguage);
+              root.append(node);
+            }
           }
-        }
 
-        onEditorUpdate(editor);
-      });
-    })();
-  });
+          onEditorUpdate(editor);
+        });
+      })();
+    }),
+  );
 
   // `editor.registerCommand(KEY_TAB_COMMAND, listener, priority)` doesn’t work for some reason, so
   // use another method
-  editor.registerRootListener((root) => {
-    if (root) {
-      root.addEventListener('keydown', (event) => {
+  addUnregister(
+    editor.registerRootListener((root) => {
+      if (!root) {
+        return undefined;
+      }
+
+      /**
+       * Handle Tab indentation shortcuts.
+       * @param {KeyboardEvent} event Keydown event.
+       */
+      const onKeydown = (event) => {
         editor.update(() => {
           if (event.key === 'Tab') {
-            const selection = $getSelection();
+            const selection = getSelection();
 
-            if (!$isRangeSelection(selection)) {
+            if (!isRangeSelection(selection)) {
               return;
             }
 
             const anchor = selection.anchor.getNode();
 
             const parent =
-              anchor instanceof ElementNode ? anchor : $getNearestNodeOfType(anchor, ElementNode);
+              anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
 
-            if ($isListItemNode(parent) && parent.canIndent()) {
+            if (isListItemNode(parent) && parent.canIndent()) {
               if (!event.shiftKey) {
                 event.preventDefault();
                 editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
@@ -364,11 +401,25 @@ export const initEditor = ({
             }
           }
         });
-      });
-    }
-  });
+      };
+
+      root.addEventListener('keydown', onKeydown);
+
+      return () => {
+        root.removeEventListener('keydown', onKeydown);
+      };
+    }),
+  );
 
-  return editor;
+  return {
+    editor,
+    /**
+     * Remove all registered Lexical listeners.
+     */
+    dispose: () => {
+      unregisters.forEach((unregister) => unregister());
+    },
+  };
 };
 
 /**
@@ -422,7 +473,7 @@ export const convertMarkdownToLexical = async (editor, value) => {
   return new Promise((resolve, reject) => {
     editor.update(() => {
       try {
-        $convertFromMarkdownString(value, allTransformers);
+        convertFromMarkdownString(value, allTransformers);
         resolve(undefined);
       } catch (ex) {
         reject(new Error('Failed to convert Markdown', { cause: ex }));

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

@@ -88,7 +88,9 @@
   };
 
   onMount(() => {
-    editorStore.editor = initEditor(editorStore.config);
+    const { editor, dispose } = initEditor(editorStore.config);
+
+    editorStore.editor = editor;
 
     lexicalRoot?.addEventListener('Update', onUpdate);
     lexicalRoot?.addEventListener('click', onClick);
@@ -96,6 +98,10 @@
     return () => {
       lexicalRoot?.removeEventListener('Update', onUpdate);
       lexicalRoot?.removeEventListener('click', onClick);
+      dispose();
+      editor.setRootElement(null);
+      editorStore.initialized = false;
+      editorStore.editor = undefined;
     };
   });
 

package/dist/components/text-editor/transformers/hr.js

@@ -3,9 +3,9 @@
 /* eslint-disable jsdoc/require-jsdoc */
 
 import {
-  $createHorizontalRuleNode,
-  $isHorizontalRuleNode,
+  $createHorizontalRuleNode as createHorizontalRuleNode,
   HorizontalRuleNode,
+  $isHorizontalRuleNode as isHorizontalRuleNode,
 } from '@lexical/extension';
 
 /**
@@ -17,10 +17,10 @@ import {
  */
 export const HR = {
   dependencies: [HorizontalRuleNode],
-  export: (node) => ($isHorizontalRuleNode(node) ? '***' : null),
+  export: (node) => (isHorizontalRuleNode(node) ? '***' : null),
   regExp: /^(---|\*\*\*|___)\s?$/,
   replace: (parentNode, _1, _2, isImport) => {
-    const line = $createHorizontalRuleNode();
+    const line = createHorizontalRuleNode();
 
     if (isImport || parentNode.getNextSibling() !== null) {
       parentNode.replace(line);

package/dist/components/text-editor/transformers/table.js

@@ -5,23 +5,23 @@
 /* eslint-disable jsdoc/require-param-description */
 
 import {
-  $convertFromMarkdownString,
-  $convertToMarkdownString,
+  $convertFromMarkdownString as convertFromMarkdownString,
+  $convertToMarkdownString as convertToMarkdownString,
   TRANSFORMERS,
 } from '@lexical/markdown';
 import {
-  $createTableCellNode,
-  $createTableNode,
-  $createTableRowNode,
-  $isTableCellNode,
-  $isTableNode,
-  $isTableRowNode,
+  $createTableCellNode as createTableCellNode,
+  $createTableNode as createTableNode,
+  $createTableRowNode as createTableRowNode,
+  $isTableCellNode as isTableCellNode,
+  $isTableNode as isTableNode,
+  $isTableRowNode as isTableRowNode,
   TableCellHeaderStates,
   TableCellNode,
   TableNode,
   TableRowNode,
 } from '@lexical/table';
-import { $isParagraphNode, $isTextNode } from 'lexical';
+import { $isParagraphNode as isParagraphNode, $isTextNode as isTextNode } from 'lexical';
 
 /**
  * @import { ElementTransformer } from '@lexical/markdown';
@@ -38,7 +38,7 @@ const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
 function getTableColumnsSize(table) {
   const row = table.getFirstChild();
 
-  return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+  return isTableRowNode(row) ? row.getChildrenSize() : 0;
 }
 
 /**
@@ -49,9 +49,9 @@ function getTableColumnsSize(table) {
 const createTableCell = (textContent) => {
   textContent = textContent.replace(/\\n/g, '\n');
 
-  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+  const cell = createTableCellNode(TableCellHeaderStates.NO_STATUS);
 
-  $convertFromMarkdownString(textContent, TRANSFORMERS, cell);
+  convertFromMarkdownString(textContent, TRANSFORMERS, cell);
 
   return cell;
 };
@@ -77,7 +77,7 @@ const mapToTableCells = (textContent) => {
 export const TABLE = {
   dependencies: [TableNode, TableRowNode, TableCellNode],
   export: (node) => {
-    if (!$isTableNode(node)) {
+    if (!isTableNode(node)) {
       return null;
     }
 
@@ -88,7 +88,7 @@ export const TABLE = {
       /** @type {string[]} */
       const rowOutput = [];
 
-      if (!$isTableRowNode(row)) {
+      if (!isTableRowNode(row)) {
         return;
       }
 
@@ -96,8 +96,8 @@ export const TABLE = {
 
       row.getChildren().forEach((cell) => {
         // It’s TableCellNode so it’s just to make flow happy
-        if ($isTableCellNode(cell)) {
-          rowOutput.push($convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
+        if (isTableCellNode(cell)) {
+          rowOutput.push(convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
 
           if (cell.__headerState === TableCellHeaderStates.ROW) {
             isHeaderRow = true;
@@ -120,20 +120,20 @@ export const TABLE = {
     if (TABLE_ROW_DIVIDER_REG_EXP.test(textContent)) {
       const table = parentNode.getPreviousSibling();
 
-      if (!table || !$isTableNode(table)) {
+      if (!table || !isTableNode(table)) {
         return;
       }
 
       const rows = table.getChildren();
       const lastRow = rows[rows.length - 1];
 
-      if (!lastRow || !$isTableRowNode(lastRow)) {
+      if (!lastRow || !isTableRowNode(lastRow)) {
         return;
       }
 
       // Add header state to row cells
       lastRow.getChildren().forEach((cell) => {
-        if (!$isTableCellNode(cell)) {
+        if (!isTableCellNode(cell)) {
           return;
         }
 
@@ -157,7 +157,7 @@ export const TABLE = {
     let maxCells = matchCells.length;
 
     while (sibling) {
-      if (!$isParagraphNode(sibling)) {
+      if (!isParagraphNode(sibling)) {
         break;
       }
 
@@ -167,7 +167,7 @@ export const TABLE = {
 
       const firstChild = sibling.getFirstChild();
 
-      if (!$isTextNode(firstChild)) {
+      if (!isTextNode(firstChild)) {
         break;
       }
 
@@ -186,10 +186,10 @@ export const TABLE = {
       sibling = previousSibling;
     }
 
-    const table = $createTableNode();
+    const table = createTableNode();
 
     rows.forEach((cells) => {
-      const tableRow = $createTableRowNode();
+      const tableRow = createTableRowNode();
 
       table.append(tableRow);
 
@@ -200,7 +200,7 @@ export const TABLE = {
 
     const previousSibling = parentNode.getPreviousSibling();
 
-    if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+    if (isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
       previousSibling.append(...table.getChildren());
       parentNode.remove();
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.40.3",
+  "version": "0.40.4",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -53,35 +53,35 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.61.1",
-    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/kit": "^2.63.0",
+    "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@vitest/coverage-v8": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.8",
     "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.0",
-    "eslint-plugin-package-json": "^1.2.0",
+    "eslint-plugin-jsdoc": "^63.0.1",
+    "eslint-plugin-package-json": "^1.3.0",
     "eslint-plugin-svelte": "^3.19.0",
     "globals": "^17.6.0",
-    "happy-dom": "^20.9.0",
-    "oxlint": "^1.67.0",
+    "happy-dom": "^20.10.1",
+    "oxlint": "^1.68.0",
     "postcss": "^8.5.15",
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^4.0.1",
+    "prettier-plugin-svelte": "^4.1.0",
     "sass": "^1.100.0",
     "stylelint": "^17.12.0",
     "stylelint-config-recommended-scss": "^17.0.1",
-    "stylelint-scss": "^7.1.1",
-    "svelte": "^5.56.0",
-    "svelte-check": "^4.4.8",
+    "stylelint-scss": "^7.2.0",
+    "svelte": "^5.56.1",
+    "svelte-check": "^4.5.0",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"