@sveltia/ui 0.79.0 → 0.79.2

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

@@ -86,6 +86,7 @@ import {
 } from './shiki/facade.js';
 import { registerCodeHighlighting, shikiTokenizer } from './shiki/highlighter.js';
 import { getCodeTheme, observeCodeTheme } from './shiki/theme.js';
+import { BLOCK_SYNTAX_ESCAPE } from './transformers/block-escape.js';
 import { HR } from './transformers/hr.js';
 import { TABLE } from './transformers/table.js';
 
@@ -455,9 +456,13 @@ export const getSelectionTypes = () => {
  * @returns {string} Markdown value.
  */
 export const exportMarkdown = (enabledTransformers) => {
-  const transformers = enabledTransformers.filter(
-    (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
-  );
+  const transformers = [
+    ...enabledTransformers.filter(
+      (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
+    ),
+    // Last, so a transformer of the editor’s own, such as a link, comes first
+    BLOCK_SYNTAX_ESCAPE,
+  ];
 
   return trimBlankBlockquoteLines(
     convertToMarkdownString(transformers)

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

@@ -88,7 +88,9 @@
     // The content has been converted, if it has changed at all
     editorStore.pending = false;
 
-    if (hasConverterError || !useRichText) {
+    // Ignore the content while a value is being imported, like the empty code block the editor
+    // starts with: it would overwrite the value, which then replaces the content once imported
+    if (hasConverterError || !useRichText || editorStore.importing) {
       return;
     }
 

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

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

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

@@ -50,6 +50,16 @@ export const createEditorStore = () => {
    * @type {{ source: string, exported: string } | undefined}
    */
   let lastImport = undefined;
+  /**
+   * Number of imports started, to tell the latest one.
+   * @type {number}
+   */
+  let importCount = 0;
+  /**
+   * Whether the latest import is still in progress.
+   * @type {boolean}
+   */
+  let importing = false;
 
   /**
    * Flag a conversion error, which takes the editor out of the rich text mode, and shows the error
@@ -76,6 +86,12 @@ export const createEditorStore = () => {
 
     const originalValue = inputValue;
 
+    importCount += 1;
+
+    const importId = importCount;
+
+    importing = true;
+
     try {
       // We should avoid an empty editor; there should be at least one `<p>`, so give it an empty
       // string if the `value` is `undefined`
@@ -96,6 +112,11 @@ export const createEditorStore = () => {
       inputValue = originalValue;
       // eslint-disable-next-line no-console
       console.error(ex);
+    } finally {
+      // An earlier import finishing last doesn’t end the latest one
+      if (importId === importCount) {
+        importing = false;
+      }
     }
   };
 
@@ -179,6 +200,9 @@ export const createEditorStore = () => {
     set pending(newValue) {
       pending = newValue;
     },
+    get importing() {
+      return importing;
+    },
     editorId,
     convertMarkdown,
     /**

package/dist/components/text-editor/transformers/block-escape.d.ts

@@ -0,0 +1,10 @@
+export function escapeBlockSyntax(text: string): string;
+/**
+ * Export-only transformer that escapes the Markdown block syntax at the start of a block or of a
+ * line after a line break. Without it, a paragraph typed as `## Hours` with the Markdown shortcuts
+ * turned off, pasted as text, or imported from the escaped `\## Hours` would be exported as is and
+ * become a heading the next time the Markdown is read.
+ * @type {TextMatchTransformer}
+ */
+export const BLOCK_SYNTAX_ESCAPE: TextMatchTransformer;
+import type { TextMatchTransformer } from '@lexical/markdown';

package/dist/components/text-editor/transformers/block-escape.js

@@ -0,0 +1,65 @@
+import { $isLineBreakNode as isLineBreakNode, $isTextNode as isTextNode } from 'lexical';
+
+/**
+ * @import { TextMatchTransformer } from '@lexical/markdown';
+ * @import { ElementNode, LexicalNode, TextNode } from 'lexical';
+ */
+
+/**
+ * Escape the Markdown block syntax at the start of a line, so text that only looks like a heading,
+ * a list item, a blockquote, a setext heading underline or a thematic break stays text when the
+ * Markdown is read again. Lexical already escapes the inline syntax characters, including `*`, `_`,
+ * `` ` `` and `~`.
+ * @param {string} text Exported Markdown of a line start.
+ * @returns {string} Escaped Markdown.
+ */
+export const escapeBlockSyntax = (text) =>
+  text
+    // ATX heading, bullet list item, blockquote, setext heading underline or thematic break
+    .replace(/^( {0,3})(#{1,6}(?=[ \t]|$)|[-+](?=[ \t]|$)|>|=+[ \t]*$|-{2,}[ \t]*$)/, '$1\\$2')
+    // Ordered list item, whose number can’t be escaped, unlike the delimiter after it
+    .replace(/^( {0,3}\d{1,9})([.)])(?=[ \t]|$)/, '$1\\$2');
+
+/**
+ * Export-only transformer that escapes the Markdown block syntax at the start of a block or of a
+ * line after a line break. Without it, a paragraph typed as `## Hours` with the Markdown shortcuts
+ * turned off, pasted as text, or imported from the escaped `\## Hours` would be exported as is and
+ * become a heading the next time the Markdown is read.
+ * @type {TextMatchTransformer}
+ */
+export const BLOCK_SYNTAX_ESCAPE = {
+  dependencies: [],
+  /**
+   * Export a text node at the start of a line, escaping the block syntax it starts with.
+   * @param {LexicalNode} node Node.
+   * @param {(node: ElementNode) => string} _exportChildren Function to export the children of an
+   * element, unused.
+   * @param {(node: TextNode, textContent: string) => string} exportFormat Function to export a text
+   * node with its format.
+   * @returns {string | null} Markdown, or `null` to leave the node to the other transformers.
+   */
+  export: (node, _exportChildren, exportFormat) => {
+    if (!isTextNode(node)) {
+      return null;
+    }
+
+    const parent = node.getParent();
+    const previous = node.getPreviousSibling();
+
+    // Text in a link or other inline element, in a code block, which is exported verbatim, or in a
+    // heading, whose content is only parsed for inline syntax
+    if (!parent || parent.isInline() || ['code', 'heading'].includes(parent.getType())) {
+      return null;
+    }
+
+    if (previous && !isLineBreakNode(previous)) {
+      return null;
+    }
+
+    // A formatted node starts with its own syntax, such as `**`, which is left as is
+    return escapeBlockSyntax(exportFormat(node, node.getTextContent()));
+  },
+  // Never used to import Markdown or as a shortcut
+  regExp: /(?!)/,
+  type: 'text-match',
+};

package/dist/typedefs.d.ts

@@ -1048,6 +1048,11 @@ export type TextEditorStore = {
      * has yet to convert it to Markdown and update {@link TextEditorStore.inputValue}.
      */
     pending: boolean;
+    /**
+     * Whether the latest {@link TextEditorStore.inputValue} is still
+     * being imported to the Lexical editor.
+     */
+    importing: boolean;
     /**
      * Function to trigger the Lexical converter.
      */

package/dist/typedefs.js

@@ -448,6 +448,8 @@
  * @property {boolean} showConverterError Whether to show a converter error in the UI.
  * @property {boolean} pending Whether the user has changed the rich text content, and the editor
  * has yet to convert it to Markdown and update {@link TextEditorStore.inputValue}.
+ * @property {boolean} importing Whether the latest {@link TextEditorStore.inputValue} is still
+ * being imported to the Lexical editor.
  * @property {() => Promise<void>} convertMarkdown Function to trigger the Lexical converter.
  * @property {(value: string) => string | undefined} getImportedValue Function to get the
  * {@link TextEditorStore.inputValue} last imported if the given value, exported by the editor, is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.79.0",
+  "version": "0.79.2",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -80,7 +80,7 @@
     "eslint-config-airbnb-extended": "^3.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^65.0.2",
+    "eslint-plugin-jsdoc": "^65.1.0",
     "eslint-plugin-package-json": "^1.10.1",
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.13.0",