@inshapardaz/likhari-react 0.1.8 → 0.1.9-dev.96

package/dist/table/tableActions.js

@@ -0,0 +1,71 @@
+import { $deleteTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $insertTableRow__EXPERIMENTAL, $isTableCellNode, $isTableSelection, } from '@lexical/table';
+import { $getSelection, $isRangeSelection } from 'lexical';
+/** Table cells the selection covers: the caret's own cell, or every cell of a
+ * multi-cell selection. Empty when the selection isn't in a table. */
+function $selectedCells() {
+    const selection = $getSelection();
+    if ($isTableSelection(selection))
+        return selection.getNodes().filter($isTableCellNode);
+    if ($isRangeSelection(selection)) {
+        const cell = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+        return cell ? [cell] : [];
+    }
+    return [];
+}
+/** How many rows and columns the selection spans (1 × 1 for a caret in a cell, 0 × 0 outside a table). */
+export function $getTableSelectionSize() {
+    const cells = $selectedCells();
+    if (cells.length === 0)
+        return { rows: 0, columns: 0 };
+    const rows = cells.map($getTableRowIndexFromTableCellNode);
+    const columns = cells.map($getTableColumnIndexFromTableCellNode);
+    return {
+        rows: Math.max(...rows) - Math.min(...rows) + 1,
+        columns: Math.max(...columns) - Math.min(...columns) + 1,
+    };
+}
+/**
+ * Inserts as many rows as the selection spans, before its first row or after
+ * its last. Lexical's own insert works from the selection's focus cell and adds
+ * one row, so with several rows selected it would land mid-selection.
+ */
+export function $insertTableRows(insertAfter) {
+    const cells = $selectedCells();
+    if (cells.length === 0)
+        return;
+    const rows = cells.map($getTableRowIndexFromTableCellNode);
+    const first = Math.min(...rows);
+    const last = Math.max(...rows);
+    // Park the caret in a cell on the edge row; every insert then lands right next to it.
+    cells[rows.indexOf(insertAfter ? last : first)].selectEnd();
+    for (let i = 0; i <= last - first; i++)
+        $insertTableRow__EXPERIMENTAL(insertAfter);
+}
+/** Like $insertTableRows, for columns. "Before" is the column index below the
+ * first selected one (the right-hand side in a right-to-left table). */
+export function $insertTableColumns(insertAfter) {
+    const cells = $selectedCells();
+    if (cells.length === 0)
+        return;
+    const columns = cells.map($getTableColumnIndexFromTableCellNode);
+    const first = Math.min(...columns);
+    const last = Math.max(...columns);
+    cells[columns.indexOf(insertAfter ? last : first)].selectEnd();
+    for (let i = 0; i <= last - first; i++)
+        $insertTableColumn__EXPERIMENTAL(insertAfter);
+}
+/** Deletes every row the selection touches (Lexical handles a multi-cell selection). */
+export function $deleteTableRows() {
+    $deleteTableRow__EXPERIMENTAL();
+}
+/** Deletes every column the selection touches. */
+export function $deleteTableColumns() {
+    $deleteTableColumn__EXPERIMENTAL();
+}
+/** Removes the whole table the selection is in. */
+export function $deleteTable() {
+    const selection = $getSelection();
+    const anchor = $isRangeSelection(selection) || $isTableSelection(selection) ? selection.anchor.getNode() : null;
+    if (anchor)
+        $getTableNodeFromLexicalNodeOrThrow(anchor).remove();
+}

package/dist/theme/editor.css

@@ -51,6 +51,12 @@
   pointer-events: none;
 }
 
+/* pointer-events is inherited, so without this every menu, dropdown and dialog
+   portaled into the (pointer-transparent) anchor would be unclickable. */
+.likhari-portal-target > * {
+  pointer-events: auto;
+}
+
 .likhari-toolbar-group {
   display: flex;
   align-items: center;
@@ -253,6 +259,37 @@
   margin: 1.5em 0;
 }
 
+/* Tables — cell merge/split is deliberately out of scope for now (a flagged
+   open risk, lexical-editor-spec.md §12 item 3, needing its own scope
+   decision); TablePlugin is configured with hasCellMerge={false} to keep
+   every table a plain grid until that's resolved. */
+.likhari-table {
+  border-collapse: collapse;
+  margin: 1em 0;
+  width: 100%;
+}
+
+.likhari-table-row {
+  border-bottom: 1px solid var(--editor-line);
+}
+
+.likhari-table-cell {
+  border: 1px solid var(--editor-line);
+  padding: 6px 10px;
+  min-width: 72px;
+  vertical-align: top;
+}
+
+.likhari-table-cell-header {
+  background: var(--editor-paper-dim);
+  font-weight: 600;
+  text-align: start;
+}
+
+.likhari-table-cell-selected {
+  background: var(--editor-accent-soft);
+}
+
 /* Images — block-level figure; the caption is static text (edited in the
    image's dialog), and a selected image gets a corner resize handle. */
 .likhari-image-block {
@@ -370,3 +407,77 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Restore-draft banner: a strip between the toolbar and the canvas. Uses the
+   editor's own tokens, so it follows the accent color and dark mode. */
+.likhari-draft-banner {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  background: var(--editor-accent-soft);
+  border-bottom: 1px solid var(--editor-line);
+  color: var(--editor-ink);
+  font-size: 13px;
+}
+
+.likhari-draft-banner-message {
+  display: flex;
+  flex: 1 1 240px;
+  align-items: center;
+  gap: 8px;
+}
+
+.likhari-draft-banner-message svg {
+  flex-shrink: 0;
+  color: var(--editor-accent);
+}
+
+.likhari-draft-banner-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.likhari-draft-banner-button {
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--editor-line-strong);
+  border-radius: 6px;
+  background: var(--editor-paper);
+  color: var(--editor-ink);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.likhari-draft-banner-button:hover {
+  background: var(--editor-paper-dim);
+}
+
+.likhari-draft-banner-button[data-variant='primary'] {
+  border-color: var(--editor-accent);
+  background: var(--editor-accent);
+  color: var(--editor-paper);
+}
+
+.likhari-draft-banner-button[data-variant='primary']:hover {
+  filter: brightness(1.1);
+}
+
+.likhari-draft-banner-button[data-variant='danger'] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--editor-danger);
+}
+
+.likhari-draft-banner-button[data-variant='danger']:hover {
+  background: var(--editor-paper-dim);
+}
+
+.likhari-draft-banner-button:focus-visible {
+  outline: 2px solid var(--editor-accent);
+  outline-offset: 1px;
+}

package/dist/theme/editorTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/theme/editorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,kBA8BzB,CAAC"}
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/theme/editorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,kBAmCzB,CAAC"}

package/dist/theme/editorTheme.js

@@ -33,4 +33,9 @@ export const editorTheme = {
     },
     hr: 'likhari-hr',
     image: 'likhari-image-block',
+    table: 'likhari-table',
+    tableRow: 'likhari-table-row',
+    tableCell: 'likhari-table-cell',
+    tableCellHeader: 'likhari-table-cell-header',
+    tableCellSelected: 'likhari-table-cell-selected',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.8",
+  "version": "0.1.9-dev.96",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,7 @@
     "@lexical/react": "^0.20.0",
     "@lexical/rich-text": "^0.20.0",
     "@lexical/selection": "^0.20.0",
+    "@lexical/table": "^0.20.0",
     "@lexical/utils": "^0.20.0",
     "@inshapardaz/likhari-converters": "^0.1.0",
     "@inshapardaz/likhari-core": "^0.1.0",