@sveltia/ui 0.31.12 → 0.32.1

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

@@ -8,6 +8,7 @@ import {
   registerCodeHighlighting,
 } from '@lexical/code';
 import { registerDragonSupport } from '@lexical/dragon';
+import { HorizontalRuleNode } from '@lexical/extension';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import {
   LinkNode,
@@ -53,11 +54,8 @@ import {
 } from 'lexical';
 import prismComponents from 'prismjs/components';
 import { BLOCK_BUTTON_TYPES, TEXT_FORMAT_BUTTON_TYPES } from './constants.js';
-import {
-  fixMarkdownFormatting,
-  increaseListIndentation,
-  splitMultilineFormatting,
-} from './markdown.js';
+import { increaseListIndentation, splitMultilineFormatting } from './markdown.js';
+import { HR } from './transformers/hr.js';
 import { TABLE } from './transformers/table.js';
 
 /**
@@ -70,7 +68,7 @@ import { TABLE } from './transformers/table.js';
  * } from '../../typedefs';
  */
 
-const allTransformers = [...TRANSFORMERS, TABLE];
+const allTransformers = [...TRANSFORMERS, HR, TABLE];
 const prismBaseURL = `https://unpkg.com/prismjs@1.30.0`;
 
 /**
@@ -87,6 +85,7 @@ const editorConfig = {
     ListItemNode,
     CodeNode,
     CodeHighlightNode,
+    HorizontalRuleNode,
     TableNode,
     TableCellNode,
     TableRowNode,
@@ -417,9 +416,6 @@ export const convertMarkdownToLexical = async (editor, value) => {
   // Split multiline formatting into separate lines to prevent Markdown parsing issues
   value = splitMultilineFormatting(value);
 
-  // Fix unclosed formatting markers (work around Lexical bug)
-  value = fixMarkdownFormatting(value);
-
   // Increase list indentation levels to prevent Markdown parsing issues
   value = increaseListIndentation(value);
 

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

@@ -204,6 +204,18 @@
   white-space: normal;
   word-break: normal;
 }
+.lexical-root :global(hr) {
+  margin: var(--sui-paragraph-margin) 0;
+  border: none;
+  padding: 0;
+}
+.lexical-root :global(hr::after) {
+  display: block;
+  height: 2px;
+  background-color: var(--sui-control-border-color);
+  line-height: 2px;
+  content: "";
+}
 
 :root[data-theme=light] .lexical-root :global(.token:is(.comment, .prolog, .doctype, .cdata)) {
   color: slategray;

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

@@ -1,3 +1,2 @@
 export function splitMultilineFormatting(value: string): string;
-export function fixMarkdownFormatting(value: string): string;
 export function increaseListIndentation(value: string): string;

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

@@ -11,20 +11,6 @@ export const splitMultilineFormatting = (value) =>
     .replace(/(\s+)~~([^~\n]+?)\n([^~\n]+?)~~(\s+)/gm, '$1~~$2~~\n~~$3~~$4')
     .replace(/(\s+)`([^`\n]+?)\n([^`\n]+?)`(\s+)/gm, '$1`$2`\n`$3`$4');
 
-/**
- * Fix malformed Markdown formatting markers.
- * Converts unclosed formatting markers like `**foo **bar` to `**foo** bar`.
- * This works around a Lexical bug with certain formatting patterns.
- * @param {string} value Markdown string to fix.
- * @returns {string} Fixed Markdown string.
- * @see https://github.com/sveltia/sveltia-cms/issues/599
- */
-export const fixMarkdownFormatting = (value) =>
-  value
-    .replace(/\*\*(\S+?) \*\*/gm, '**$1** ')
-    .replace(/_(\S+?) _/gm, '_$1_ ')
-    .replace(/~~(\S+?) ~~/gm, '~~$1~~ ');
-
 /**
  * Increase list indentation levels to prevent Markdown parsing issues.
  * Slate uses 2 spaces per indentation level, whereas Lexical uses 4 spaces.

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

@@ -0,0 +1,8 @@
+/**
+ * @import { ElementTransformer } from '@lexical/markdown';
+ */
+/**
+ * @type {ElementTransformer}
+ */
+export const HR: ElementTransformer;
+import type { ElementTransformer } from '@lexical/markdown';

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

@@ -0,0 +1,34 @@
+// Adopted from https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+import {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode,
+} from '@lexical/extension';
+
+/**
+ * @import { ElementTransformer } from '@lexical/markdown';
+ */
+
+/**
+ * @type {ElementTransformer}
+ */
+export const HR = {
+  dependencies: [HorizontalRuleNode],
+  export: (node) => ($isHorizontalRuleNode(node) ? '***' : null),
+  regExp: /^(---|\*\*\*|___)\s?$/,
+  replace: (parentNode, _1, _2, isImport) => {
+    const line = $createHorizontalRuleNode();
+
+    if (isImport || parentNode.getNextSibling() !== null) {
+      parentNode.replace(line);
+    } else {
+      parentNode.insertBefore(line);
+    }
+
+    line.selectNext();
+  },
+  type: 'element',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.31.12",
+  "version": "0.32.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -8,18 +8,19 @@
     "url": "github:sveltia/sveltia-ui"
   },
   "dependencies": {
-    "@lexical/code": "^0.39.0",
-    "@lexical/dragon": "^0.39.0",
-    "@lexical/history": "^0.39.0",
-    "@lexical/link": "^0.39.0",
-    "@lexical/list": "^0.39.0",
-    "@lexical/markdown": "^0.39.0",
-    "@lexical/rich-text": "^0.39.0",
-    "@lexical/selection": "^0.39.0",
-    "@lexical/table": "^0.39.0",
-    "@lexical/utils": "^0.39.0",
+    "@lexical/code": "^0.40.0",
+    "@lexical/dragon": "^0.40.0",
+    "@lexical/extension": "^0.40.0",
+    "@lexical/history": "^0.40.0",
+    "@lexical/link": "^0.40.0",
+    "@lexical/list": "^0.40.0",
+    "@lexical/markdown": "^0.40.0",
+    "@lexical/rich-text": "^0.40.0",
+    "@lexical/selection": "^0.40.0",
+    "@lexical/table": "^0.40.0",
+    "@lexical/utils": "^0.40.0",
     "@sveltia/utils": "^0.8.6",
-    "lexical": "^0.39.0",
+    "lexical": "^0.40.0",
     "prismjs": "^1.30.0",
     "svelte-i18n": "^4.0.1"
   },
@@ -28,31 +29,32 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "cspell": "^9.6.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "cspell": "^9.6.4",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^62.2.0",
+    "eslint-plugin-jsdoc": "^62.5.1",
     "eslint-plugin-svelte": "^2.46.1",
-    "oxlint": "^1.41.0",
+    "oxlint": "^1.43.0",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.1",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
-    "sass": "^1.97.2",
-    "stylelint": "^17.0.0",
+    "sass": "^1.97.3",
+    "stylelint": "^17.1.1",
     "stylelint-config-recommended-scss": "^17.0.0",
     "stylelint-scss": "^7.0.0",
-    "svelte": "^5.47.1",
-    "svelte-check": "^4.3.5",
+    "svelte": "^5.49.2",
+    "svelte-check": "^4.3.6",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "vite": "^7.3.1",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.18"
   },
   "exports": {
     ".": {