@sveltia/ui 0.62.1 → 0.63.0

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

@@ -1,16 +1,12 @@
 <script>
-  // Work around the “Prism is not defined” error in consumers
-  // @see https://github.com/remix-run/remix/discussions/8182
-  import 'prismjs';
-
-  import { $isCodeNode as isCodeNode } from '@lexical/code';
+  import { $isCodeNode as isCodeNode } from '@lexical/code-core';
   import { _ } from '@sveltia/i18n';
   import { $getNodeByKey as getNodeByKey, $getRoot as getRoot } from 'lexical';
-  import prismComponents from 'prismjs/components';
   import { getContext } from 'svelte';
   import Option from '../../listbox/option.svelte';
   import Select from '../../select/select.svelte';
   import { focusEditor, loadCodeHighlighter } from '../core.js';
+  import { LANGUAGES } from '../shiki/generated.js';
 
   /**
    * @import { TextEditorStore } from '../../../typedefs';
@@ -29,23 +25,11 @@
   } = $props();
 
   /** @type {{ key: string, label: string, aliases: string[] }[]} */
-  const codeLanguages = Object.entries(prismComponents.languages)
-    .filter(([, config]) => 'title' in config)
-    .map(([key, val]) => {
-      const { title: label, aliasTitles, alias } = /** @type {Record<string, any>} */ (val);
-      let aliases = [];
-
-      if (alias && !aliasTitles) {
-        aliases = Array.isArray(alias) ? alias : [alias];
-      }
-
-      return [
-        { key, label, aliases },
-        ...Object.entries(aliasTitles ?? {}).map(([k, v]) => ({ key: k, label: v, aliases: [] })),
-      ];
-    })
-    .flat(1)
-    .sort((a, b) => a.label.localeCompare(b.label));
+  const codeLanguages = LANGUAGES.map(({ id, name, aliases = [] }) => ({
+    key: id,
+    label: name,
+    aliases,
+  }));
 
   /** @type {TextEditorStore} */
   const editorStore = getContext('editorStore');
@@ -77,20 +61,26 @@
     }
 
     await focusEditor(editorStore.editor);
+    await loadCodeHighlighter(lang);
 
-    if (editorStore.selection?.blockNodeKey) {
-      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;
 
-      editorStore.editor.update(() => {
-        // https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx#L713
-        const node = getNodeByKey(/** @type {string} */ (editorStore.selection.blockNodeKey));
+      const node = editorStore.config.isCodeEditor
+        ? getRoot().getChildren()[0]
+        : blockNodeKey
+          ? getNodeByKey(blockNodeKey)
+          : null;
 
-        if (isCodeNode(node)) {
-          node.setLanguage(lang);
-          selectedLanguage = lang;
-        }
-      });
-    }
+      if (isCodeNode(node)) {
+        node.setLanguage(lang);
+        selectedLanguage = lang;
+      }
+    });
   }}
 >
   <Option label={_('_sui.text_editor.plain_text')} value="plain" dir="ltr" />

package/dist/components/text-editor/toolbar/toggle-block-menu-item.svelte

@@ -1,9 +1,5 @@
 <script>
-  // Work around the “Prism is not defined” error in consumers
-  // @see https://github.com/remix-run/remix/discussions/8182
-  import 'prismjs';
-
-  import { $createCodeNode as createCodeNode } from '@lexical/code';
+  import { $createCodeNode as createCodeNode } from '@lexical/code-core';
   import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
   import {
     $createHeadingNode as createHeadingNode,

package/dist/index.d.ts

@@ -81,5 +81,9 @@ export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
 export { default as Placeholder } from "./components/util/placeholder.svelte";
 export { default as VisibilityObserver } from "./components/util/visibility-observer.svelte";
+export { loadCodeHighlighter } from "./components/text-editor/core.js";
+export { setCodeHighlighterCacheEnabled } from "./components/text-editor/shiki/cache.js";
+export { highlightCodeToHTML } from "./components/text-editor/shiki/facade.js";
+export { setCodeHighlighterLoaders } from "./components/text-editor/shiki/loader.js";
 export * from "./typedefs.js";
 export { initLocales, strings } from "./services/i18n.js";

package/dist/index.js

@@ -81,6 +81,10 @@ export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
 export { default as Placeholder } from './components/util/placeholder.svelte';
 export { default as VisibilityObserver } from './components/util/visibility-observer.svelte';
+export { loadCodeHighlighter } from './components/text-editor/core.js';
+export { setCodeHighlighterCacheEnabled } from './components/text-editor/shiki/cache.js';
+export { highlightCodeToHTML } from './components/text-editor/shiki/facade.js';
+export { setCodeHighlighterLoaders } from './components/text-editor/shiki/loader.js';
 export { initLocales, strings } from './services/i18n.js';
 
 // eslint-disable-next-line import/export