alinea 1.7.0 → 2.0.0-preview.0

package/dist/field/code/CodeField.view.js

@@ -1,56 +1,194 @@
 import {
-  dist_default
-} from "../../chunks/chunk-A5O3N2GS.js";
-import "../../chunks/chunk-NZLE2WMY.js";
+  styler
+} from "../../chunks/chunk-I4OYYAX5.js";
+import {
+  __commonJS,
+  __toESM
+} from "../../chunks/chunk-CQ52GEHY.js";
+
+// node_modules/lolight/dist/lolight.min.js
+var require_lolight_min = __commonJS({
+  "node_modules/lolight/dist/lolight.min.js"(exports, module) {
+    ((e, t) => {
+      "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : e.lolight = t();
+    })(exports, function() {
+      function n(o2) {
+        a(true, function(n2) {
+          var e2 = t(o2.textContent);
+          o2.innerHTML = "", e2.forEach(function(e3) {
+            var t2 = n2.createElement("span");
+            t2.className = r + e3[0], t2.textContent = e3[1], o2.appendChild(t2);
+          });
+        });
+      }
+      function o(t2) {
+        a(true, function(e2) {
+          [].forEach.call(e2.querySelectorAll(t2 || ".lolight"), function(e3) {
+            n(e3);
+          });
+        });
+      }
+      var r = "ll-", i = "_nam#2196f3}_num#ec407a}_str#43a047}_rex#ef6c00}_pct#666}_key#555;font-weight:bold}_com#aaa;font-style:italic}".replace(/_/g, "." + r).replace(/#/g, "{color:#"), l = /^(a(bstract|lias|nd|rguments|rray|s(m|sert)?|uto)|b(ase|egin|ool(ean)?|reak|yte)|c(ase|atch|har|hecked|lass|lone|ompl|onst|ontinue)|de(bugger|cimal|clare|f(ault|er)?|init|l(egate|ete)?)|do|double|e(cho|ls?if|lse(if)?|nd|nsure|num|vent|x(cept|ec|p(licit|ort)|te(nds|nsion|rn)))|f(allthrough|alse|inal(ly)?|ixed|loat|or(each)?|riend|rom|unc(tion)?)|global|goto|guard|i(f|mp(lements|licit|ort)|n(it|clude(_once)?|line|out|stanceof|t(erface|ernal)?)?|s)|l(ambda|et|ock|ong)|m(odule|utable)|NaN|n(amespace|ative|ext|ew|il|ot|ull)|o(bject|perator|r|ut|verride)|p(ackage|arams|rivate|rotected|rotocol|ublic)|r(aise|e(adonly|do|f|gister|peat|quire(_once)?|scue|strict|try|turn))|s(byte|ealed|elf|hort|igned|izeof|tatic|tring|truct|ubscript|uper|ynchronized|witch)|t(emplate|hen|his|hrows?|ransient|rue|ry|ype(alias|def|id|name|of))|u(n(checked|def(ined)?|ion|less|signed|til)|se|sing)|v(ar|irtual|oid|olatile)|w(char_t|hen|here|hile|ith)|xor|yield)$/, e = "com", c = "key", s = "nam", d = "num", f = "rex", u = "spc", h = [[d, /#([0-9a-f]{6}|[0-9a-f]{3})\b/], [e, /(\/\/|#).*?(?=\n|$)/], [e, /\/\*[\s\S]*?\*\//], [e, /<!--[\s\S]*?-->/], [f, /\/(\\\/|[^\n])*?\//], ["str", /(['"`])(\\\1|[\s\S])*?\1/], [d, /[+-]?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)([eE][+-]?[0-9]+)?/], ["pct", /[\\.,:;+\-*\/=<>()[\]{}|?!&@~]/], [u, /\s+/], [s, /[\w$]+/], ["unk", /./]], t = function(e2) {
+        if ("string" != typeof e2) throw new Error("tok: no string");
+        for (var t2 = [], n2 = h.length, o2 = false; e2; ) for (var r2 = 0; r2 < n2; r2 += 1) {
+          var i2 = h[r2][1].exec(e2);
+          if (i2 && 0 === i2.index) {
+            var a2 = h[r2][0];
+            if (a2 !== f || !o2) {
+              i2 = i2[0];
+              (a2 = a2 === s && l.test(i2) ? c : a2) === u ? 0 <= i2.indexOf("\n") && (o2 = false) : o2 = a2 === d || a2 === s, e2 = e2.slice(i2.length), t2.push([a2, i2]);
+              break;
+            }
+          }
+        }
+        return t2;
+      }, a = function(e2, t2) {
+        if ("undefined" != typeof document) t2(document);
+        else if (e2) throw new Error("no doc");
+      };
+      return a(false, function(e2) {
+        var t2 = e2.querySelector("head"), n2 = e2.createElement("style");
+        n2.textContent = i, t2.insertBefore(n2, t2.firstChild), /^(i|c|loade)/.test(e2.readyState) ? o() : e2.addEventListener("DOMContentLoaded", function() {
+          o();
+        });
+      }), o.tok = t, o.el = n, o;
+    });
+  }
+});
 
 // src/field/code/CodeField.view.tsx
-import { useField } from "alinea/dashboard/editor/UseField";
-import { InputLabel } from "alinea/dashboard/view/InputLabel";
-import { HStack } from "alinea/ui";
-import { IcRoundCode } from "alinea/ui/icons/IcRoundCode";
-import { TextareaAutosize } from "alinea/ui/util/TextareaAutosize";
-import { useState } from "react";
+import { Label } from "alinea/components";
+import { useField, useFieldError, useFieldOptions } from "alinea/dashboard/hooks";
+var import_lolight = __toESM(require_lolight_min(), 1);
+import { Fragment, useId } from "react";
 
-// src/field/code/CodeField.module.scss
-var CodeField_module_default = {
-  "root-input": "alinea-CodeField-input",
-  "rootInput": "alinea-CodeField-input"
+// src/field/code/CodeField.module.css
+var CodeField_default = {
+  "CodeEditorInput-number": "alinea-CodeEditorInput-number",
+  "CodeEditorInputNumber": "alinea-CodeEditorInput-number",
+  "CodeEditorInput-string": "alinea-CodeEditorInput-string",
+  "CodeEditorInputString": "alinea-CodeEditorInput-string",
+  "CodeEditorInput-regex": "alinea-CodeEditorInput-regex",
+  "CodeEditorInputRegex": "alinea-CodeEditorInput-regex",
+  "CodeEditorInput-punctuation": "alinea-CodeEditorInput-punctuation",
+  "CodeEditorInputPunctuation": "alinea-CodeEditorInput-punctuation",
+  "CodeEditorInput-identifier": "alinea-CodeEditorInput-identifier",
+  "CodeEditorInputIdentifier": "alinea-CodeEditorInput-identifier",
+  "CodeEditorInput": "alinea-CodeEditorInput",
+  "CodeEditorInput-pre": "alinea-CodeEditorInput-pre",
+  "CodeEditorInputPre": "alinea-CodeEditorInput-pre",
+  "CodeEditorInput-keyword": "alinea-CodeEditorInput-keyword",
+  "CodeEditorInputKeyword": "alinea-CodeEditorInput-keyword",
+  "CodeEditorInput-textarea": "alinea-CodeEditorInput-textarea",
+  "CodeEditorInputTextarea": "alinea-CodeEditorInput-textarea",
+  "CodeEditorInput-comment": "alinea-CodeEditorInput-comment",
+  "CodeEditorInputComment": "alinea-CodeEditorInput-comment",
+  "CodeEditorInput-editor": "alinea-CodeEditorInput-editor",
+  "CodeEditorInputEditor": "alinea-CodeEditorInput-editor"
 };
 
 // src/field/code/CodeField.view.tsx
+import { SimpleCodeEditor } from "./SimpleCodeEditor.js";
 import { jsx } from "react/jsx-runtime";
-var styles = dist_default(CodeField_module_default);
-function CodeInput({ field }) {
-  const { value, mutator, label, options, error } = useField(field);
-  const [focus, setFocus] = useState(false);
-  const placeholder = options.inline ? String(label) : "";
-  const empty = value === "";
+var styles = styler(CodeField_default);
+var tokenClassNames = {
+  com: styles.CodeEditorInput.comment(),
+  key: styles.CodeEditorInput.keyword(),
+  nam: styles.CodeEditorInput.identifier(),
+  num: styles.CodeEditorInput.number(),
+  pct: styles.CodeEditorInput.punctuation(),
+  rex: styles.CodeEditorInput.regex(),
+  str: styles.CodeEditorInput.string()
+};
+function renderHighlightedCode(value) {
+  return import_lolight.default.tok(value).map(([type, token], index) => {
+    const className = tokenClassNames[type];
+    if (!className) return /* @__PURE__ */ jsx(Fragment, { children: token }, index);
+    return /* @__PURE__ */ jsx("span", { className, children: token }, index);
+  });
+}
+function CodeEditorInput({
+  autoFocus,
+  description,
+  errorMessage,
+  highlight = renderHighlightedCode,
+  invalid = false,
+  isRequired,
+  label,
+  shared,
+  onBlur,
+  onFocus,
+  onValueChange,
+  placeholder,
+  readOnly,
+  value
+}) {
+  const inputId = useId();
   return /* @__PURE__ */ jsx(
-    InputLabel,
+    Label,
     {
-      asLabel: true,
-      ...options,
-      error,
-      focused: focus,
-      icon: IcRoundCode,
-      empty,
-      children: /* @__PURE__ */ jsx(HStack, { center: true, gap: 8, children: /* @__PURE__ */ jsx(
-        TextareaAutosize,
+      htmlFor: inputId,
+      label,
+      description,
+      errorMessage,
+      isRequired,
+      shared,
+      children: /* @__PURE__ */ jsx(
+        "div",
         {
-          className: styles.root.input(),
-          type: "text",
-          value: value || "",
-          onChange: (e) => mutator(e.currentTarget.value),
-          onFocus: () => setFocus(true),
-          onBlur: () => setFocus(false),
-          placeholder,
-          spellCheck: "false",
-          readOnly: options.readOnly
+          className: styles.CodeEditorInput(),
+          "data-invalid": invalid || void 0,
+          "data-read-only": readOnly || void 0,
+          children: /* @__PURE__ */ jsx(
+            SimpleCodeEditor,
+            {
+              autoFocus,
+              className: styles.CodeEditorInput.editor(),
+              disabled: readOnly,
+              highlight,
+              onBlur,
+              onFocus,
+              onValueChange,
+              padding: { top: 8, right: 10, bottom: 8, left: 10 },
+              placeholder,
+              preClassName: styles.CodeEditorInput.pre(),
+              readOnly,
+              tabSize: 2,
+              textareaClassName: styles.CodeEditorInput.textarea(),
+              textareaId: inputId,
+              value
+            }
+          )
         }
-      ) })
+      )
+    }
+  );
+}
+function CodeFieldView({ field }) {
+  const [value = "", setValue] = useField(field);
+  const options = useFieldOptions(field);
+  const error = useFieldError(field);
+  return /* @__PURE__ */ jsx(
+    CodeEditorInput,
+    {
+      description: options.help,
+      errorMessage: error,
+      isRequired: options.required,
+      label: options.label,
+      shared: options.shared,
+      onValueChange: setValue,
+      placeholder: options.inline ? String(options.label) : void 0,
+      readOnly: options.readOnly,
+      value
     }
   );
 }
 export {
-  CodeInput
+  CodeEditorInput,
+  CodeFieldView
 };
+/*! Bundled license information:
+
+lolight/dist/lolight.min.js:
+  (*! lolight v1.4.1 - undefined *)
+*/

package/dist/field/code/SimpleCodeEditor.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+type Padding<T> = T | {
+    top?: T;
+    right?: T;
+    bottom?: T;
+    left?: T;
+};
+type Record = {
+    value: string;
+    selectionStart: number;
+    selectionEnd: number;
+};
+type History = {
+    stack: (Record & {
+        timestamp: number;
+    })[];
+    offset: number;
+};
+export declare const SimpleCodeEditor: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    highlight: (value: string) => string | React.ReactNode;
+    ignoreTabKey?: boolean;
+    insertSpaces?: boolean;
+    onValueChange: (value: string) => void;
+    padding?: Padding<number | string>;
+    style?: React.CSSProperties;
+    tabSize?: number;
+    value: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    maxLength?: number;
+    minLength?: number;
+    name?: string;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    textareaClassName?: string;
+    textareaId?: string;
+    preClassName?: string;
+} & React.RefAttributes<{
+    session: {
+        history: History;
+    };
+}>>;
+export {};