@salemcobalt/ui 0.2.0-rc.2 → 0.2.0-rc.21

package/dist/editor.js

@@ -0,0 +1,174 @@
+'use client';
+
+// src/components/TextEditor/TextEditor.tsx
+import { Field } from "@base-ui/react/field";
+import {
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/utils/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/components/TextEditor/TextEditor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var load = () => import("./codemirror-6REE3TUN.js");
+var isProse = (language) => language === "markdown" || language === "text";
+function lineRange(text, line) {
+  const lines = text.split("\n");
+  const n = Math.min(Math.max(Math.trunc(line), 1), lines.length);
+  const start = lines.slice(0, n - 1).reduce((at, l) => at + l.length + 1, 0);
+  return [start, start + lines[n - 1].length];
+}
+function TextEditor({
+  label,
+  description,
+  error,
+  value,
+  onValueChange,
+  base,
+  language = "text",
+  liveDiff = false,
+  disabled = false,
+  readOnly = false,
+  rows = 8,
+  id: idProp,
+  className,
+  ref
+}) {
+  const [module, setModule] = useState(null);
+  const textareaRef = useRef(null);
+  const hostRef = useRef(null);
+  const handleRef = useRef(null);
+  const handoffRef = useRef(null);
+  const onChangeRef = useRef(onValueChange);
+  useLayoutEffect(() => {
+    onChangeRef.current = onValueChange;
+  });
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const invalid = error != null;
+  const describedBy = [description != null && descriptionId, invalid && errorId].filter(Boolean).join(" ");
+  const options = {
+    value,
+    base,
+    liveDiff,
+    language,
+    disabled,
+    readOnly,
+    invalid,
+    attributes: {
+      id,
+      "aria-labelledby": labelId,
+      ...describedBy ? { "aria-describedby": describedBy } : {}
+    }
+  };
+  const optionsRef = useRef(options);
+  useLayoutEffect(() => {
+    optionsRef.current = options;
+  });
+  useEffect(() => {
+    let live = true;
+    void load().then((m) => {
+      if (!live) return;
+      const ta = textareaRef.current;
+      if (ta && document.activeElement === ta) handoffRef.current = [ta.selectionStart, ta.selectionEnd];
+      setModule(() => m);
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!module || !hostRef.current) return;
+    const handle = module.mountEditor(hostRef.current, optionsRef.current, (v) => onChangeRef.current(v));
+    handleRef.current = handle;
+    if (handoffRef.current) handle.focus(...handoffRef.current);
+    handoffRef.current = null;
+    return () => {
+      handle.destroy();
+      handleRef.current = null;
+    };
+  }, [module]);
+  useLayoutEffect(() => {
+    handleRef.current?.update(options);
+  });
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus() {
+        if (handleRef.current) return handleRef.current.focus();
+        if (!optionsRef.current.disabled) textareaRef.current?.focus();
+      },
+      selectLine(line) {
+        if (handleRef.current) return handleRef.current.selectLine(line);
+        const ta = textareaRef.current;
+        if (!ta || optionsRef.current.disabled) return;
+        ta.focus();
+        ta.setSelectionRange(...lineRange(ta.value, line));
+      }
+    }),
+    []
+  );
+  const prose = isProse(language);
+  return /* @__PURE__ */ jsxs(
+    Field.Root,
+    {
+      className: cx("sc-field", className),
+      disabled,
+      invalid,
+      "data-size": "md",
+      "data-editor": module ? "codemirror" : "fallback",
+      children: [
+        /* @__PURE__ */ jsx(
+          Field.Label,
+          {
+            id: labelId,
+            htmlFor: id,
+            className: "sc-field__label",
+            onClick: () => handleRef.current?.focus(),
+            children: label
+          }
+        ),
+        module ? /* @__PURE__ */ jsx("div", { ref: hostRef, style: { "--_rows": rows } }) : /* @__PURE__ */ jsx(
+          Field.Control,
+          {
+            id,
+            render: /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                rows: Math.max(rows, value.split("\n").length),
+                style: { "--_rows": rows },
+                readOnly,
+                spellCheck: prose,
+                autoCorrect: prose ? "on" : "off",
+                autoCapitalize: prose ? "sentences" : "off"
+              }
+            ),
+            className: "sc-input sc-textarea",
+            "data-variant": "code",
+            "data-resize": "none",
+            value,
+            onValueChange: (v) => onValueChange(v)
+          }
+        ),
+        description != null ? /* @__PURE__ */ jsx(Field.Description, { id: descriptionId, className: "sc-field__description", children: description }) : null,
+        invalid ? /* @__PURE__ */ jsx(Field.Error, { id: errorId, className: "sc-field__error", match: true, children: error }) : null
+      ]
+    }
+  );
+}
+export {
+  TextEditor
+};
+//# sourceMappingURL=editor.js.map

package/dist/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TextEditor/TextEditor.tsx","../src/utils/cx.ts"],"sourcesContent":["import { Field } from '@base-ui/react/field';\nimport {\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { cx } from '../../utils/cx';\nimport type * as CodeMirror from './codemirror';\nimport type { EditorHandle, EditorOptions, TextEditorLanguage } from './codemirror';\n\nexport type { TextEditorLanguage };\n\n/** What `ref` gives you: focus and line selection, on the Textarea before CodeMirror loads and on CodeMirror after. */\nexport interface TextEditorHandle {\n  /** Focuses the editor. */\n  focus(): void;\n  /** Selects line `line` (1-based, clamped to the text), scrolls it into view and focuses the editor. */\n  selectLine(line: number): void;\n}\n\nexport interface TextEditorProps {\n  /** Required. The visible label. */\n  label: ReactNode;\n  /** Help text under the editor, wired with `aria-describedby`. */\n  description?: ReactNode | undefined;\n  /** The error message. When given the editor is invalid and the message is announced. */\n  error?: ReactNode | undefined;\n  /** The text. Controlled: feed `onValueChange`'s value back. */\n  value: string;\n  onValueChange: (value: string) => void;\n  /** The text to compare against, such as the saved version. With a base, changes show inline; without, no diff. */\n  base?: string | undefined;\n  /**\n   * Syntax highlighting, loaded per language. `markdown` and `text` (default) keep the phone's autocorrect,\n   * capitals and spellcheck; `yaml` and `json` turn them off.\n   */\n  language?: TextEditorLanguage | undefined;\n  /**\n   * Keep showing changes while the editor has focus, updated 300ms after the last keystroke. Default false: the\n   * diff hides while you type, so nothing moves under the caret, and shows again on blur.\n   */\n  liveDiff?: boolean | undefined;\n  disabled?: boolean | undefined;\n  /** Focusable and selectable, not editable. The phone's keyboard stays down. */\n  readOnly?: boolean | undefined;\n  /** Minimum visible lines; the editor grows with its content. Default 8. */\n  rows?: number | undefined;\n  /** The editable element's id (the Textarea's before CodeMirror loads). */\n  id?: string | undefined;\n  /** Class on the wrapper. */\n  className?: string | undefined;\n  /** Focus and select a line from outside, such as \"Show line 12\". */\n  ref?: Ref<TextEditorHandle> | undefined;\n}\n\ntype CodeMirrorModule = typeof CodeMirror;\n// The only path to CodeMirror: a dynamic import, so it lands in its own chunk and never in the server render.\nconst load = (): Promise<CodeMirrorModule> => import('./codemirror');\n\nconst isProse = (language: TextEditorLanguage) => language === 'markdown' || language === 'text';\n\n/** Line `line`'s start and end offsets in `text`, without its line break; clamped like CodeMirror's. */\nfunction lineRange(text: string, line: number): [number, number] {\n  const lines = text.split('\\n');\n  const n = Math.min(Math.max(Math.trunc(line), 1), lines.length);\n  const start = lines.slice(0, n - 1).reduce((at, l) => at + l.length + 1, 0);\n  return [start, start + lines[n - 1]!.length];\n}\n\n/**\n * A code and text editor on CodeMirror 6, with inline word diffs against `base`. Client-only: the server and the\n * first client render show a code `<textarea>` in the same field chrome, and CodeMirror replaces it once its chunk\n * has loaded, keeping focus and the selection.\n */\nexport function TextEditor({\n  label,\n  description,\n  error,\n  value,\n  onValueChange,\n  base,\n  language = 'text',\n  liveDiff = false,\n  disabled = false,\n  readOnly = false,\n  rows = 8,\n  id: idProp,\n  className,\n  ref,\n}: TextEditorProps) {\n  const [module, setModule] = useState<CodeMirrorModule | null>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const hostRef = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<EditorHandle | null>(null);\n  // The Textarea's focus and selection at the moment of the swap.\n  const handoffRef = useRef<[number, number] | null>(null);\n  const onChangeRef = useRef(onValueChange);\n  useLayoutEffect(() => {\n    onChangeRef.current = onValueChange;\n  });\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const errorId = `${id}-error`;\n  const invalid = error != null;\n  const describedBy = [description != null && descriptionId, invalid && errorId].filter(Boolean).join(' ');\n  const options: EditorOptions = {\n    value,\n    base,\n    liveDiff,\n    language,\n    disabled,\n    readOnly,\n    invalid,\n    attributes: {\n      id,\n      'aria-labelledby': labelId,\n      ...(describedBy ? { 'aria-describedby': describedBy } : {}),\n    },\n  };\n  const optionsRef = useRef(options);\n  useLayoutEffect(() => {\n    optionsRef.current = options;\n  });\n\n  useEffect(() => {\n    let live = true;\n    void load().then((m) => {\n      if (!live) return;\n      const ta = textareaRef.current;\n      if (ta && document.activeElement === ta) handoffRef.current = [ta.selectionStart, ta.selectionEnd];\n      setModule(() => m);\n    });\n    return () => {\n      live = false;\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!module || !hostRef.current) return;\n    const handle = module.mountEditor(hostRef.current, optionsRef.current, (v) => onChangeRef.current(v));\n    handleRef.current = handle;\n    if (handoffRef.current) handle.focus(...handoffRef.current);\n    handoffRef.current = null;\n    return () => {\n      handle.destroy();\n      handleRef.current = null;\n    };\n  }, [module]);\n\n  useLayoutEffect(() => {\n    handleRef.current?.update(options);\n  });\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus() {\n        if (handleRef.current) return handleRef.current.focus();\n        if (!optionsRef.current.disabled) textareaRef.current?.focus();\n      },\n      selectLine(line) {\n        if (handleRef.current) return handleRef.current.selectLine(line);\n        const ta = textareaRef.current;\n        if (!ta || optionsRef.current.disabled) return;\n        ta.focus();\n        ta.setSelectionRange(...lineRange(ta.value, line));\n      },\n    }),\n    [],\n  );\n\n  const prose = isProse(language);\n  return (\n    <Field.Root\n      className={cx('sc-field', className)}\n      disabled={disabled}\n      invalid={invalid}\n      data-size=\"md\"\n      data-editor={module ? 'codemirror' : 'fallback'}\n    >\n      {/* A <label> can't point at a contenteditable, so once CodeMirror is in, a click focuses it by hand. */}\n      <Field.Label\n        id={labelId}\n        htmlFor={id}\n        className=\"sc-field__label\"\n        onClick={() => handleRef.current?.focus()}\n      >\n        {label}\n      </Field.Label>\n      {module ? (\n        <div ref={hostRef} style={{ '--_rows': rows } as CSSProperties} />\n      ) : (\n        <Field.Control\n          id={id}\n          render={\n            <textarea\n              ref={textareaRef}\n              // Grows to its content like the editor (text-editor.css), so the swap moves the layout only by the diff.\n              rows={Math.max(rows, value.split('\\n').length)}\n              style={{ '--_rows': rows } as CSSProperties}\n              readOnly={readOnly}\n              spellCheck={prose}\n              autoCorrect={prose ? 'on' : 'off'}\n              autoCapitalize={prose ? 'sentences' : 'off'}\n            />\n          }\n          className=\"sc-input sc-textarea\"\n          data-variant=\"code\"\n          data-resize=\"none\"\n          value={value}\n          onValueChange={(v) => onValueChange(v)}\n        />\n      )}\n      {description != null ? (\n        <Field.Description id={descriptionId} className=\"sc-field__description\">\n          {description}\n        </Field.Description>\n      ) : null}\n      {invalid ? (\n        <Field.Error id={errorId} className=\"sc-field__error\" match>\n          {error}\n        </Field.Error>\n      ) : null}\n    </Field.Root>\n  );\n}\n","/** Joins class names, dropping falsy entries. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(' ');\n}\n"],"mappings":"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","names":[]}