@sveltia/ui 0.77.2 → 0.78.0

package/dist/components/dialog/dialog.svelte

@@ -79,7 +79,11 @@
       (async () => {
         await sleep(50);
 
-        if (cancelled) {
+        // Leave the focus alone if it has already moved into the content in the meantime, e.g. the
+        // user has clicked an input field or started typing in it, or the content has taken the
+        // focus on its own. Moving it now would pull it away, and selecting the input value would
+        // cause the next keystrokes to replace it.
+        if (cancelled || content?.contains(document.activeElement)) {
           return;
         }
 
@@ -95,10 +99,9 @@
           if (target instanceof HTMLInputElement) {
             target.select();
           }
-        } else if (!focusInput || !content?.contains(document.activeElement)) {
+        } else {
           // Fall back to the `<dialog>` element itself, so the focus is never left outside the
-          // modal, e.g. when the dialog has no input field or primary button. Content that has
-          // already taken the focus is left alone.
+          // modal, e.g. when the dialog has no input field or primary button
           modal?.focus();
         }
       })();

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

@@ -56,6 +56,11 @@ export const TRANSFORMER_MAP: Record<Exclude<TextEditorNodeType, "paragraph">, T
  * used. This is to ensure that the Markdown output is more readable and consistent.
  */
 export const DISABLED_MARKDOWN_TAGS: string[];
+/**
+ * Tag of the Lexical update that imports a value set from outside, so the editor can tell it from a
+ * change made by the user.
+ */
+export const IMPORT_UPDATE_TAG: "sui-import";
 import type { EditorThemeClasses } from 'lexical';
 import type { TextEditorFormatType } from '../../typedefs';
 import type { TextEditorInlineType } from '../../typedefs';

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

@@ -231,3 +231,9 @@ export const TRANSFORMER_MAP = {
  * used. This is to ensure that the Markdown output is more readable and consistent.
  */
 export const DISABLED_MARKDOWN_TAGS = ['*', '__', '***', '___'];
+
+/**
+ * Tag of the Lexical update that imports a value set from outside, so the editor can tell it from a
+ * change made by the user.
+ */
+export const IMPORT_UPDATE_TAG = 'sui-import';

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

@@ -1,9 +1,13 @@
+export function isStaticDecoratorContent(target: EventTarget | null): boolean;
+export function $moveCaretIntoBlock(): boolean;
+export function handleEditorMouseDown(editor: LexicalEditor, event: MouseEvent): boolean;
 export function isSafeLinkURL(url: string): boolean;
 export function getSelectionTypes(): TextEditorSelectionState;
+export function exportMarkdown(enabledTransformers: Transformer[]): string;
 export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Transformer[], cachedValue?: string): string;
 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 convertMarkdownToLexical(editor: LexicalEditor, value: string, enabledTransformers: Transformer[]): Promise<string>;
 export function focusEditor(editor: LexicalEditor): Promise<void>;
 export type InitEditorResult = {
     /**
@@ -19,7 +23,7 @@ export type InitEditorResult = {
      */
     dispose: () => void;
 };
-import type { TextEditorSelectionState } from '../../typedefs';
 import type { LexicalEditor } from 'lexical';
+import type { TextEditorSelectionState } from '../../typedefs';
 import type { Transformer } from '@lexical/markdown';
 import type { TextEditorConfig } from '../../typedefs';

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

@@ -41,23 +41,29 @@ import {
   COMMAND_PRIORITY_LOW,
   COMMAND_PRIORITY_NORMAL,
   createEditor,
+  DELETE_CHARACTER_COMMAND,
+  $createParagraphNode as createParagraphNode,
   $createTextNode as createTextNode,
   ElementNode,
+  $getNearestNodeFromDOMNode as getNearestNodeFromDOMNode,
   $getRoot as getRoot,
   $getSelection as getSelection,
   INDENT_CONTENT_COMMAND,
   INSERT_PARAGRAPH_COMMAND,
   $insertNodes as insertNodes,
+  $isDecoratorNode as isDecoratorNode,
   $isElementNode as isElementNode,
   $isRangeSelection as isRangeSelection,
   $isTextNode as isTextNode,
   OUTDENT_CONTENT_COMMAND,
   PASTE_COMMAND,
+  RootNode,
 } from 'lexical';
 import {
   BLOCK_BUTTON_TYPES,
   DISABLED_MARKDOWN_TAGS,
   EDITOR_THEME,
+  IMPORT_UPDATE_TAG,
   NODE_MAP,
   TEXT_FORMAT_BUTTON_TYPES,
   TRANSFORMER_MAP,
@@ -103,6 +109,218 @@ import { TABLE } from './transformers/table.js';
  * Maximum number of entries in the undo stack.
  */
 const HISTORY_MAX_DEPTH = 200;
+
+/**
+ * Selector for the elements in a decorator node, like an editor component, that handle a click on
+ * their own.
+ */
+const DECORATOR_INTERACTIVE_SELECTOR = [
+  'input',
+  'textarea',
+  'select',
+  'button',
+  'a[href]',
+  // A label moves the focus to its control on click
+  'label',
+  'summary',
+  'video[controls]',
+  'audio[controls]',
+  '[tabindex]',
+  '[draggable="true"]',
+  '[contenteditable]:not([contenteditable="false"])',
+].join(', ');
+
+/**
+ * Whether a click on the given element would put the caret on the static content of a decorator
+ * node, like the label or padding of an editor component. The editor cannot map such a position to
+ * a node, so the caret appears there but typing does nothing.
+ * @param {EventTarget | null} target Event target.
+ * @returns {boolean} Result.
+ */
+export const isStaticDecoratorContent = (target) => {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+
+  const decorator = target.closest('[data-lexical-decorator]');
+
+  if (!decorator) {
+    return false;
+  }
+
+  const interactive = target.closest(DECORATOR_INTERACTIVE_SELECTOR);
+
+  // An interactive element outside the decorator is the editor root or one of its ancestors
+  return !interactive || !decorator.contains(interactive);
+};
+
+/**
+ * Move a caret placed directly on the root node into a block: the adjacent paragraph or other
+ * block, or a new paragraph if the adjacent nodes are decorators, where nothing can be typed.
+ * @returns {boolean} Whether the selection has been moved.
+ */
+export const $moveCaretIntoBlock = () => {
+  const selection = getSelection();
+
+  if (
+    !isRangeSelection(selection) ||
+    !selection.isCollapsed() ||
+    selection.anchor.type !== 'element'
+  ) {
+    return false;
+  }
+
+  const root = getRoot();
+
+  if (!selection.anchor.getNode().is(root)) {
+    return false;
+  }
+
+  const { offset } = selection.anchor;
+  const before = root.getChildAtIndex(offset - 1);
+  const after = root.getChildAtIndex(offset);
+
+  if (isElementNode(after)) {
+    after.selectStart();
+  } else if (isElementNode(before)) {
+    before.selectEnd();
+  } else {
+    const paragraph = createParagraphNode();
+
+    if (before) {
+      before.insertAfter(paragraph);
+    } else if (after) {
+      after.insertBefore(paragraph);
+    } else {
+      root.append(paragraph);
+    }
+
+    paragraph.select();
+  }
+
+  return true;
+};
+
+/**
+ * Move the focus to the editor, and the caret to right after the given decorator node, like an
+ * editor component: the start of the next block, or a new paragraph if there’s none to type in.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {Element} decorator Element of the decorator node.
+ */
+const placeCaretAfterDecorator = (editor, decorator) => {
+  editor.getRootElement()?.focus({ preventScroll: true });
+
+  editor.update(() => {
+    const node = getNearestNodeFromDOMNode(decorator);
+
+    // The element has been found by its `data-lexical-decorator` attribute
+    /* v8 ignore next 3 */
+    if (!isDecoratorNode(node)) {
+      return;
+    }
+
+    node.selectNext();
+    $moveCaretIntoBlock();
+  });
+};
+
+/**
+ * Move the focus to the editor, and the caret to the end of the given block.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {Element} block Element of the block node.
+ */
+const placeCaretAtBlockEnd = (editor, block) => {
+  editor.getRootElement()?.focus({ preventScroll: true });
+
+  editor.update(() => {
+    const node = getNearestNodeFromDOMNode(block);
+
+    /* v8 ignore next 3 */
+    if (!isElementNode(node)) {
+      return;
+    }
+
+    node.selectEnd();
+  });
+};
+
+/**
+ * Handle a `mousedown` event on the editor, placing the caret where the user expects, rather than
+ * leaving it to the browser, when the pointer is not on any editable text. Browsers disagree on
+ * where the caret goes in these cases, and some put it within a decorator node, like an editor
+ * component, where the editor cannot map it to a node, so typing does nothing:
+ *
+ * - The static content of a decorator, like its label or padding, places the caret after it.
+ * - The empty area of the editor, outside any block, places the caret after the decorator above
+ * the pointer, or at the end of the block above the pointer.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {MouseEvent} event `mousedown` event.
+ * @returns {boolean} Whether the event has been handled.
+ */
+export const handleEditorMouseDown = (editor, event) => {
+  const { target, button, shiftKey, clientY } = event;
+  const root = editor.getRootElement();
+
+  // Leave the primary button with Shift, which extends the selection, and other buttons alone.
+  // Leave a read-only editor alone as well, as a paragraph may be added, and an event already
+  // handled by a nested editor, like one in an editor component
+  if (
+    !root ||
+    !editor.isEditable() ||
+    event.defaultPrevented ||
+    button !== 0 ||
+    shiftKey ||
+    !(target instanceof Element)
+  ) {
+    return false;
+  }
+
+  if (isStaticDecoratorContent(target)) {
+    const decorator = /** @type {Element} */ (target.closest('[data-lexical-decorator]'));
+
+    // A decorator of a nested editor, like one in an editor component, is handled by that editor
+    if (decorator.parentElement?.closest('[data-lexical-editor]') !== root) {
+      return false;
+    }
+
+    event.preventDefault();
+    placeCaretAfterDecorator(editor, decorator);
+
+    return true;
+  }
+
+  if (target !== root) {
+    return false;
+  }
+
+  // Find the last block starting above the pointer. Lexical adds a hidden element to the root
+  // after a decorator, which has no size
+  const block = [...root.children]
+    .filter((element) => !element.hasAttribute('data-lexical-decorator-boundary'))
+    .findLast((element) => element.getBoundingClientRect().top <= clientY);
+
+  if (!block) {
+    return false;
+  }
+
+  if (block.hasAttribute('data-lexical-decorator')) {
+    event.preventDefault();
+    placeCaretAfterDecorator(editor, block);
+
+    return true;
+  }
+
+  // Beside a block, the browser can find the nearest text on its own
+  if (clientY <= block.getBoundingClientRect().bottom) {
+    return false;
+  }
+
+  event.preventDefault();
+  placeCaretAtBlockEnd(editor, block);
+
+  return true;
+};
+
 /**
  * URL schemes allowed in a link, the same as the ones Lexical renders as is.
  */
@@ -209,6 +427,34 @@ export const getSelectionTypes = () => {
   };
 };
 
+/**
+ * Convert the editor content to Markdown. Call this within an editor update or read.
+ * @internal
+ * @param {Transformer[]} enabledTransformers Enabled Markdown transformers.
+ * @returns {string} Markdown value.
+ */
+export const exportMarkdown = (enabledTransformers) => {
+  const transformers = enabledTransformers.filter(
+    (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
+  );
+
+  return trimBlankBlockquoteLines(
+    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')
+      // Replace encoded spaces with regular spaces. The HTML entity can appear with a
+      // combination of bold and italic text
+      // @see https://github.com/sveltia/sveltia-cms/issues/511
+      // @see https://github.com/sveltia/sveltia-cms/issues/534
+      .replace(/&#32;/g, ' ')
+      // Remove the line breaks left by empty paragraphs at the end, which have no content. One
+      // may be added just by clicking below a block decorator; see `$moveCaretIntoBlock()`
+      .replace(/\n+$/, ''),
+  );
+};
+
 /**
  * Listen to changes made on the editor and trigger the Update event.
  * @internal
@@ -219,24 +465,7 @@ export const getSelectionTypes = () => {
  * @returns {string} Markdown value.
  */
 export const onEditorUpdate = (editor, enabledTransformers, cachedValue) => {
-  const transformers = enabledTransformers.filter(
-    (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
-  );
-
-  const value =
-    cachedValue ??
-    trimBlankBlockquoteLines(
-      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')
-        // Replace encoded spaces with regular spaces. The HTML entity can appear with a
-        // combination of bold and italic text
-        // @see https://github.com/sveltia/sveltia-cms/issues/511
-        // @see https://github.com/sveltia/sveltia-cms/issues/534
-        .replace(/&#32;/g, ' '),
-    );
+  const value = cachedValue ?? exportMarkdown(enabledTransformers);
 
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
@@ -324,6 +553,61 @@ export const initEditor = ({
     ),
   );
 
+  if (isCodeEditor) {
+    // Pressing Backspace at the very beginning of a code block converts it to a paragraph by
+    // default (`CodeNode.collapseAtStart()`), which makes no sense when the editor only holds a
+    // single code block, so ignore it
+    addUnregister(
+      editor.registerCommand(
+        DELETE_CHARACTER_COMMAND,
+        (isBackward) => {
+          const selection = getSelection();
+
+          if (!isBackward || !isRangeSelection(selection) || !selection.isCollapsed()) {
+            return false;
+          }
+
+          const { offset } = selection.anchor;
+          const node = selection.anchor.getNode();
+          const codeNode = isCodeNode(node) ? node : getNearestNodeOfType(node, CodeNode);
+
+          return (
+            !!codeNode &&
+            offset === 0 &&
+            (node.is(codeNode) || !!codeNode.getFirstDescendant()?.is(node))
+          );
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
+
+    // Make sure the editor always has a single code block. This runs within the same update that
+    // made the change, so the user never gets a chance to type in anything else
+    addUnregister(
+      editor.registerNodeTransform(RootNode, (root) => {
+        const children = root.getChildren();
+
+        if (children.length === 1 && isCodeNode(children[0])) {
+          return;
+        }
+
+        const [firstChild] = children;
+
+        if (children.length === 1 && isElementNode(firstChild)) {
+          const node = createCodeNode(defaultLanguage);
+
+          // Keep the content and the selection
+          firstChild.replace(node, true);
+        } else if (children.length === 0) {
+          const node = createCodeNode(defaultLanguage);
+
+          root.append(node);
+          node.selectStart();
+        }
+      }),
+    );
+  }
+
   if (useMarkdownShortcuts) {
     addUnregister(registerMarkdownShortcuts(editor, enabledTransformers));
   }
@@ -477,25 +761,6 @@ 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();
-            }
-
-            if (children.length === 0) {
-              const node = createCodeNode();
-
-              node.setLanguage(defaultLanguage);
-              root.append(node);
-            }
-          }
-
           lastValue = onEditorUpdate(
             editor,
             enabledTransformers,
@@ -589,7 +854,8 @@ export const loadCodeHighlighter = async (lang) => {
  * @param {LexicalEditor} editor Editor instance.
  * @param {string} value Current Markdown value.
  * @param {Transformer[]} enabledTransformers List of enabled Markdown transformers.
- * @returns {Promise<void>} Nothing.
+ * @returns {Promise<string>} The value as the editor exports it once imported, which can differ in
+ * style from the given value, e.g. `_text_` for `*text*`.
  * @throws {Error} Failed to convert the value to Lexical nodes.
  */
 export const convertMarkdownToLexical = async (editor, value, enabledTransformers) => {
@@ -611,14 +877,18 @@ export const convertMarkdownToLexical = async (editor, value, enabledTransformer
   value = padBlankBlockquoteLines(value);
 
   return new Promise((resolve, reject) => {
-    editor.update(() => {
-      try {
-        convertFromMarkdownString(value, enabledTransformers);
-        resolve(undefined);
-      } catch (ex) {
-        reject(new Error('Failed to convert Markdown', { cause: ex }));
-      }
-    });
+    editor.update(
+      () => {
+        try {
+          convertFromMarkdownString(value, enabledTransformers);
+          resolve(exportMarkdown(enabledTransformers));
+        } catch (ex) {
+          reject(new Error('Failed to convert Markdown', { cause: ex }));
+        }
+      },
+      // Tell the import from a change made by the user
+      { tag: IMPORT_UPDATE_TAG },
+    );
   });
 };
 

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

@@ -1,6 +1,8 @@
 <script>
+  import { $getRoot as getRoot, HISTORY_MERGE_TAG } from 'lexical';
   import { getContext, onMount } from 'svelte';
-  import { initEditor } from './core.js';
+  import { IMPORT_UPDATE_TAG } from './constants.js';
+  import { handleEditorMouseDown, initEditor } from './core.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -10,6 +12,8 @@
   /**
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {'ltr' | 'rtl' | 'auto'} [dir] Direction of the text. With `auto` or no value, each
+   * paragraph takes the direction of its own text.
    * @property {boolean} [hidden] Whether to hide the widget.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
@@ -28,6 +32,7 @@
   let {
     /* eslint-disable prefer-const */
     class: className,
+    dir = undefined,
     hidden = false,
     disabled = false,
     readonly = false,
@@ -53,6 +58,26 @@
     editorStore.editor?.setEditable(editable);
   });
 
+  $effect(() => {
+    // Lexical owns the root element’s `dir` attribute, so set the direction on the root node, which
+    // the paragraphs then follow. Without one, each paragraph gets `dir="auto"`
+    const { editor } = editorStore;
+    const direction = dir === 'ltr' || dir === 'rtl' ? dir : null;
+
+    // Check first, as even an update that changes nothing makes the editor convert its content
+    if (!editor || editor.getEditorState().read(() => getRoot().getDirection()) === direction) {
+      return;
+    }
+
+    editor.update(
+      () => {
+        getRoot().setDirection(direction);
+      },
+      // Keep the change out of the undo history
+      { tag: 'history-merge' },
+    );
+  });
+
   /**
    * Update {@link value} and other state variables whenever the editor content is updated.
    * @param {Event} event `Update` custom event.
@@ -60,13 +85,19 @@
   const onUpdate = (event) => {
     const { hasConverterError, useRichText, inputValue } = editorStore;
 
+    // The content has been converted, if it has changed at all
+    editorStore.pending = false;
+
     if (hasConverterError || !useRichText) {
       return;
     }
 
     const { value: newValue, selection } = /** @type {CustomEvent} */ (event).detail;
 
-    if (inputValue !== newValue) {
+    // Keep the value as given when the editor has only rewritten it in its own Markdown style, e.g.
+    // `_text_` for `*text*`: that’s not a change, and the value would otherwise change as soon as
+    // it’s set
+    if (inputValue !== newValue && !editorStore.isRestyledImport(newValue)) {
       // Temporarily disable rich text to prevent unnecessary Markdown conversion that resets
       // Lexical nodes and selection, then restore the state
       editorStore.useRichText = false;
@@ -88,6 +119,17 @@
     }
   };
 
+  /**
+   * Listen to `mousedown` events on the editor to place the caret where the user expects when the
+   * pointer is not on any editable text, like on an editor component.
+   * @param {MouseEvent} event `mousedown` event.
+   */
+  const onMouseDown = (event) => {
+    if (editorStore.editor) {
+      handleEditorMouseDown(editorStore.editor, event);
+    }
+  };
+
   onMount(() => {
     const { editor, enabledTransformers, dispose } = initEditor(editorStore.config);
 
@@ -96,10 +138,28 @@
 
     lexicalRoot?.addEventListener('Update', onUpdate);
     lexicalRoot?.addEventListener('click', onClick);
+    lexicalRoot?.addEventListener('mousedown', onMouseDown);
+
+    // A change made by the user is converted to Markdown a moment later, so report it as pending
+    // until then. An import, or an update that only changes how the content looks, e.g. the code
+    // highlighting, isn’t a change
+    const unregisterUpdateListener = editor.registerUpdateListener(
+      ({ dirtyElements, dirtyLeaves, tags }) => {
+        if (
+          (dirtyElements.size || dirtyLeaves.size) &&
+          !tags.has(IMPORT_UPDATE_TAG) &&
+          !tags.has(HISTORY_MERGE_TAG)
+        ) {
+          editorStore.pending = true;
+        }
+      },
+    );
 
     return () => {
+      unregisterUpdateListener();
       lexicalRoot?.removeEventListener('Update', onUpdate);
       lexicalRoot?.removeEventListener('click', onClick);
+      lexicalRoot?.removeEventListener('mousedown', onMouseDown);
       dispose();
       editor.setRootElement(null);
       editorStore.initialized = false;

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

@@ -8,6 +8,11 @@ declare const LexicalRoot: import("svelte").Component<{
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * Direction of the text. With `auto` or no value, each
+     * paragraph takes the direction of its own text.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Whether to hide the widget.
      */
@@ -42,6 +47,11 @@ type Props = {
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * Direction of the text. With `auto` or no value, each
+     * paragraph takes the direction of its own text.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Whether to hide the widget.
      */