@sveltia/ui 0.24.0 → 0.24.2

package/dist/components/listbox/listbox.svelte

@@ -99,7 +99,7 @@
   line-height: var(--sui-control-line-height);
 }
 [role=listbox] :global([role="separator"]) {
-  margin: 4px;
+  margin: 4px 0;
   background-color: var(--sui-control-border-color);
 }
 [role=listbox][aria-invalid=true] {

package/dist/components/listbox/option.svelte

@@ -89,7 +89,6 @@
 .option :global(button) {
   flex: none;
   display: flex;
-  justify-content: space-between;
   gap: 4px;
   margin: 0 !important;
   border-radius: var(--sui-option-border-radius);
@@ -101,6 +100,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.option :global(button) :global(*) {
+  flex: none;
+}
+.option :global(button) :global(.label) {
+  flex: auto;
+}
 .option.wrap :global(button) {
   white-space: normal;
 }
@@ -115,6 +120,6 @@
 .option :global(.icon.check) {
   margin: -2px;
 }
-.option :global(button[aria-selected="true"]) :global(.icon) {
+.option :global(button[aria-selected="true"]) :global(.icon.check) {
   color: var(--sui-primary-accent-color-text);
 }</style>

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

@@ -52,8 +52,9 @@ import {
 } from 'lexical';
 import prismComponents from 'prismjs/components';
 import { blockButtonTypes, textFormatButtonTypes } from '.';
+import { TABLE } from './transformers/table';
 
-const allTransformers = [...TRANSFORMERS];
+const allTransformers = [...TRANSFORMERS, TABLE];
 
 /**
  * Lexical editor configuration.

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

@@ -195,6 +195,12 @@
 .lexical-root :global([data-lexical-text=true]) {
   cursor: text;
 }
+.lexical-root :global(th) > :global(p),
+.lexical-root :global(td) > :global(p) {
+  margin: 0;
+  white-space: normal;
+  word-break: normal;
+}
 
 :root[data-theme=light] .lexical-root :global(.token.comment),
 :root[data-theme=light] .lexical-root :global(.token.prolog),

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

@@ -0,0 +1,4 @@
+/**
+ * @type {import('@lexical/markdown').ElementTransformer}
+ */
+export const TABLE: import("@lexical/markdown").ElementTransformer;

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

@@ -0,0 +1,209 @@
+// Adopted from https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts
+
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable jsdoc/require-returns-description */
+/* eslint-disable jsdoc/require-param-description */
+
+import {
+  TRANSFORMERS,
+  $convertFromMarkdownString as convertFromMarkdownString,
+  $convertToMarkdownString as convertToMarkdownString,
+} from '@lexical/markdown';
+import {
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+  $createTableCellNode as createTableCellNode,
+  $createTableNode as createTableNode,
+  $createTableRowNode as createTableRowNode,
+  $isTableCellNode as isTableCellNode,
+  $isTableNode as isTableNode,
+  $isTableRowNode as isTableRowNode,
+} from '@lexical/table';
+import { $isParagraphNode as isParagraphNode, $isTextNode as isTextNode } from 'lexical';
+
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
+
+/**
+ * Returns the number of columns in the table.
+ * @param {TableNode} table
+ * @returns {number}
+ */
+function getTableColumnsSize(table) {
+  const row = table.getFirstChild();
+
+  return isTableRowNode(row) ? row.getChildrenSize() : 0;
+}
+
+/**
+ * Creates a table cell with the given text content.
+ * @param {string} textContent
+ * @returns {TableCellNode}
+ */
+const createTableCell = (textContent) => {
+  textContent = textContent.replace(/\\n/g, '\n');
+
+  const cell = createTableCellNode(TableCellHeaderStates.NO_STATUS);
+
+  convertFromMarkdownString(textContent, TRANSFORMERS, cell);
+
+  return cell;
+};
+
+/**
+ * Maps the given text content to an array of table cells.
+ * @param {string} textContent
+ * @returns {TableCellNode[] | null}
+ */
+const mapToTableCells = (textContent) => {
+  const [, match] = textContent.match(TABLE_ROW_REG_EXP) ?? [];
+
+  if (!match) {
+    return null;
+  }
+
+  return match.split('|').map((text) => createTableCell(text));
+};
+
+/**
+ * @type {import('@lexical/markdown').ElementTransformer}
+ */
+export const TABLE = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export: (node) => {
+    if (!isTableNode(node)) {
+      return null;
+    }
+
+    /** @type {string[]} */
+    const output = [];
+
+    node.getChildren().forEach((row) => {
+      /** @type {string[]} */
+      const rowOutput = [];
+
+      if (!isTableRowNode(row)) {
+        return;
+      }
+
+      let isHeaderRow = false;
+
+      row.getChildren().forEach((cell) => {
+        // It’s TableCellNode so it’s just to make flow happy
+        if (isTableCellNode(cell)) {
+          rowOutput.push(convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
+
+          if (cell.__headerState === TableCellHeaderStates.ROW) {
+            isHeaderRow = true;
+          }
+        }
+      });
+
+      output.push(`| ${rowOutput.join(' | ')} |`);
+
+      if (isHeaderRow) {
+        output.push(`| ${rowOutput.map(() => '---').join(' | ')} |`);
+      }
+    });
+
+    return output.join('\n');
+  },
+  regExp: TABLE_ROW_REG_EXP,
+  replace: (parentNode, _children, [textContent]) => {
+    // Header row
+    if (TABLE_ROW_DIVIDER_REG_EXP.test(textContent)) {
+      const table = parentNode.getPreviousSibling();
+
+      if (!table || !isTableNode(table)) {
+        return;
+      }
+
+      const rows = table.getChildren();
+      const lastRow = rows[rows.length - 1];
+
+      if (!lastRow || !isTableRowNode(lastRow)) {
+        return;
+      }
+
+      // Add header state to row cells
+      lastRow.getChildren().forEach((cell) => {
+        if (!isTableCellNode(cell)) {
+          return;
+        }
+
+        cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+      });
+
+      // Remove line
+      parentNode.remove();
+
+      return;
+    }
+
+    const matchCells = mapToTableCells(textContent);
+
+    if (!matchCells) {
+      return;
+    }
+
+    const rows = [matchCells];
+    let sibling = parentNode.getPreviousSibling();
+    let maxCells = matchCells.length;
+
+    while (sibling) {
+      if (!isParagraphNode(sibling)) {
+        break;
+      }
+
+      if (sibling.getChildrenSize() !== 1) {
+        break;
+      }
+
+      const firstChild = sibling.getFirstChild();
+
+      if (!isTextNode(firstChild)) {
+        break;
+      }
+
+      const cells = mapToTableCells(firstChild.getTextContent());
+
+      if (!cells) {
+        break;
+      }
+
+      maxCells = Math.max(maxCells, cells.length);
+      rows.unshift(cells);
+
+      const previousSibling = sibling.getPreviousSibling();
+
+      sibling.remove();
+      sibling = previousSibling;
+    }
+
+    const table = createTableNode();
+
+    rows.forEach((cells) => {
+      const tableRow = createTableRowNode();
+
+      table.append(tableRow);
+
+      for (let i = 0; i < maxCells; i += 1) {
+        tableRow.append(i < cells.length ? cells[i] : createTableCell(''));
+      }
+    });
+
+    const previousSibling = parentNode.getPreviousSibling();
+
+    if (isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+      previousSibling.append(...table.getChildren());
+      parentNode.remove();
+    } else {
+      parentNode.replace(table);
+    }
+
+    table.selectEnd();
+  },
+  type: 'element',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -28,19 +28,19 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.24.0",
-    "@lexical/dragon": "^0.24.0",
-    "@lexical/history": "^0.24.0",
-    "@lexical/link": "^0.24.0",
-    "@lexical/list": "^0.24.0",
-    "@lexical/markdown": "^0.24.0",
-    "@lexical/rich-text": "^0.24.0",
-    "@lexical/selection": "^0.24.0",
-    "@lexical/table": "^0.24.0",
-    "@lexical/utils": "^0.24.0",
+    "@lexical/code": "^0.25.0",
+    "@lexical/dragon": "^0.25.0",
+    "@lexical/history": "^0.25.0",
+    "@lexical/link": "^0.25.0",
+    "@lexical/list": "^0.25.0",
+    "@lexical/markdown": "^0.25.0",
+    "@lexical/rich-text": "^0.25.0",
+    "@lexical/selection": "^0.25.0",
+    "@lexical/table": "^0.25.0",
+    "@lexical/utils": "^0.25.0",
     "@sveltia/utils": "^0.6.3",
-    "prismjs": "^1.29.0",
-    "lexical": "^0.24.0"
+    "lexical": "^0.25.0",
+    "prismjs": "^1.29.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -48,31 +48,31 @@
   "devDependencies": {
     "@playwright/test": "^1.50.1",
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.17.1",
+    "@sveltejs/kit": "^2.17.2",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "cspell": "^8.17.3",
+    "cspell": "^8.17.5",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.3",
     "eslint-plugin-svelte": "^2.46.1",
-    "postcss": "^8.5.2",
+    "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.2",
     "prettier-plugin-svelte": "^3.3.3",
     "sass": "^1.85.0",
     "stylelint": "^16.14.1",
     "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-scss": "^6.11.0",
-    "svelte": "5.20.0",
+    "stylelint-scss": "^6.11.1",
+    "svelte": "5.20.2",
     "svelte-check": "^4.1.4",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.1.0",
-    "vitest": "^3.0.5"
+    "vite": "^6.1.1",
+    "vitest": "^3.0.6"
   },
   "exports": {
     ".": {
@@ -94,7 +94,8 @@
   },
   "pnpm": {
     "overrides": {
-      "cookie@<0.7.0": ">=0.7.0"
+      "cookie@<0.7.0": ">=0.7.0",
+      "esbuild@<=0.24.2": ">=0.25.0"
     }
   }
 }