@sveltia/ui 0.40.6 → 0.41.0

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

@@ -56,7 +56,12 @@
   const backticks = '```';
   const editorStore = createEditorStore();
 
-  editorStore.config = { ...editorStore.config, isCodeEditor: true, defaultLanguage: lang };
+  editorStore.config = {
+    ...editorStore.config,
+    useMarkdownShortcuts: false,
+    isCodeEditor: true,
+    defaultLanguage: lang,
+  };
 
   setContext('editorStore', editorStore);
 

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

@@ -1,9 +1,12 @@
-export function initEditor({ components, isCodeEditor, defaultLanguage, }: TextEditorConfig): {
+export function getSelectionTypes(): TextEditorSelectionState;
+export function onEditorUpdate(editor: LexicalEditor): void;
+export function initEditor({ components, useMarkdownShortcuts, 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>;
-import type { TextEditorConfig } from '../../typedefs';
+import type { TextEditorSelectionState } from '../../typedefs';
 import type { LexicalEditor } from 'lexical';
+import type { TextEditorConfig } from '../../typedefs';

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

@@ -32,6 +32,7 @@ import {
 import {
   $convertFromMarkdownString as convertFromMarkdownString,
   $convertToMarkdownString as convertToMarkdownString,
+  registerMarkdownShortcuts,
   TRANSFORMERS,
 } from '@lexical/markdown';
 import {
@@ -146,9 +147,10 @@ const editorConfig = {
 
 /**
  * Get the current selection’s block node key as well as block and inline level types.
+ * @internal
  * @returns {TextEditorSelectionState} Current selection state.
  */
-const getSelectionTypes = () => {
+export const getSelectionTypes = () => {
   const selection = getSelection();
 
   if (!isRangeSelection(selection)) {
@@ -219,9 +221,10 @@ const getSelectionTypes = () => {
 
 /**
  * Listen to changes made on the editor and trigger the Update event.
+ * @internal
  * @param {LexicalEditor} editor Editor instance.
  */
-const onEditorUpdate = (editor) => {
+export const onEditorUpdate = (editor) => {
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
@@ -250,6 +253,7 @@ const onEditorUpdate = (editor) => {
  */
 export const initEditor = ({
   components = [],
+  useMarkdownShortcuts,
   isCodeEditor = false,
   defaultLanguage = 'plain',
 }) => {
@@ -267,6 +271,7 @@ export const initEditor = ({
    * @param {(() => void) | undefined | null} unregister Cleanup handler.
    */
   const addUnregister = (unregister) => {
+    /* v8 ignore next */
     if (typeof unregister === 'function') {
       unregisters.push(unregister);
     }
@@ -276,6 +281,10 @@ export const initEditor = ({
   addUnregister(registerDragonSupport(editor));
   addUnregister(registerHistory(editor, createEmptyHistoryState(), 1000));
 
+  if (useMarkdownShortcuts) {
+    addUnregister(registerMarkdownShortcuts(editor, allTransformers));
+  }
+
   addUnregister(
     registerCodeHighlighting(editor, {
       defaultLanguage,
@@ -342,10 +351,12 @@ export const initEditor = ({
 
         editor.update(() => {
           // Prevent CodeNode from being removed
+          /* v8 ignore next */
           if (isCodeEditor) {
             const root = getRoot();
             const children = root.getChildren();
 
+            // c8 ignore next 3
             if (children.length === 1 && !isCodeNode(children[0])) {
               children[0].remove();
             }
@@ -434,7 +445,8 @@ export const loadCodeHighlighter = async (lang) => {
   const canonicalLang = Object.entries(prismComponents.languages).find(
     // @ts-ignore
     ([key, { alias }]) =>
-      key === lang || (Array.isArray(alias) ? alias.includes(lang) : alias === lang),
+      key === lang ||
+      (Array.isArray(alias) ? alias.includes(lang) : /* v8 ignore next */ alias === lang),
   )?.[0];
 
   if (!canonicalLang) {

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

@@ -17,8 +17,16 @@ export const createEditorStore = () => {
   let initialized = $state(false);
   /** @type {LexicalEditor | undefined} */
   let editor = $state();
+
   /** @type {TextEditorConfig} */
-  let config = $state({ modes: [], enabledButtons: [], components: [], isCodeEditor: false });
+  let config = $state({
+    modes: [],
+    enabledButtons: [],
+    components: [],
+    useMarkdownShortcuts: true,
+    isCodeEditor: false,
+  });
+
   /** @type {string} */
   let inputValue = $state('');
   /** @type {TextEditorSelectionState} */

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

@@ -31,6 +31,8 @@
    * @property {TextEditorMode[]} [modes] Enabled modes.
    * @property {(TextEditorBlockType | TextEditorInlineType)[]} [buttons] Enabled buttons.
    * @property {TextEditorComponent[]} [components] Editor components.
+   * @property {boolean} [useMarkdownShortcuts] Whether to enable Markdown keyboard shortcuts in the
+   * rich text editor.
    * @property {string} [class] The `class` attribute on the wrapper element.
    * @property {boolean} [hidden] Whether to hide the widget.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
@@ -55,6 +57,7 @@
     modes = ['rich-text', 'plain-text'],
     buttons = [...INLINE_BUTTON_TYPES, ...BLOCK_BUTTON_TYPES],
     components = [],
+    useMarkdownShortcuts = true,
     hidden = false,
     disabled = false,
     readonly = false,
@@ -68,7 +71,13 @@
   const editorStore = createEditorStore();
 
   // svelte-ignore state_referenced_locally
-  editorStore.config = { ...editorStore.config, modes, enabledButtons: buttons, components };
+  editorStore.config = {
+    ...editorStore.config,
+    modes,
+    enabledButtons: buttons,
+    components,
+    useMarkdownShortcuts,
+  };
 
   setContext('editorStore', editorStore);
 

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

@@ -29,6 +29,11 @@ declare const TextEditor: import("svelte").Component<{
      * Editor components.
      */
     components?: TextEditorComponent[] | undefined;
+    /**
+     * Whether to enable Markdown keyboard shortcuts in the
+     * rich text editor.
+     */
+    useMarkdownShortcuts?: boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -87,6 +92,11 @@ type Props = {
      * Editor components.
      */
     components?: TextEditorComponent[] | undefined;
+    /**
+     * Whether to enable Markdown keyboard shortcuts in the
+     * rich text editor.
+     */
+    useMarkdownShortcuts?: boolean | undefined;
     /**
      * The `class` attribute on the wrapper element.
      */

package/dist/components/text-editor/transformers/table.d.ts

@@ -1,5 +1,10 @@
+export function getTableColumnsSize(table: TableNode): number;
+export function createTableCell(textContent: string): TableCellNode;
+export function mapToTableCells(textContent: string): TableCellNode[] | null;
 /**
  * @type {ElementTransformer}
  */
 export const TABLE: ElementTransformer;
+import { TableNode } from '@lexical/table';
+import { TableCellNode } from '@lexical/table';
 import type { ElementTransformer } from '@lexical/markdown';

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

@@ -32,21 +32,23 @@ const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
 
 /**
  * Returns the number of columns in the table.
+ * @internal
  * @param {TableNode} table
  * @returns {number}
  */
-function getTableColumnsSize(table) {
+export const getTableColumnsSize = (table) => {
   const row = table.getFirstChild();
 
   return isTableRowNode(row) ? row.getChildrenSize() : 0;
-}
+};
 
 /**
  * Creates a table cell with the given text content.
+ * @internal
  * @param {string} textContent
  * @returns {TableCellNode}
  */
-const createTableCell = (textContent) => {
+export const createTableCell = (textContent) => {
   textContent = textContent.replace(/\\n/g, '\n');
 
   const cell = createTableCellNode(TableCellHeaderStates.NO_STATUS);
@@ -58,10 +60,11 @@ const createTableCell = (textContent) => {
 
 /**
  * Maps the given text content to an array of table cells.
+ * @internal
  * @param {string} textContent
  * @returns {TableCellNode[] | null}
  */
-const mapToTableCells = (textContent) => {
+export const mapToTableCells = (textContent) => {
   const [, match] = textContent.match(TABLE_ROW_REG_EXP) ?? [];
 
   if (!match) {

package/dist/services/group.svelte.js

@@ -556,6 +556,7 @@ export const activateGroup = (paramsOrGetter) => (parent) => {
   const initialParams = isGetter ? paramsOrGetter() : paramsOrGetter;
   const group = new Group(/** @type {HTMLElement} */ (parent), initialParams);
 
+  /* v8 ignore next 4 */
   if (isGetter) {
     $effect(() => {
       group.onUpdate(paramsOrGetter());

package/dist/typedefs.d.ts

@@ -706,6 +706,11 @@ export type TextEditorConfig = {
      * Editor components.
      */
     components: TextEditorComponent[];
+    /**
+     * Whether to enable Markdown keyboard shortcuts in the
+     * rich text editor.
+     */
+    useMarkdownShortcuts: boolean;
     /**
      * Whether the editor is used as a code editor.
      */

package/dist/typedefs.js

@@ -291,6 +291,8 @@
  * @property {(TextEditorBlockType | TextEditorInlineType)[]} enabledButtons Enabled buttons for the
  * editor.
  * @property {TextEditorComponent[]} components Editor components.
+ * @property {boolean} useMarkdownShortcuts Whether to enable Markdown keyboard shortcuts in the
+ * rich text editor.
  * @property {boolean} isCodeEditor Whether the editor is used as a code editor.
  * @property {string} [defaultLanguage] Default language for the code editor.
  */

package/package.json

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