makersclaw 0.2.0 → 0.3.1

package/registry/blocks/json-editor/json-editor.jsx

@@ -0,0 +1,305 @@
+"use client";
+
+// JsonEditor — a JSON value, edited as a tree of rows or as text, checked
+// as it changes. Built on code-editor (the Code view is a CodeEditor in
+// JSON mode) and never on CodeMirror directly.
+//
+// The value is the truth: a plain JSON value in, a plain JSON value out on
+// every valid edit. The text is what the Code view shows; while it does
+// not parse, the last valid value stands, the Tree view waits, and the
+// status line says what is wrong and where (click it to go there).
+import { useEffect, useRef, useState } from "react";
+import { Button, Empty, Menu, Notice, ToggleGroup, cx, toast } from "../../ui";
+import { CodeEditor, checkJson, formatJson, stringifyJson, useCodeEditor } from "../code-editor";
+import { JsonTree } from "./json-tree";
+import { allContainers, expandedTo, summary, typeOf } from "./tree";
+
+const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+const px = (v) => (typeof v === "number" ? `${v}px` : v);
+
+export function JsonEditor({
+  value,
+  defaultValue,
+  onChange,
+  onSave,
+  view: viewProp,
+  defaultView = "tree",
+  onViewChange,
+  readOnly = false,
+  title,
+  expandDepth = 2,
+  height,
+  maxHeight = 480,
+  placeholder = 'Paste or type JSON — {"name": "Ada"}',
+  label,
+  className,
+}) {
+  const initial = value !== undefined ? value : defaultValue;
+  const [data, setData] = useState(initial);
+  const [text, setText] = useState(() => stringifyJson(initial));
+  const [ownView, setOwnView] = useState(defaultView);
+  const view = viewProp ?? ownView;
+  const [open, setOpen] = useState(() => expandedTo(initial, expandDepth));
+  const [baseline, setBaseline] = useState(() => JSON.stringify(initial ?? null));
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState(null);
+  const [savedAt, setSavedAt] = useState(null);
+  const ed = useCodeEditor();
+
+  const check = checkJson(text, { allowEmpty: true });
+  const empty = !text.trim();
+  const valid = check.ok;
+  const dirty = !empty && valid && JSON.stringify(data ?? null) !== baseline;
+
+  const setView = (v) => {
+    if (viewProp === undefined) setOwnView(v);
+    onViewChange?.(v);
+  };
+
+  // Controlled: a value that is not ours is another record — load it.
+  const last = useRef(initial);
+  last.current = data;
+  const valueKey = value === undefined ? undefined : JSON.stringify(value);
+  useEffect(() => {
+    if (value === undefined || same(value, last.current)) return;
+    setData(value);
+    setText(stringifyJson(value));
+    setOpen(expandedTo(value, expandDepth));
+    setBaseline(JSON.stringify(value ?? null));
+    setSaveError(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueKey]);
+
+  const emit = (next) => {
+    setData(next);
+    setSavedAt(null);
+    onChange?.(next);
+  };
+
+  // The Code view typed: keep the text; a text that parses is the value.
+  const onText = (t) => {
+    setText(t);
+    const r = checkJson(t, { allowEmpty: true });
+    if (r.ok && !r.empty && !same(r.value, data)) emit(r.value);
+  };
+
+  // The Tree view edited: the value, then its text.
+  const onTreeEdit = (next, meta) => {
+    emit(next);
+    setText(stringifyJson(next));
+    if (meta?.undo) toast(meta.message, { action: { label: "Undo", onClick: meta.undo } });
+  };
+
+  const start = (v) => {
+    emit(v);
+    setText(stringifyJson(v));
+    setView("tree");
+  };
+
+  async function save() {
+    if (!onSave || !dirty || saving) return;
+    const snapshot = data;
+    const before = baseline;
+    // Optimistic: counted as saved at once; a refusal puts "unsaved" back.
+    setBaseline(JSON.stringify(snapshot ?? null));
+    setSaving(true);
+    setSaveError(null);
+    let r;
+    try {
+      r = await onSave(snapshot);
+    } catch (e) {
+      r = { ok: false, error: e?.message };
+    }
+    setSaving(false);
+    if (r && r.ok !== false) {
+      setSavedAt(Date.now());
+      return;
+    }
+    setBaseline(before);
+    setSaveError(r?.error || "The save did not go through.");
+  }
+
+  const format = () => {
+    const out = formatJson(text);
+    if (out != null && out !== text) setText(out);
+  };
+
+  async function copyText(t, what) {
+    try {
+      await navigator.clipboard.writeText(t);
+      toast.success(`Copied ${what}`);
+    } catch {
+      toast.error("Could not reach the clipboard");
+    }
+  }
+
+  const goToError = () => {
+    if (valid) return;
+    setView("code");
+    const { line, col } = check.error;
+    // The editor mounts on the switch; go there once it has.
+    setTimeout(() => ed.current?.goTo(line, col), 0);
+  };
+
+  const onKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s" && onSave) {
+      e.preventDefault();
+      save();
+    }
+  };
+
+  const box = height != null ? { height: px(height) } : { maxHeight: px(maxHeight) };
+  const container = data !== null && typeof data === "object";
+
+  const moreItems = [
+    { label: "Copy JSON", icon: "copy", disabled: !valid || empty, onSelect: () => copyText(formatJson(text) ?? text, "the JSON") },
+    { label: "Copy on one line", icon: "copy", disabled: !valid || empty, onSelect: () => copyText(formatJson(text, { indent: 0 }) ?? text, "the JSON on one line") },
+    view === "tree" && container && { type: "separator" },
+    view === "tree" && container && { label: "Expand all", icon: "maximize", onSelect: () => setOpen(allContainers(data)) },
+    view === "tree" && container && { label: "Collapse all", icon: "minus", onSelect: () => setOpen(new Set()) },
+    view === "code" && !readOnly && { type: "separator" },
+    view === "code" && !readOnly && { label: "Format", icon: "wand", shortcut: "⇧⌥F", disabled: !valid || empty, onSelect: format },
+    view === "code" && !readOnly && { label: "Put on one line", icon: "minus", disabled: !valid || empty, onSelect: () => setText(formatJson(text, { indent: 0 }) ?? text) },
+  ];
+
+  return (
+    // raw: a plain frame that hears Cmd/Ctrl+S from either view; no control of its own.
+    <div className={cx("flex min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-card text-card-foreground", className)} onKeyDown={onKeyDown}>
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border py-2 ps-4 pe-2">
+        <div className="me-auto min-w-0 py-0.5">
+          {title ? <p className="truncate text-sm font-medium">{title}</p> : null}
+          <Status
+            empty={empty}
+            check={check}
+            data={data}
+            dirty={dirty}
+            saving={saving}
+            savedAt={savedAt}
+            onSave={onSave}
+            onError={goToError}
+          />
+        </div>
+        <div className="flex items-center gap-1">
+          <ToggleGroup
+            size="sm"
+            aria-label="View"
+            value={view}
+            onChange={setView}
+            items={[
+              { value: "tree", label: "Tree", icon: "list", disabled: !valid && !empty },
+              { value: "code", label: "Code", icon: "code" },
+            ]}
+          />
+          {view === "code" && !readOnly ? (
+            <Button size="sm" variant="quiet" icon="wand" onClick={format} disabled={!valid || empty} className="max-sm:hidden">
+              Format
+            </Button>
+          ) : null}
+          <Menu items={moreItems} label="More JSON actions" />
+          {onSave && !readOnly ? (
+            <Button size="sm" variant="primary" onClick={save} disabled={!dirty} loading={saving} className="ms-1">
+              Save
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      {saveError ? (
+        <Notice
+          tone="danger"
+          title="Your changes were not saved"
+          className="m-3 mb-0"
+          onDismiss={() => setSaveError(null)}
+          action={
+            <Button size="sm" onClick={save}>
+              Try again
+            </Button>
+          }
+        >
+          {saveError} They are still here.
+        </Notice>
+      ) : null}
+
+      {view === "code" ? (
+        <CodeEditor
+          language="json"
+          value={text}
+          onChange={onText}
+          onSave={onSave ? () => save() : undefined}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          height={height}
+          minHeight={height != null ? undefined : 160}
+          maxHeight={maxHeight}
+          editorRef={ed}
+          frameless
+          label={label || title || "JSON"}
+          autoFocus={empty}
+        />
+      ) : empty ? (
+        <div className="p-3">
+          <Empty
+            icon="code"
+            title="No JSON yet"
+            body="Start with an empty object or list and add to it here, or paste JSON you already have."
+            action={
+              readOnly ? null : (
+                <div className="flex flex-wrap justify-center gap-2">
+                  <Button size="sm" variant="primary" icon="plus" onClick={() => start({})}>
+                    New object
+                  </Button>
+                  <Button size="sm" icon="list" onClick={() => start([])}>
+                    New list
+                  </Button>
+                  <Button size="sm" variant="quiet" icon="code" onClick={() => setView("code")}>
+                    Paste JSON
+                  </Button>
+                </div>
+              )
+            }
+          />
+        </div>
+      ) : (
+        <JsonTree
+          value={data}
+          onEdit={onTreeEdit}
+          open={open}
+          setOpen={setOpen}
+          readOnly={readOnly}
+          onNotice={(m) => toast(m)}
+          label={label || title || "JSON"}
+          style={box}
+        />
+      )}
+    </div>
+  );
+}
+
+/** The line under the title: what the JSON is, or what is wrong with it. */
+function Status({ empty, check, data, dirty, saving, savedAt, onSave, onError }) {
+  if (empty) return <p className="text-xs text-muted-foreground">Empty</p>;
+  if (!check.ok) {
+    const { line, message } = check.error;
+    return (
+      // raw: the error as a link to its line — a Button's link variant has no danger tone.
+      <button
+        type="button"
+        onClick={onError}
+        className="flex max-w-full items-center gap-1.5 rounded-sm text-start text-xs text-destructive outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-destructive" />
+        <span className="truncate">
+          Line {line}: {message}
+        </span>
+      </button>
+    );
+  }
+  const t = typeOf(data);
+  const shape = t === "object" || t === "array" ? summary(data) : t === "string" ? "text" : t;
+  return (
+    <p className="truncate text-xs text-muted-foreground" aria-live="polite">
+      Valid JSON · {shape}
+      {onSave ? (saving ? " · Saving…" : dirty ? " · Unsaved changes" : savedAt ? " · Saved" : "") : ""}
+    </p>
+  );
+}