@jxsuite/studio 0.37.1 → 1.1.0

package/src/grid/cell-popovers.ts

@@ -0,0 +1,108 @@
+/**
+ * Popover cell editors — media paths and relationship pickers.
+ *
+ * These kinds bypass Tabulator's in-cell editor session entirely: their pickers render Spectrum
+ * overlays OUTSIDE the cell, which Tabulator's range module treats as an outside interaction and
+ * blur-cancels. Instead, a dblclick on the cell opens an anchored layer popover that writes
+ * straight through the edit buffer via `commit`.
+ */
+import { html, nothing } from "lit-html";
+import { renderPopover } from "../ui/layers";
+import { renderMediaPicker } from "../ui/media-picker";
+import { listCollectionEntryIds } from "./sources/content-source";
+import { cellToText } from "./schema-columns";
+import type { GridCellValue, GridColumn } from "./grid-source";
+
+/** Whether this column edits through an anchored popover instead of an in-cell editor. */
+export function hasPopoverEditor(column: GridColumn): boolean {
+  return column.kind === "image" || column.kind === "reference";
+}
+
+/** Target content-type name of a relationship column (`#/content/<name>` on the schema). */
+export function referenceTargetType(column: GridColumn): string | null {
+  const ref = (column.schema as { $ref?: string } | undefined)?.$ref;
+  if (typeof ref !== "string" || !ref.startsWith("#/content/")) {
+    return null;
+  }
+  return ref.slice("#/content/".length);
+}
+
+export interface CellPopoverArgs {
+  /** Viewport rect of the cell the popover anchors to. */
+  anchor: { left: number; bottom: number };
+  column: GridColumn;
+  value: GridCellValue;
+  /** Write the new value through the edit buffer (called on every pick/commit). */
+  commit: (value: GridCellValue) => void;
+}
+
+function popoverShell(
+  column: GridColumn,
+  anchor: CellPopoverArgs["anchor"],
+  body: unknown,
+  dismiss: () => void,
+) {
+  const left = Math.max(4, Math.min(anchor.left, window.innerWidth - 340));
+  const top = Math.max(4, Math.min(anchor.bottom + 2, window.innerHeight - 200));
+  return html`<sp-popover
+    open
+    class="jx-grid-cell-popover"
+    style="position:fixed;z-index:10000;left:${left}px;top:${top}px"
+  >
+    <div class="jx-grid-cell-popover-body">
+      <div class="jx-grid-cell-popover-title">${column.title}</div>
+      ${body}
+      <div class="jx-grid-cell-popover-actions">
+        <sp-button size="s" variant="secondary" @click=${dismiss}>Done</sp-button>
+      </div>
+    </div>
+  </sp-popover>`;
+}
+
+/**
+ * Open the popover editor for an image or reference cell. Resolves target-entry ids up front for
+ * relationship columns so the picker renders complete.
+ */
+export async function openCellValuePopover(args: CellPopoverArgs): Promise<void> {
+  const { anchor, column, commit, value } = args;
+  const current = cellToText(value);
+
+  let body;
+  if (column.kind === "reference") {
+    const targetType = referenceTargetType(column);
+    const ids = targetType ? await listCollectionEntryIds(targetType) : [];
+    body = html`
+      ${targetType
+        ? html`<div class="jx-grid-cell-popover-hint">Entries of “${targetType}”</div>`
+        : nothing}
+      <select
+        class="jx-grid-select"
+        @change=${(e: Event) => {
+          const picked = (e.target as HTMLSelectElement).value;
+          commit(picked === "" ? null : picked);
+        }}
+      >
+        <option value="" ?selected=${current === ""}>—</option>
+        ${ids.map((id) => html`<option value=${id} ?selected=${id === current}>${id}</option>`)}
+      </select>
+      <input
+        class="jx-grid-input"
+        placeholder="Custom id…"
+        .value=${ids.includes(current) ? "" : current}
+        @change=${(e: Event) => {
+          const text = (e.target as HTMLInputElement).value.trim();
+          commit(text === "" ? null : text);
+        }}
+      />
+    `;
+  } else {
+    body = renderMediaPicker(column.field, current, (val) => {
+      commit(val === "" ? null : val);
+    });
+  }
+
+  const handle = renderPopover(
+    popoverShell(column, anchor, body, () => handle.dismiss()),
+    { dismissOnOutsideClick: true },
+  );
+}

package/src/grid/csv-codec.ts

@@ -0,0 +1,122 @@
+/**
+ * Positional CSV codec for the grid editor.
+ *
+ * RFC 4180 parse/serialize that keeps what the parser extension's object-row loader discards:
+ * column order, duplicate/empty headers, untrimmed whitespace, the file's dominant EOL, and whether
+ * it ended with a newline. Values stay raw strings — typing lives in schema-columns. Serialization
+ * is canonical (quotes only where required), so an edited file is re-emitted minimally quoted;
+ * untouched files are never rewritten.
+ */
+
+export interface CsvDocument {
+  headers: string[];
+  rows: string[][];
+  eol: "\n" | "\r\n";
+  trailingNewline: boolean;
+}
+
+/** Split CSV text into records of raw fields, honoring quotes across commas and newlines. */
+function splitRecords(text: string): string[][] {
+  const records: string[][] = [];
+  let fields: string[] = [];
+  let field = "";
+  let inQuotes = false;
+  let fieldStarted = false;
+
+  const endField = () => {
+    fields.push(field);
+    field = "";
+    fieldStarted = false;
+  };
+  const endRecord = () => {
+    endField();
+    // A completely empty line is structure, not data — skip it (common trailing-blank case).
+    if (fields.length === 1 && fields[0] === "") {
+      fields = [];
+      return;
+    }
+    records.push(fields);
+    fields = [];
+  };
+
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i += 1;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        field += ch;
+      }
+      continue;
+    }
+    if (ch === '"' && !fieldStarted) {
+      inQuotes = true;
+      fieldStarted = true;
+    } else if (ch === '"') {
+      // Quote inside an unquoted field — keep it literal (lenient, matches common parsers).
+      field += ch;
+    } else if (ch === ",") {
+      endField();
+    } else if (ch === "\n") {
+      endRecord();
+    } else if (ch === "\r") {
+      if (text[i + 1] === "\n") {
+        i += 1;
+      }
+      endRecord();
+    } else {
+      field += ch;
+      fieldStarted = true;
+    }
+  }
+  if (field !== "" || fields.length > 0) {
+    endRecord();
+  }
+  return records;
+}
+
+/**
+ * Parse CSV text into headers + positional rows. Rows are padded to the header width; when a data
+ * row is wider than the header row, headers are padded with "" so no column is lost.
+ */
+export function parseCsv(text: string): CsvDocument {
+  const crlf = (text.match(/\r\n/g) ?? []).length;
+  const bareLf = (text.match(/(?<!\r)\n/g) ?? []).length;
+  const eol: CsvDocument["eol"] = crlf > bareLf ? "\r\n" : "\n";
+  const trailingNewline = text.endsWith("\n");
+
+  const records = splitRecords(text);
+  const headers = records[0] ?? [];
+  const rows = records.slice(1);
+  const width = Math.max(headers.length, ...rows.map((r) => r.length), 0);
+  while (headers.length < width) {
+    headers.push("");
+  }
+  for (const row of rows) {
+    while (row.length < width) {
+      row.push("");
+    }
+  }
+  return { eol, headers, rows, trailingNewline };
+}
+
+/** Quote a field iff it contains a delimiter, quote, or newline; double embedded quotes. */
+function encodeField(value: string): string {
+  if (/[",\n\r]/.test(value)) {
+    return `"${value.replaceAll('"', '""')}"`;
+  }
+  return value;
+}
+
+/** Serialize back to CSV text, preserving the document's EOL flavor and trailing-newline flag. */
+export function serializeCsv(doc: CsvDocument): string {
+  const lines = [doc.headers, ...doc.rows].map((fields) =>
+    fields.map((field) => encodeField(field)).join(","),
+  );
+  return lines.join(doc.eol) + (doc.trailingNewline ? doc.eol : "");
+}