@jxsuite/studio 1.0.0 → 1.2.0

package/src/editor/inline-edit.ts

@@ -193,6 +193,15 @@ let endFn: (() => void) | null = null; // Function() called when editing stops
  */
 let _blurCloseSuspended = false;
 
+/**
+ * Plain (plaintext-only) session state — used for prop-bound text, where the committed value is a
+ * plain string (a directive attribute), so rich formatting, Enter-split, and the slash menu are all
+ * disabled: Enter commits, Escape restores `_plainOriginal` and commits unchanged (the host no-ops
+ * an unchanged prop value).
+ */
+let _plainMode = false;
+let _plainOriginal = "";
+
 /** Suspend blur-driven `stopEditing` (call while the parent toolbar/popover may steal focus). */
 export function suspendBlurClose() {
   _blurCloseSuspended = true;
@@ -252,6 +261,8 @@ export function isInlineElement(node: JxMutableNode, parentNode?: JxMutableNode)
  *   onInsert: (path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void;
  *   onEnd: () => void;
  * }} callbacks
+ * @param {{ plainText?: boolean }} [opts] - `plainText` runs a plaintext-only session (prop-bound
+ *   text: no rich formatting/split/slash; Enter commits, Escape cancels)
  */
 export function startEditing(
   el: HTMLElement,
@@ -270,6 +281,7 @@ export function startEditing(
     onInsert: (path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void;
     onEnd: () => void;
   },
+  opts?: { plainText?: boolean },
 ) {
   if (activeEl) {
     // Re-enter (e.g. after a split/insert re-render): tear the old session down WITHOUT firing the
@@ -283,9 +295,21 @@ export function startEditing(
   splitFn = callbacks.onSplit;
   insertFn = callbacks.onInsert;
   endFn = callbacks.onEnd;
+  _plainMode = opts?.plainText === true;
+  _plainOriginal = _plainMode ? (el.textContent ?? "") : "";
 
   // Enable editing
-  el.contentEditable = "true";
+  if (_plainMode) {
+    try {
+      el.contentEditable = "plaintext-only";
+    } catch {
+      // Engines without plaintext-only support throw on assignment; paste is already plain via
+      // HandlePaste, and the keydown plain branch inertifies the format shortcuts.
+      el.contentEditable = "true";
+    }
+  } else {
+    el.contentEditable = "true";
+  }
   el.style.pointerEvents = "auto";
   el.style.outline = "2px solid var(--accent, #4a9eff)";
   el.style.outlineOffset = "1px";
@@ -338,6 +362,8 @@ export function stopEditing(silent = false) {
   commitFn = null;
   splitFn = null;
   insertFn = null;
+  _plainMode = false;
+  _plainOriginal = "";
 
   if (silent) {
     endFn = null;
@@ -389,6 +415,30 @@ export function isSlashActive() {
 
 /** @param {KeyboardEvent} e */
 function handleKeydown(e: KeyboardEvent) {
+  if (_plainMode) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (activeEl) {
+        // Cancel: restore the original text; the commit posts the unchanged value (host no-ops).
+        activeEl.textContent = _plainOriginal;
+      }
+      stopEditing();
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      stopEditing();
+      return;
+    }
+    // Inertify the browser's native rich shortcuts for the contentEditable="true" fallback.
+    if ((e.ctrlKey || e.metaKey) && ["b", "i", "u", "`"].includes(e.key)) {
+      e.preventDefault();
+    }
+    return;
+  }
+
   if (e.key === "Escape") {
     e.preventDefault();
     e.stopPropagation();
@@ -551,6 +601,13 @@ function commitChanges() {
     return;
   }
 
+  if (_plainMode) {
+    // A prop value is a plain single-line string (a directive attribute) — flatten any newline
+    // That survived plaintext editing and skip the rich DOM→Jx serialization entirely.
+    commitFn(activePath, null, (activeEl.textContent ?? "").replaceAll("\n", " "));
+    return;
+  }
+
   normalizeInlineContent(activeEl);
   const result = elementToJx(activeEl);
   commitFn(activePath, result.children ?? null, result.textContent ?? null);

package/src/editor/shortcuts.ts

@@ -16,9 +16,11 @@ import {
   undo as tabUndo,
   transactDoc,
 } from "../tabs/transact";
+import { applyEditZoom, requestEditZoom, setEditZoom } from "../canvas/canvas-utils";
 import { isEditing, stopEditing } from "./inline-edit";
 import { copyNode, cutNode, pasteNode } from "./context-menu";
 import { openQuickSearch } from "../panels/quick-search";
+import { shouldWarnOnClose } from "../panels/tab-strip";
 import { showConfirmDialog } from "../ui/layers";
 import { rectOf } from "../utils/geometry";
 
@@ -33,7 +35,6 @@ import type { JxPath } from "../state";
  *   panY: number;
  *   setPan: (x: number, y: number) => void;
  *   applyTransform: () => void;
- *   positionZoomIndicator: () => void;
  *   saveFile: () => void;
  *   openProject: () => void;
  * }} getContext
@@ -45,7 +46,6 @@ export function initShortcuts(
     panY: number;
     setPan: (x: number, y: number) => void;
     applyTransform: () => void;
-    positionZoomIndicator: () => void;
     saveFile: () => void;
     openProject: () => void;
   },
@@ -55,10 +55,18 @@ export function initShortcuts(
     "wheel",
     (e: WheelEvent) => {
       const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
-      // Edit (content) mode: scroll the edit-mode container ourselves. The canvas iframe is sized to
-      // Its content (no internal scroll) and a cross-origin OOPIF doesn't bubble wheel to the parent,
-      // So the wheel reaches us forwarded (or over the canvas chrome) but never triggers native scroll.
+      // Edit (content) mode: ctrl/cmd+wheel drives the content zoom (browser-page-zoom semantics —
+      // The footprint stays fixed, content reflows); plain wheel scrolls the edit-mode container
+      // Ourselves. The canvas iframe is sized to its content (no internal scroll) and a cross-origin
+      // OOPIF doesn't bubble wheel to the parent, so the wheel reaches us forwarded (or over the
+      // Canvas chrome) but never triggers native scroll.
       if (canvasMode === "edit") {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          const editZoom = activeTab.value?.session.ui.editZoom ?? 1;
+          requestEditZoom(editZoom * (1 + -e.deltaY * 0.005));
+          return;
+        }
         const sc = canvasWrap.querySelector<HTMLElement>(".content-edit-canvas");
         if (sc) {
           e.preventDefault();
@@ -125,8 +133,13 @@ export function initShortcuts(
     canvasWrap.addEventListener("pointerup", onUp);
   });
 
-  // Reposition zoom indicator on resize
-  window.addEventListener("resize", () => getContext().positionZoomIndicator());
+  // Re-fit the edit-mode content zoom on resize: its layout width derives from the LIVE column
+  // Width, which tracks the studio window.
+  window.addEventListener("resize", () => {
+    if (getContext().canvasMode === "edit") {
+      applyEditZoom();
+    }
+  });
 
   document.addEventListener("keydown", (e) => {
     const { canvasMode, setPan, applyTransform, saveFile, openProject } = getContext();
@@ -161,12 +174,17 @@ export function initShortcuts(
       return;
     }
     if (mod) {
+      // Grid mode: copy/paste/duplicate/zoom belong to the grid engine (Tabulator clipboard
+      // Needs the native events); only tab/app-level chords pass through.
+      if (canvasMode === "grid" && !["o", "p", "s", "w", "z", "Z"].includes(e.key)) {
+        return;
+      }
       switch (e.key) {
         case "w": {
           e.preventDefault();
           if (workspace.activeTabId && workspace.tabOrder.length > 1) {
             const tabToClose = workspace.tabs.get(workspace.activeTabId);
-            if (tabToClose?.doc.dirty) {
+            if (tabToClose && shouldWarnOnClose(tabToClose)) {
               const name = tabToClose.documentPath?.split("/").pop() || "Untitled";
               void showConfirmDialog(
                 "Unsaved Changes",
@@ -198,7 +216,9 @@ export function initShortcuts(
           saveFile();
           break;
         }
-        case "z": {
+        // With Shift held e.key is "Z", so redo needs the uppercase case too.
+        case "z":
+        case "Z": {
           e.preventDefault();
           if (e.shiftKey) {
             tabRedo(activeTab.value!);
@@ -231,10 +251,11 @@ export function initShortcuts(
           break;
         }
         case "0": {
+          e.preventDefault();
           if (canvasMode === "edit") {
+            setEditZoom(1);
             break;
           }
-          e.preventDefault();
           activeTab.value!.session.ui.zoom = 1;
           setPan(16, 16);
           applyTransform();
@@ -242,19 +263,21 @@ export function initShortcuts(
         }
         case "=":
         case "+": {
+          e.preventDefault();
           if (canvasMode === "edit") {
+            setEditZoom((tab?.session.ui.editZoom ?? 1) * 1.2);
             break;
           }
-          e.preventDefault();
           activeTab.value!.session.ui.zoom = Math.min(5, (tab?.session.ui.zoom ?? 1) * 1.2);
           applyTransform();
           break;
         }
         case "-": {
+          e.preventDefault();
           if (canvasMode === "edit") {
+            setEditZoom((tab?.session.ui.editZoom ?? 1) / 1.2);
             break;
           }
-          e.preventDefault();
           activeTab.value!.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
           applyTransform();
           break;
@@ -266,6 +289,12 @@ export function initShortcuts(
       return;
     }
 
+    // Grid mode: Delete/Escape/Enter/arrows drive the grid's own range clearing and cell
+    // Navigation — never the canvas document.
+    if (canvasMode === "grid") {
+      return;
+    }
+
     switch (e.key) {
       case "Delete":
       case "Backspace": {

package/src/files/file-ops.ts

@@ -12,6 +12,7 @@ import { errorMessage } from "@jxsuite/schema/parse";
 import { statusMessage } from "../panels/statusbar";
 import { validateComponentSlots } from "../services/cem-export";
 import { getPlatform } from "../platform";
+import { getGridController } from "../grid/grid-controller";
 import { activeTab, openTab } from "../workspace/workspace";
 import { collabSave } from "../collab/collab-session";
 import { isEditing, stopEditing } from "../editor/inline-edit";
@@ -162,6 +163,12 @@ export async function saveFile() {
   if (!tab) {
     return;
   }
+  // Grid tabs batch-save through their controller (per-source commit semantics, not a doc write).
+  const grid = getGridController(tab);
+  if (grid) {
+    await grid.save();
+    return;
+  }
   try {
     // A co-edited tab persists through its provider (a direct file write would reset the room).
     if (await collabSave(tab)) {
@@ -264,6 +271,13 @@ export async function exportFile() {
  * @returns {Promise<string>}
  */
 export async function serializeDocument(tab: Tab): Promise<string> {
+  // Grid tabs serialize through their source (pending edits included) — e.g. the Monaco source
+  // View of a CSV grid tab shows the live file text.
+  const grid = getGridController(tab);
+  const gridText = grid?.serializeForSource();
+  if (gridText) {
+    return gridText;
+  }
   await loadFormats();
   const sourceFormat = formatByName(tab.doc.sourceFormat);
   if (sourceFormat?.capabilities.serialize) {

package/src/files/files.ts

@@ -27,7 +27,16 @@ import {
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { activateTab, openTab, renameTab, replaceAllTabs, workspace } from "../workspace/workspace";
+import {
+  activateTab,
+  openTab,
+  renameTab,
+  replaceAllTabs,
+  setWorkspaceProject,
+  workspace,
+} from "../workspace/workspace";
+import { openCollectionGrid, openCsvGridTab, openPagesGrid } from "../grid/grid-open";
+import { collectionDirs } from "../grid/sources/content-source";
 import { parseSourceForPath, serializeDocument } from "./file-ops";
 import {
   documentExtensions,
@@ -98,6 +107,11 @@ export async function loadProject() {
       searchQuery: "",
       selectedPath: null,
     });
+    // Only a site project counts as an open project for the workspace (a bare monorepo root keeps
+    // The assistant in bootstrap mode).
+    if (info.isSiteProject) {
+      setWorkspaceProject(meta.root || ".", info.projectConfig || null);
+    }
 
     if (info.isSiteProject) {
       addRecentProject(requireProjectState().name, meta.root);
@@ -160,6 +174,7 @@ export async function openProject({
       searchQuery: "",
       selectedPath: null,
     });
+    setWorkspaceProject(handle.root, config);
 
     await autoSyncProjectOnOpen();
     await ensureDependenciesInstalled();
@@ -719,6 +734,26 @@ function showFileContextMenu(
       action: () => createNewFile(entry.path, ctx.renderLeftPanel),
       label: "New File\u2026",
     });
+    // Directories backing a content collection get a bulk-edit affordance.
+    const collection = collectionDirs().find(
+      ({ dir }) => entry.path === dir || entry.path.endsWith(`/${dir}`),
+    );
+    if (collection) {
+      items.push({
+        action: () => {
+          openCollectionGrid(collection.name);
+        },
+        label: "Edit Collection in Grid",
+      });
+    }
+    if (entry.path === "pages" || entry.path.endsWith("/pages")) {
+      items.push({
+        action: () => {
+          openPagesGrid();
+        },
+        label: "Edit Pages in Grid",
+      });
+    }
   }
   items.push(
     { label: "\u2014" },
@@ -1032,6 +1067,23 @@ export async function openFileInTab(path: string) {
     }
   }
 
+  // CSV files open in the grid editor (source mode remains as the raw-text alternate).
+  if (path.toLowerCase().endsWith(".csv")) {
+    try {
+      await openCsvGridTab(path);
+      requireProjectState().selectedPath = path;
+      trackRecentFile({
+        name: path.split("/").pop() || path,
+        path,
+        root: requireProjectState().projectRoot,
+      });
+      statusMessage(`Opened ${path.split("/").pop()}`);
+    } catch (error) {
+      statusMessage(`Error: ${errorMessage(error)}`);
+    }
+    return;
+  }
+
   const platform = getPlatform();
   try {
     const content = await platform.readFile(path);

package/src/grid/cell-editors.ts

@@ -0,0 +1,288 @@
+/**
+ * Grid cell editors and formatters — the lit → Tabulator bridge.
+ *
+ * Tabulator's editor contract is `(cell, onRendered, success, cancel) => element`: it parents the
+ * returned element into the cell and expects `success(value)`/`cancel()` calls. Each factory here
+ * lit-renders a control into a host element supplied by grid-view's single sanctioned element
+ * factory — this module itself never creates DOM imperatively. Formatters likewise return a
+ * rendered element (never an HTML string, which Tabulator would inject as innerHTML).
+ *
+ * Native inputs (the data-grid precedent) rather than Spectrum controls: cells are 24px
+ * micro-controls where SWC shadow focus handling fights Tabulator's editor lifecycle. Rich popover
+ * editors (media, relationship pickers) layer on in a later phase.
+ */
+import { html, render } from "lit-html";
+import { cellToText, coerceCellInput } from "./schema-columns";
+import type { GridCellValue, GridColumn } from "./grid-source";
+
+/** The subset of Tabulator's CellComponent the editors/formatters touch. */
+export interface CellLike {
+  getValue: () => unknown;
+}
+
+export type CellEditorFn = (
+  cell: CellLike,
+  onRendered: (fn: () => void) => void,
+  success: (value: unknown) => void,
+  cancel: () => void,
+) => HTMLElement;
+
+export type CellFormatterFn = (cell: CellLike) => HTMLElement;
+
+/** Detached-host factory — grid-view owns the one sanctioned document.createElement. */
+export type HostFactory = (className: string) => HTMLElement;
+
+/** Commit/cancel wiring shared by every text-ish editor. */
+function inputEditor(makeHost: HostFactory, column: GridColumn, inputType: string): CellEditorFn {
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor");
+    let done = false;
+    const commit = (raw: string) => {
+      if (!done) {
+        done = true;
+        success(coerceCellInput(raw, column));
+      }
+    };
+    const abort = () => {
+      if (!done) {
+        done = true;
+        cancel();
+      }
+    };
+    const initial =
+      column.kind === "date"
+        ? cellToText(cell.getValue() as GridCellValue).slice(0, 10)
+        : cellToText(cell.getValue() as GridCellValue);
+    render(
+      html`<input
+        class="jx-grid-input"
+        type=${inputType}
+        .value=${initial}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === "Enter") {
+            commit((e.target as HTMLInputElement).value);
+          } else if (e.key === "Escape") {
+            abort();
+          }
+        }}
+        @blur=${(e: Event) => commit((e.target as HTMLInputElement).value)}
+      />`,
+      host,
+    );
+    onRendered(() => {
+      const input = host.querySelector("input");
+      input?.focus();
+      input?.select();
+    });
+    return host;
+  };
+}
+
+function checkboxEditor(makeHost: HostFactory): CellEditorFn {
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor");
+    let done = false;
+    render(
+      html`<input
+        class="jx-grid-checkbox"
+        type="checkbox"
+        .checked=${cell.getValue() === true}
+        @change=${(e: Event) => {
+          if (!done) {
+            done = true;
+            success((e.target as HTMLInputElement).checked);
+          }
+        }}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === "Escape" && !done) {
+            done = true;
+            cancel();
+          } else if (e.key === "Enter" && !done) {
+            done = true;
+            success((e.target as HTMLInputElement).checked);
+          }
+        }}
+        @blur=${(e: Event) => {
+          if (!done) {
+            done = true;
+            success((e.target as HTMLInputElement).checked);
+          }
+        }}
+      />`,
+      host,
+    );
+    onRendered(() => host.querySelector("input")?.focus());
+    return host;
+  };
+}
+
+function selectEditor(makeHost: HostFactory, column: GridColumn): CellEditorFn {
+  const options = Array.isArray(column.schema?.enum)
+    ? (column.schema.enum as unknown[]).map(String)
+    : [];
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor");
+    let done = false;
+    const current = cellToText(cell.getValue() as GridCellValue);
+    render(
+      html`<select
+        class="jx-grid-select"
+        @change=${(e: Event) => {
+          if (!done) {
+            done = true;
+            const { value } = e.target as HTMLSelectElement;
+            success(value === "" ? null : value);
+          }
+        }}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === "Escape" && !done) {
+            done = true;
+            cancel();
+          }
+        }}
+        @blur=${() => {
+          if (!done) {
+            done = true;
+            cancel();
+          }
+        }}
+      >
+        <option value="" ?selected=${current === ""}>—</option>
+        ${options.map(
+          (option) =>
+            html`<option value=${option} ?selected=${option === current}>${option}</option>`,
+        )}
+      </select>`,
+      host,
+    );
+    onRendered(() => host.querySelector("select")?.focus());
+    return host;
+  };
+}
+
+/** Pill/chip editor for string arrays: Enter/comma adds, Backspace pops, × removes. */
+function pillEditor(makeHost: HostFactory, column: GridColumn): CellEditorFn {
+  return (cell, onRendered, success, cancel) => {
+    const host = makeHost("jx-grid-editor jx-grid-pill-editor");
+    const initial = coerceCellInput(cell.getValue(), column);
+    const chips: string[] = Array.isArray(initial) ? [...initial] : [];
+    let done = false;
+    const finish = (committed: string[] | null) => {
+      if (done) {
+        return;
+      }
+      done = true;
+      if (committed) {
+        success(committed);
+      } else {
+        cancel();
+      }
+    };
+    const inputEl = () => host.querySelector("input");
+    const addFromInput = (input: HTMLInputElement): boolean => {
+      const text = input.value.trim();
+      if (text === "") {
+        return false;
+      }
+      chips.push(text);
+      input.value = "";
+      return true;
+    };
+    const doRender = () => {
+      render(
+        html`<span class="jx-grid-pills">
+          ${chips.map(
+            (chip, i) => html`<span class="jx-grid-chip"
+              >${chip}<button
+                class="jx-grid-chip-x"
+                title="Remove"
+                @mousedown=${(e: Event) => e.preventDefault()}
+                @click=${() => {
+                  chips.splice(i, 1);
+                  doRender();
+                  inputEl()?.focus();
+                }}
+              >
+                ×
+              </button></span
+            >`,
+          )}
+          <input
+            class="jx-grid-pill-input"
+            placeholder=${chips.length === 0 ? "add…" : ""}
+            @keydown=${(e: KeyboardEvent) => {
+              const input = e.target as HTMLInputElement;
+              if (e.key === "Enter" || e.key === ",") {
+                e.preventDefault();
+                if (addFromInput(input)) {
+                  doRender();
+                  inputEl()?.focus();
+                } else if (e.key === "Enter") {
+                  finish([...chips]);
+                }
+              } else if (e.key === "Backspace" && input.value === "" && chips.length > 0) {
+                chips.pop();
+                doRender();
+                inputEl()?.focus();
+              } else if (e.key === "Escape") {
+                finish(null);
+              }
+            }}
+            @blur=${(e: Event) => {
+              addFromInput(e.target as HTMLInputElement);
+              finish([...chips]);
+            }}
+          />
+        </span>`,
+        host,
+      );
+    };
+    doRender();
+    onRendered(() => inputEl()?.focus());
+    return host;
+  };
+}
+
+/** Editor factory for a column; undefined means the column is not editable in place. */
+export function editorForColumn(
+  column: GridColumn,
+  makeHost: HostFactory,
+): CellEditorFn | undefined {
+  if (column.kind === "readonly" || (!column.editable && !column.insertOnly)) {
+    return undefined;
+  }
+  switch (column.kind) {
+    case "boolean": {
+      return checkboxEditor(makeHost);
+    }
+    case "enum": {
+      return selectEditor(makeHost, column);
+    }
+    case "date": {
+      return inputEditor(makeHost, column, "date");
+    }
+    case "array": {
+      return pillEditor(makeHost, column);
+    }
+    default: {
+      // String/text/number/image/reference — text input + column-typed coercion.
+      return inputEditor(makeHost, column, "text");
+    }
+  }
+}
+
+/** Formatter factory — plain-text projection rendered as a real element (innerHTML-safe). */
+export function formatterForColumn(column: GridColumn, makeHost: HostFactory): CellFormatterFn {
+  return (cell) => {
+    const value = cell.getValue() as GridCellValue;
+    const host = makeHost(`jx-grid-cell-content jx-grid-kind-${column.kind}`);
+    if (column.kind === "boolean") {
+      render(html`${value === true ? "✓" : ""}`, host);
+    } else if (column.kind === "array" && Array.isArray(value)) {
+      render(html`${value.map((item) => html`<span class="jx-grid-chip">${item}</span>`)}`, host);
+    } else {
+      render(html`${cellToText(value)}`, host);
+    }
+    return host;
+  };
+}