makersclaw 0.2.0 → 0.3.0

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

@@ -0,0 +1,534 @@
+"use client";
+
+// CodeEditor — CodeMirror 6, in the workspace theme, behind one set of
+// props. SQL (with the database's tables for autocomplete), JSON (checked
+// as you type) or plain text; line numbers, problems drawn on the text,
+// find and replace, and a run hook on Cmd/Ctrl+Enter.
+//
+// Client only, one static bundle. CodeMirror needs the DOM, and the app's
+// check refuses import() (so no next/dynamic): the modules load with the
+// page, and the editor itself is created only after the first effect (the
+// mount guard). Until then — on the server and in the first client paint —
+// the same box shows the text with its line numbers, so nothing jumps.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Icon, KbdGroup, cx } from "../../ui";
+import {
+  Compartment,
+  Decoration,
+  EditorSelection,
+  EditorState,
+  EditorView,
+  MSSQL,
+  MariaSQL,
+  MySQL,
+  PostgreSQL,
+  Prec,
+  SQLite,
+  StandardSQL,
+  StateEffect,
+  StateField,
+  autocompletion,
+  bracketMatching,
+  closeBrackets,
+  closeBracketsKeymap,
+  completeFromList,
+  completionKeymap,
+  crosshairCursor,
+  defaultKeymap,
+  diagnosticCount,
+  drawSelection,
+  dropCursor,
+  foldGutter,
+  foldKeymap,
+  forceLinting,
+  highlightActiveLineGutter,
+  highlightSelectionMatches,
+  highlightSpecialChars,
+  history,
+  historyKeymap,
+  indentOnInput,
+  indentUnit,
+  indentWithTab,
+  json,
+  keymap,
+  lineNumbers,
+  lintGutter,
+  lintKeymap,
+  linter,
+  nextDiagnostic,
+  placeholder as placeholderExt,
+  rectangularSelection,
+  searchKeymap,
+  sql,
+  syntaxHighlighting,
+} from "./codemirror";
+import { editorTheme, highlightStyle } from "./theme";
+import { lineCol, normalizeDiagnostics, offsetOf } from "./text";
+import { sqlNamespace, statementAt } from "./sql";
+import { checkJson, formatJson } from "./json";
+
+/** The modes, and the name the footer shows for each. */
+export const LANGUAGES = { sql: "SQL", json: "JSON", text: "Plain text" };
+
+/** SQL dialects: keywords, quoting and functions differ between them. */
+export const SQL_DIALECTS = { postgres: PostgreSQL, mysql: MySQL, mariadb: MariaSQL, sqlite: SQLite, mssql: MSSQL, standard: StandardSQL };
+
+/** A ref for the editor's handle: `const ed = useCodeEditor()`, then
+ *  `<CodeEditor editorRef={ed} />` and `ed.current?.insert("now()")`. */
+export function useCodeEditor() {
+  return useRef(null);
+}
+
+const px = (v) => (typeof v === "number" ? `${v}px` : v);
+
+// The frame, the same for the placeholder and the live editor. Phones get
+// 16px text: iOS zooms into anything smaller when it takes focus.
+const FRAME =
+  "relative flex min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-card text-card-foreground " +
+  "[--code-editor-size:16px] sm:[--code-editor-size:13px] transition-[border-color,box-shadow] duration-150 motion-reduce:transition-none " +
+  "focus-within:border-ring/60 focus-within:ring-2 focus-within:ring-ring/15";
+// CodeMirror's floating panels live inside the editor; they get the kit's shadow.
+const FLOATING = "[&_.cm-tooltip]:shadow-lg! [&_.cm-tooltip]:text-sm motion-reduce:[&_*]:transition-none!";
+
+export function CodeEditor(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return <CodePlaceholder {...props} />;
+  return <LiveEditor {...props} />;
+}
+
+// The placeholder's line number, as wide as CodeMirror's gutter (its lint
+// dot column is the 14px the text is pushed by, beside its own 12px).
+const NUMBER = "w-[54px] shrink-0 pe-1 text-right tabular-nums text-muted-foreground opacity-70 select-none";
+
+/** What the server renders (and the first client paint): the text with
+ *  its line numbers, in the editor's box. Not editable, not focusable. */
+function CodePlaceholder({ value, defaultValue, placeholder, height, minHeight = 120, maxHeight = 480, lineNumbers: numbers = true, footer = true, language = "text", onRun, className, frameless = false }) {
+  const text = String(value ?? defaultValue ?? "");
+  const lines = text ? text.split("\n").slice(0, 400) : [];
+  return (
+    <div className={cx(FRAME, frameless && "rounded-none border-0 bg-transparent focus-within:ring-0", className)} aria-busy="true">
+      <div
+        className="min-h-0 flex-1 overflow-hidden py-2.5 font-mono text-[length:var(--code-editor-size)] leading-[1.65]"
+        style={height != null ? { height: px(height) } : { minHeight: px(minHeight), maxHeight: px(maxHeight) }}
+      >
+        {lines.length ? (
+          lines.map((line, i) => (
+            <div key={i} className="flex">
+              {numbers ? <span className={NUMBER}>{i + 1}</span> : null}
+              <span className="ps-[26px] pe-4 whitespace-pre">{line || " "}</span>
+            </div>
+          ))
+        ) : (
+          <div className="flex">
+            {numbers ? <span className={NUMBER}>1</span> : null}
+            <span className="ps-[26px] text-muted-foreground">{placeholder || " "}</span>
+          </div>
+        )}
+      </div>
+      {footer ? <StatusBar language={language} line={1} col={1} onRun={onRun ? () => {} : null} idle /> : null}
+    </div>
+  );
+}
+
+// Check again now: a prop the linter reads changed (outside problems, the
+// mode, the lint function). The linter re-runs on edits by itself; for
+// anything else it needs this effect, then forceLinting to skip its delay.
+const relint = StateEffect.define();
+const wantsRelint = (u) => u.transactions.some((tr) => tr.effects.some((e) => e.is(relint)));
+function lintNow(view) {
+  if (!view) return;
+  view.dispatch({ effects: relint.of(null) });
+  forceLinting(view);
+}
+
+// The statement that ran, lit for a moment.
+const flashEffect = StateEffect.define();
+const flashMark = Decoration.mark({ class: "cm-ran" });
+const flashField = StateField.define({
+  create: () => Decoration.none,
+  update(deco, tr) {
+    deco = deco.map(tr.changes);
+    for (const e of tr.effects) {
+      if (!e.is(flashEffect)) continue;
+      deco = e.value && e.value.to > e.value.from ? Decoration.set([flashMark.range(e.value.from, e.value.to)]) : Decoration.none;
+    }
+    return deco;
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+function markerDOM(open) {
+  const el = document.createElement("span");
+  el.className = "cm-fold-marker";
+  el.dataset.open = String(open);
+  el.setAttribute("aria-hidden", "true");
+  el.textContent = "⌄";
+  return el;
+}
+
+function languageExtension({ language, dialect, schema, defaultSchema, completions }) {
+  const out = [];
+  if (language === "sql") {
+    const { namespace } = sqlNamespace(schema);
+    out.push(sql({ dialect: SQL_DIALECTS[dialect] ?? PostgreSQL, schema: namespace, defaultSchema: defaultSchema || undefined, upperCaseKeywords: true }));
+  } else if (language === "json") {
+    out.push(json(), foldGutter({ markerDOM }));
+  }
+  if (completions?.length) {
+    const list = completions.map((c) => (typeof c === "string" ? { label: c, type: "variable" } : c));
+    out.push(EditorState.languageData.of(() => [{ autocomplete: completeFromList(list) }]));
+  }
+  return out;
+}
+
+function sizeExtension({ height, minHeight = 120, maxHeight = 480 }) {
+  if (height != null) return EditorView.theme({ "&": { height: px(height) }, ".cm-scroller": { overflow: "auto" } });
+  return EditorView.theme({
+    "&": { maxHeight: px(maxHeight) },
+    ".cm-scroller": { overflow: "auto" },
+    ".cm-content, .cm-gutter": { minHeight: px(minHeight) },
+  });
+}
+
+function LiveEditor({
+  value,
+  defaultValue,
+  onChange,
+  language = "text",
+  dialect = "postgres",
+  schema,
+  defaultSchema,
+  completions,
+  onRun,
+  onSave,
+  runLabel = "Run",
+  diagnostics,
+  lint,
+  validate = true,
+  readOnly = false,
+  lineNumbers: numbers = true,
+  wrap = false,
+  placeholder,
+  height,
+  minHeight = 120,
+  maxHeight = 480,
+  tabSize = 2,
+  autoFocus = false,
+  footer = true,
+  frameless = false,
+  label,
+  editorRef,
+  className,
+}) {
+  const host = useRef(null);
+  const viewRef = useRef(null);
+  const applying = useRef(false);
+  const [status, setStatus] = useState({ line: 1, col: 1, selected: 0, problems: 0 });
+
+  // The latest props for the handlers CodeMirror holds on to.
+  const live = useRef({});
+  live.current = { onChange, onRun, onSave, lint, language, dialect, validate, diagnostics };
+
+  // Problems handed in through `diagnostics` belong to the text they were
+  // found in: they show until that text changes.
+  const outside = useRef({ text: null, list: [] });
+
+  const compartments = useMemo(
+    () => ({ lang: new Compartment(), size: new Compartment(), ro: new Compartment(), wrap: new Compartment(), ph: new Compartment(), gutter: new Compartment(), aria: new Compartment(), tab: new Compartment() }),
+    [],
+  );
+
+  function run(view, all = false) {
+    const fn = live.current.onRun;
+    if (!fn) return false;
+    const text = view.state.doc.toString();
+    const sel = view.state.selection.main;
+    let range;
+    if (all) range = { from: 0, to: text.length };
+    else if (!sel.empty) range = { from: sel.from, to: sel.to };
+    else if (live.current.language === "sql") range = statementAt(text, sel.head, { backslash: live.current.dialect === "mysql" || live.current.dialect === "mariadb" }) ?? { from: 0, to: text.length };
+    else range = { from: 0, to: text.length };
+    const statement = text.slice(range.from, range.to);
+    if (!statement.trim()) return true;
+    view.dispatch({ effects: flashEffect.of(range) });
+    setTimeout(() => {
+      if (viewRef.current === view) view.dispatch({ effects: flashEffect.of(null) });
+    }, 450);
+    fn({ text, statement, from: range.from, to: range.to, selection: !sel.empty, all });
+    return true;
+  }
+
+  function format(view) {
+    if (live.current.language !== "json") return false;
+    const text = view.state.doc.toString();
+    const out = formatJson(text);
+    if (out == null || out === text) return true;
+    view.dispatch({ changes: { from: 0, to: text.length, insert: out }, selection: EditorSelection.cursor(Math.min(view.state.selection.main.head, out.length)) });
+    return true;
+  }
+
+  // Create the view once; props below reconfigure it.
+  useEffect(() => {
+    const source = async (view) => {
+      const text = view.state.doc.toString();
+      const { language: lang, validate: check, lint: fn } = live.current;
+      const found = [];
+      if (lang === "json" && check && text.trim()) {
+        const r = checkJson(text);
+        if (!r.ok) found.push({ from: r.error.from, to: r.error.to, message: r.error.message, severity: "error" });
+      }
+      if (fn) {
+        try {
+          found.push(...((await fn(text)) ?? []));
+        } catch {
+          /* a lint that throws marks nothing */
+        }
+      }
+      if (outside.current.text === text) found.push(...outside.current.list);
+      return normalizeDiagnostics(text, found);
+    };
+
+    const state = EditorState.create({
+      doc: String(value ?? defaultValue ?? ""),
+      extensions: [
+        compartments.gutter.of(numbers ? [lineNumbers(), highlightActiveLineGutter()] : []),
+        lintGutter(),
+        highlightSpecialChars(),
+        history(),
+        drawSelection(),
+        dropCursor(),
+        EditorState.allowMultipleSelections.of(true),
+        indentOnInput(),
+        syntaxHighlighting(highlightStyle),
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion({ icons: true, activateOnTypingDelay: 80 }),
+        rectangularSelection(),
+        crosshairCursor(),
+        highlightSelectionMatches(),
+        flashField,
+        linter(source, { delay: 300, needsRefresh: wantsRelint }),
+        Prec.highest(
+          keymap.of([
+            { key: "Mod-Enter", run: (v) => run(v, false) },
+            { key: "Shift-Mod-Enter", run: (v) => run(v, true) },
+            {
+              key: "Mod-s",
+              preventDefault: true,
+              run: (v) => {
+                const fn = live.current.onSave;
+                if (!fn) return false;
+                fn(v.state.doc.toString());
+                return true;
+              },
+            },
+            { key: "Shift-Alt-f", run: (v) => format(v) },
+          ]),
+        ),
+        keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap, indentWithTab]),
+        editorTheme,
+        compartments.lang.of(languageExtension({ language, dialect, schema, defaultSchema, completions })),
+        compartments.size.of(sizeExtension({ height, minHeight, maxHeight })),
+        compartments.ro.of(EditorState.readOnly.of(readOnly)),
+        compartments.wrap.of(wrap ? EditorView.lineWrapping : []),
+        compartments.ph.of(placeholder ? placeholderExt(placeholder) : []),
+        compartments.aria.of(EditorView.contentAttributes.of({ "aria-label": label || LANGUAGES[language] || "Code", ...(readOnly ? { "aria-readonly": "true" } : {}) })),
+        compartments.tab.of([EditorState.tabSize.of(tabSize), indentUnit.of(" ".repeat(tabSize))]),
+        EditorView.updateListener.of((u) => {
+          if (u.docChanged && !applying.current) live.current.onChange?.(u.state.doc.toString());
+          const head = u.state.selection.main.head;
+          const line = u.state.doc.lineAt(head);
+          const selected = u.state.selection.ranges.reduce((n, r) => n + (r.to - r.from), 0);
+          const problems = diagnosticCount(u.state);
+          setStatus((s) =>
+            s.line === line.number && s.col === head - line.from + 1 && s.selected === selected && s.problems === problems
+              ? s
+              : { line: line.number, col: head - line.from + 1, selected, problems },
+          );
+        }),
+      ],
+    });
+    const view = new EditorView({ state, parent: host.current });
+    viewRef.current = view;
+    if (autoFocus) view.focus();
+    return () => {
+      viewRef.current = null;
+      view.destroy();
+    };
+    // Created once: every prop it reads is reconfigured below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const reconfigure = (compartment, ext) => viewRef.current?.dispatch({ effects: compartment.reconfigure(ext) });
+  const schemaKey = JSON.stringify(schema ?? null) + JSON.stringify(completions ?? null);
+  useEffect(() => {
+    reconfigure(compartments.lang, languageExtension({ language, dialect, schema, defaultSchema, completions }));
+    lintNow(viewRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [language, dialect, defaultSchema, schemaKey, validate]);
+  useEffect(() => reconfigure(compartments.size, sizeExtension({ height, minHeight, maxHeight })), [height, minHeight, maxHeight, compartments]);
+  useEffect(() => reconfigure(compartments.ro, EditorState.readOnly.of(readOnly)), [readOnly, compartments]);
+  useEffect(() => reconfigure(compartments.wrap, wrap ? EditorView.lineWrapping : []), [wrap, compartments]);
+  useEffect(() => reconfigure(compartments.ph, placeholder ? placeholderExt(placeholder) : []), [placeholder, compartments]);
+  useEffect(() => reconfigure(compartments.gutter, numbers ? [lineNumbers(), highlightActiveLineGutter()] : []), [numbers, compartments]);
+  useEffect(
+    () => reconfigure(compartments.aria, EditorView.contentAttributes.of({ "aria-label": label || LANGUAGES[language] || "Code", ...(readOnly ? { "aria-readonly": "true" } : {}) })),
+    [label, language, readOnly, compartments],
+  );
+  useEffect(() => reconfigure(compartments.tab, [EditorState.tabSize.of(tabSize), indentUnit.of(" ".repeat(tabSize))]), [tabSize, compartments]);
+
+  // Problems from outside: pinned to the text as it is now.
+  const diagKey = JSON.stringify(diagnostics ?? null);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    outside.current = { text: view.state.doc.toString(), list: diagnostics ?? [] };
+    lintNow(view);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [diagKey]);
+  // A lint function swapped in: check again.
+  useEffect(() => lintNow(viewRef.current), [lint]);
+
+  // Controlled: a `value` that is not the text replaces it (loading another
+  // record); the one the editor just sent through onChange changes nothing.
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view || value === undefined) return;
+    const next = String(value ?? "");
+    const now = view.state.doc.toString();
+    if (next === now) return;
+    applying.current = true;
+    try {
+      view.dispatch({ changes: { from: 0, to: now.length, insert: next }, selection: EditorSelection.cursor(Math.min(view.state.selection.main.head, next.length)) });
+    } finally {
+      applying.current = false;
+    }
+  }, [value]);
+
+  // The handle a block reaches through editorRef / useCodeEditor().
+  const handle = useMemo(
+    () => ({
+      get view() {
+        return viewRef.current;
+      },
+      focus: () => viewRef.current?.focus(),
+      getValue: () => viewRef.current?.state.doc.toString() ?? "",
+      setValue: (text) => {
+        const v = viewRef.current;
+        if (!v) return;
+        v.dispatch({ changes: { from: 0, to: v.state.doc.length, insert: String(text ?? "") } });
+      },
+      getSelection: () => {
+        const v = viewRef.current;
+        if (!v) return { from: 0, to: 0, text: "" };
+        const { from, to } = v.state.selection.main;
+        return { from, to, text: v.state.sliceDoc(from, to) };
+      },
+      replaceSelection: (text) => viewRef.current?.dispatch(viewRef.current.state.replaceSelection(String(text ?? ""))),
+      insert: (text) => {
+        const v = viewRef.current;
+        if (!v) return;
+        v.dispatch(v.state.replaceSelection(String(text ?? "")));
+        v.focus();
+      },
+      select: (from, to = from) => {
+        const v = viewRef.current;
+        if (!v) return;
+        const len = v.state.doc.length;
+        v.dispatch({ selection: EditorSelection.range(Math.min(from, len), Math.min(to, len)), scrollIntoView: true });
+        v.focus();
+      },
+      goTo: (line, col = 1) => {
+        const v = viewRef.current;
+        if (!v) return;
+        const at = offsetOf(v.state.doc.toString(), line, col);
+        v.dispatch({ selection: EditorSelection.cursor(at), scrollIntoView: true });
+        v.focus();
+      },
+      statementAtCursor: () => {
+        const v = viewRef.current;
+        if (!v) return null;
+        return statementAt(v.state.doc.toString(), v.state.selection.main.head);
+      },
+      run: (all = false) => (viewRef.current ? run(viewRef.current, all) : false),
+      format: () => (viewRef.current ? format(viewRef.current) : false),
+      cursor: () => {
+        const v = viewRef.current;
+        return v ? lineCol(v.state.doc.toString(), v.state.selection.main.head) : { line: 1, col: 1 };
+      },
+    }),
+    // run/format read live props through refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+  useEffect(() => {
+    if (!editorRef) return;
+    editorRef.current = handle;
+    return () => {
+      if (editorRef.current === handle) editorRef.current = null;
+    };
+  }, [editorRef, handle]);
+
+  return (
+    <div className={cx(FRAME, FLOATING, frameless && "rounded-none border-0 bg-transparent focus-within:ring-0", className)}>
+      {/* raw: CodeMirror's mount point — it draws its own accessible textbox inside. */}
+      <div ref={host} className="min-h-0 min-w-0 flex-1" />
+      {footer ? (
+        <StatusBar
+          language={language}
+          line={status.line}
+          col={status.col}
+          selected={status.selected}
+          problems={status.problems}
+          onProblems={() => {
+            const v = viewRef.current;
+            if (v) {
+              v.focus();
+              nextDiagnostic(v);
+            }
+          }}
+          onRun={onRun ? () => viewRef.current && run(viewRef.current) : null}
+          runLabel={runLabel}
+          readOnly={readOnly}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/** The quiet line under the editor: problems, where the cursor is, the
+ *  mode, and — when the editor runs — the Run button with its keys. */
+function StatusBar({ language, line, col, selected = 0, problems = 0, onProblems, onRun, runLabel = "Run", readOnly, idle = false }) {
+  const [mac, setMac] = useState(true);
+  useEffect(() => {
+    setMac(/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || ""));
+  }, []);
+  return (
+    <div className="flex min-h-9 items-center gap-3 border-t border-border ps-3 pe-1 text-xs text-muted-foreground">
+      {problems > 0 ? (
+        <Button variant="quiet" size="sm" onClick={onProblems} disabled={idle} className="-ms-2 gap-1.5 px-2 text-xs text-foreground">
+          <span aria-hidden="true" className="size-1.5 rounded-full bg-destructive" />
+          {problems === 1 ? "1 problem" : `${problems} problems`}
+        </Button>
+      ) : null}
+      <span className="tabular-nums whitespace-nowrap" aria-live="off">
+        Ln {line}, Col {col}
+        {selected > 0 ? <span className="max-sm:hidden"> · {selected} selected</span> : null}
+      </span>
+      <span className="ms-auto whitespace-nowrap max-sm:hidden">
+        {LANGUAGES[language] ?? language}
+        {readOnly ? " · Read only" : ""}
+      </span>
+      {onRun ? (
+        <Button variant="quiet" size="sm" onClick={onRun} disabled={idle} className="gap-2 px-2 text-xs text-foreground max-sm:ms-auto">
+          <Icon name="play" size={14} />
+          {runLabel}
+          <KbdGroup keys={[mac ? "⌘" : "Ctrl", "↵"]} className="max-sm:hidden" />
+        </Button>
+      ) : (
+        <span className="w-1" aria-hidden="true" />
+      )}
+    </div>
+  );
+}

package/registry/blocks/code-editor/codemirror.js

@@ -0,0 +1,38 @@
+// The one door to CodeMirror 6 (MIT). Every file in this block reaches it
+// through here, and the blocks built on this one (json-editor,
+// sql-console…) reach it through CodeEditor — never the packages directly.
+//
+// The packages load on the server too (none of them touches `window`
+// while it loads — checked in node), so no ssr-shim is needed: the editor
+// itself is created only after the first effect (the mount guard in
+// code-editor.jsx), and the server renders the text as a placeholder.
+export { EditorState, EditorSelection, Compartment, StateEffect, StateField, Prec } from "@codemirror/state";
+export {
+  EditorView,
+  Decoration,
+  keymap,
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  drawSelection,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  placeholder,
+} from "@codemirror/view";
+export { defaultKeymap, history, historyKeymap, indentWithTab, insertNewlineAndIndent } from "@codemirror/commands";
+export {
+  HighlightStyle,
+  syntaxHighlighting,
+  indentOnInput,
+  bracketMatching,
+  foldGutter,
+  foldKeymap,
+  indentUnit,
+} from "@codemirror/language";
+export { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, completeFromList } from "@codemirror/autocomplete";
+export { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
+export { linter, lintGutter, lintKeymap, forceLinting, diagnosticCount, nextDiagnostic, forEachDiagnostic } from "@codemirror/lint";
+export { sql, PostgreSQL, MySQL, SQLite, StandardSQL, MSSQL, MariaSQL } from "@codemirror/lang-sql";
+export { json } from "@codemirror/lang-json";
+export { tags } from "@lezer/highlight";