@sveltia/ui 0.31.11 → 0.32.0

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,
@@ -58,6 +59,7 @@ import {
   increaseListIndentation,
   splitMultilineFormatting,
 } from './markdown.js';
+import { HR } from './transformers/hr.js';
 import { TABLE } from './transformers/table.js';
 
 /**
@@ -70,7 +72,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 +89,7 @@ const editorConfig = {
     ListItemNode,
     CodeNode,
     CodeHighlightNode,
+    HorizontalRuleNode,
     TableNode,
     TableCellNode,
     TableRowNode,

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.js

@@ -20,7 +20,10 @@ export const splitMultilineFormatting = (value) =>
  * @see https://github.com/sveltia/sveltia-cms/issues/599
  */
 export const fixMarkdownFormatting = (value) =>
-  value.replace(/\*\*(\S+?) \*\*/gm, '**$1** ').replace(/_(\S+?) _/gm, '_$1_ ');
+  value
+    .replace(/\*\*(\S+?) \*\*/gm, '**$1** ')
+    .replace(/_(\S+?) _/gm, '_$1_ ')
+    .replace(/~~(\S+?) ~~/gm, '~~$1~~ ');
 
 /**
  * Increase list indentation levels to prevent Markdown parsing issues.

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

@@ -113,6 +113,24 @@ describe('fixMarkdownFormatting', () => {
       'snake_case_variable **foo** bar',
     );
   });
+
+  it('should fix unclosed strikethrough markers with space in between', () => {
+    expect(fixMarkdownFormatting('~~foo ~~bar')).toBe('~~foo~~ bar');
+  });
+
+  it('should fix multiple strikethrough markers', () => {
+    expect(fixMarkdownFormatting('~~foo ~~bar ~~baz ~~qux')).toBe('~~foo~~ bar ~~baz~~ qux');
+  });
+
+  it('should fix mixed formatting with strikethrough', () => {
+    expect(fixMarkdownFormatting('**bold **text _italic _text ~~strike ~~text')).toBe(
+      '**bold** text _italic_ text ~~strike~~ text',
+    );
+  });
+
+  it('should not affect properly closed strikethrough markers', () => {
+    expect(fixMarkdownFormatting('~~foo~~ bar')).toBe('~~foo~~ bar');
+  });
 });
 
 describe('increaseListIndentation', () => {

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.11",
+  "version": "0.32.0",
   "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": {
     ".": {