@code0-tech/pictor 0.10.9 → 0.11.0

package/dist/assets/components/form/EditorInput.style.css

@@ -1 +1 @@
-.editor-input{width:100%;flex:1 1 auto;overflow:hidden;padding:.59rem 0;position:relative;align-self:stretch}.editor-input .cm-editor{height:100%;outline:none!important}.editor-input .cm-content{padding:0;position:relative}.editor-input .cm-line{align-self:stretch;padding-left:0}.editor-input .cm-cursor{border-width:2px;border-radius:50rem;border-color:#fff}
+.input-wrapper__control--single-line{white-space:pre!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.input-wrapper__control--single-line::-webkit-scrollbar{display:none}.editor-input__menu-anchor{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none}.editor-input{width:100%;overflow:hidden;position:relative;align-self:stretch;font-family:Inter,sans-serif;font-size:.8rem;letter-spacing:-.5px;font-weight:400;color:#ffffffbf}.editor-input [data-slate-editor]{flex:1 1 auto;padding:.6rem 0;align-self:stretch;outline:none;caret-color:#fff;min-height:1.2em;white-space:pre-wrap;word-break:break-word}.editor-input [data-slate-node=element]{margin:0;padding:0}.editor-input ::selection{background:#70b3ff40}.editor-input [data-slate-placeholder]{color:#ffffff4d;pointer-events:none;-webkit-user-select:none;user-select:none}

package/dist/components/form/EditorInput.d.ts

@@ -1,16 +1,27 @@
 import { default as React } from 'react';
 import { ValidationProps } from './useForm';
 import { InputWrapperProps } from './InputWrapper';
-import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
-import { Extension } from '@uiw/react-codemirror';
-import { StreamLanguage, TagStyle } from '@codemirror/language';
-export interface EditorInputProps extends Omit<InputWrapperProps, 'onChange'>, ValidationProps<any> {
-    language?: StreamLanguage<unknown>;
-    suggestions?: (context: CompletionContext) => CompletionResult;
-    extensions?: Extension[];
+import { InputSuggestion } from './InputSuggestion';
+export interface EditorTokenRule {
+    pattern: RegExp;
+    /**
+     * Wrap a matched token. `children` is Slate's leaf content — include it
+     * somewhere so cursor positioning stays accurate.
+     */
+    wrap?: (matchedText: string, children: React.ReactNode, match: RegExpExecArray) => React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export interface EditorInputProps extends Omit<InputWrapperProps, "onChange">, ValidationProps<any> {
+    tokenRules?: EditorTokenRule[];
+    suggestions?: InputSuggestion[];
+    suggestionsEmptyState?: React.ReactNode;
+    onSuggestionSelect?: (suggestion: InputSuggestion) => void;
     disabled?: boolean;
     readonly?: boolean;
-    tokenStyles?: TagStyle[];
+    /** Render as a single-line input: Enter is blocked, newlines in pasted or external values become spaces. */
+    singleLine?: boolean;
     onChange?: (value: string) => void;
+    placeholder?: string;
 }
 export declare const EditorInput: React.FC<EditorInputProps>;

package/dist/components/form/EditorInput.js

@@ -1,78 +1,170 @@
-import { jsx as c } from "react/jsx-runtime";
-import e from "react";
-import { InputWrapper as N } from "./InputWrapper.js";
-import x from "@uiw/react-codemirror";
-import { createTheme as p } from "@uiw/codemirror-themes";
-import { tags as t } from "../../node_modules/@lezer/highlight/dist/index.js";
+import { jsx as i, jsxs as P } from "react/jsx-runtime";
+import R, { useMemo as O, useRef as w, useCallback as f, useState as le } from "react";
+import { createEditor as se, Editor as k, Transforms as D, Text as ae, Node as ce } from "slate";
+import { withReact as ue, ReactEditor as pe, Editable as fe, Slate as de } from "slate-react";
+import { withHistory as ge } from "slate-history";
+import { InputWrapper as he } from "./InputWrapper.js";
 import "../../utils/contextStore.js";
-import { mergeComponentProps as B } from "../../utils/component.js";
-import { hashToColor as r } from "../../utils/color.js";
+import { mergeComponentProps as me } from "../../utils/component.js";
+import "js-md5";
+import { Menu as xe, MenuTrigger as ye, MenuPortal as we } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as Te, InputSuggestionMenuContentItems as ve } from "./InputSuggestion.js";
 import '../../assets/components/form/EditorInput.style.css';/* empty css                       */
-const A = [], L = [], P = {
-  lineNumbers: !1,
-  foldGutter: !1,
-  highlightActiveLine: !1,
-  highlightActiveLineGutter: !1
-}, u = {
-  background: "transparent",
-  backgroundImage: "",
-  foreground: "rgba(255,255,255, 0.75)",
-  caret: "gray",
-  selection: "rgba(112,179,255,0.25)",
-  selectionMatch: "rgba(112,179,255,0.1)",
-  fontSize: "0.8rem",
-  fontFamily: '"Inter", sans-serif',
-  letterSpacing: "-0.5px",
-  fontWeight: "400",
-  gutterBackground: "transparent",
-  gutterForeground: "rgba(255,255,255, 0.5)",
-  gutterBorder: "transparent",
-  gutterActiveForeground: "rgba(255,255,255, 1)",
-  lineHighlight: "rgba(255,255,255, 0.1)"
-}, h = [{
-  tag: t.squareBracket,
-  color: r("squareBracket")
-}, {
-  tag: t.bracket,
-  color: r("bracket")
-}, {
-  tag: t.string,
-  color: r("Text")
-}, {
-  tag: t.bool,
-  color: r("Boolean")
-}, {
-  tag: t.number,
-  color: r("Number")
-}], F = p({
-  theme: "light",
-  settings: u,
-  styles: h
-}), Y = e.memo((f) => {
+const B = (g) => (g || "").split(`
+`).map((h) => ({
+  type: "paragraph",
+  children: [{
+    text: h
+  }]
+})), F = (g) => g.map((h) => ce.string(h)).join(`
+`), Oe = R.memo((g) => {
   const {
-    title: d,
-    right: T,
-    left: b,
-    rightType: E,
-    leftType: S,
-    language: o,
-    description: _,
-    extensions: n = A,
-    tokenStyles: a = L,
-    formValidation: i,
-    onChange: g,
-    wrapperComponent: k,
-    ...l
-  } = f, y = e.useMemo(() => [...o ? [...n, o] : n], [n, o]), C = e.useMemo(() => a.length === 0 ? F : p({
-    theme: "light",
-    settings: u,
-    styles: [...h, ...a]
-  }), [a]), m = i?.setValue, M = e.useCallback((s) => {
-    m?.(s), g?.(s);
-  }, [m, g]), I = e.useMemo(() => B("editor-input", l), [l]);
-  return /* @__PURE__ */ c(N, { title: d, description: _, right: T, left: b, rightType: E, leftType: S, formValidation: i, wrapperComponent: k, children: /* @__PURE__ */ c(x, { extensions: y, onChange: M, theme: C, indentWithTab: !1, ...I, basicSetup: P }) });
+    title: h,
+    right: j,
+    left: A,
+    rightType: H,
+    leftType: K,
+    description: $,
+    wrapperComponent: v,
+    tokenRules: m = [],
+    suggestions: s,
+    suggestionsEmptyState: L,
+    onSuggestionSelect: q,
+    formValidation: E,
+    onChange: I,
+    disabled: z = !1,
+    readonly: U = !1,
+    singleLine: x = !1,
+    placeholder: W,
+    value: G,
+    initialValue: J,
+    defaultValue: Q,
+    required: Ce,
+    ...X
+  } = g, S = String(G ?? J ?? Q ?? ""), c = x ? S.replace(/\n/g, " ") : S, r = O(() => ge(ue(se())), []), Y = O(() => B(c), []), T = w(c);
+  R.useEffect(() => {
+    if (c === T.current || (T.current = c, F(r.children) === c)) return;
+    const e = B(c);
+    k.withoutNormalizing(r, () => {
+      for (D.delete(r, {
+        at: {
+          anchor: k.start(r, []),
+          focus: k.end(r, [])
+        }
+      }), D.insertNodes(r, e, {
+        at: [0]
+      }); r.children.length > e.length; ) D.removeNodes(r, {
+        at: [r.children.length - 1]
+      });
+    });
+  }, [c, r]);
+  const Z = f(([e, t]) => {
+    const l = [];
+    if (!ae.isText(e) || !m.length) return l;
+    const {
+      text: n
+    } = e;
+    return m.forEach((o, oe) => {
+      const ie = new RegExp(o.pattern.source, o.pattern.flags.includes("g") ? o.pattern.flags : o.pattern.flags + "g");
+      let p;
+      for (; (p = ie.exec(n)) !== null && p[0].length; )
+        l.push({
+          anchor: {
+            path: t,
+            offset: p.index
+          },
+          focus: {
+            path: t,
+            offset: p.index + p[0].length
+          },
+          tokenRuleIndex: oe,
+          tokenText: p[0],
+          tokenMatch: p
+        });
+    }), l;
+  }, [m]), ee = f(({
+    attributes: e,
+    children: t,
+    leaf: l
+  }) => {
+    const n = l;
+    if (n.tokenRuleIndex !== void 0) {
+      const o = m[n.tokenRuleIndex];
+      if (o)
+        return o.wrap ? /* @__PURE__ */ i("span", { ...e, children: o.wrap(n.tokenText ?? "", t, n.tokenMatch ?? []) }) : /* @__PURE__ */ i("span", { ...e, children: /* @__PURE__ */ i("span", { style: o.style, className: o.className, children: t }) });
+    }
+    return /* @__PURE__ */ i("span", { ...e, children: t });
+  }, [m]), [a, d] = le(!1), M = w(null), C = w(null), _ = w(null), u = w(void 0), y = f(() => {
+    const e = _.current, t = C.current, l = t?.parentElement;
+    if (!e || !t || !l) return;
+    let n = null;
+    try {
+      r.selection && (n = pe.toDOMRange(r, r.selection).getBoundingClientRect());
+    } catch {
+      n = null;
+    }
+    (!n || !n.width && !n.height && !n.left && !n.top) && (n = t.getBoundingClientRect());
+    const o = l.getBoundingClientRect();
+    e.style.left = `${n.left - o.left}px`, e.style.top = `${n.top - o.top}px`, e.style.width = "0px", e.style.height = `${n.height || parseFloat(getComputedStyle(t).lineHeight) || 16}px`;
+  }, [r]), N = E?.setValue, te = f((e) => {
+    a && y();
+    const t = F(e);
+    t !== T.current && (T.current = t, N?.(t), I?.(t));
+  }, [a, y, N, I]), b = f(() => {
+    u.current && clearTimeout(u.current), s && (y(), d(!0));
+  }, [s, y]);
+  R.useEffect(() => {
+    a && y();
+  }, [a]);
+  const ne = f(() => {
+    u.current && clearTimeout(u.current), u.current = setTimeout(() => d(!1), 150);
+  }, []), re = f((e) => {
+    if (x && e.key === "Enter" && e.preventDefault(), !s) return;
+    const t = M.current;
+    if (e.ctrlKey && e.code === "Space") {
+      e.preventDefault(), a ? t?.focusFirstItem() : b();
+      return;
+    }
+    !a || !t || (e.key === "ArrowDown" ? (e.preventDefault(), t.highlightNextItem()) : e.key === "ArrowUp" ? (e.preventDefault(), t.highlightPreviousItem()) : e.key === "Enter" ? t.selectActiveItem() && (e.preventDefault(), d(!1)) : e.key === "Escape" && (e.preventDefault(), d(!1)));
+  }, [s, a, b, x]), V = /* @__PURE__ */ i("div", { ...me("editor-input", X), ref: C, children: /* @__PURE__ */ i(
+    fe,
+    {
+      className: x ? "input-wrapper__control input-wrapper__control--single-line" : "input-wrapper__control",
+      decorate: Z,
+      renderLeaf: ee,
+      readOnly: z || U,
+      spellCheck: !1,
+      placeholder: W,
+      onBlur: ne,
+      onFocus: () => {
+        u.current && clearTimeout(u.current);
+      },
+      onKeyDown: re,
+      onPaste: x ? (e) => {
+        e.preventDefault(), r.insertText(e.clipboardData.getData("text/plain").replace(/\r?\n/g, " "));
+      } : void 0
+    }
+  ) });
+  return /* @__PURE__ */ i(de, { editor: r, initialValue: Y, onChange: te, children: /* @__PURE__ */ i(he, { title: h, description: $, right: j, left: A, rightType: H, leftType: K, formValidation: E, wrapperComponent: s ? {
+    ...v ?? {},
+    style: {
+      position: "relative",
+      ...v?.style
+    }
+  } : v, children: s ? /* @__PURE__ */ P(xe, { open: a, modal: !1, onOpenChange: (e) => !e && d(!1), children: [
+    V,
+    /* @__PURE__ */ i(ye, { asChild: !0, children: /* @__PURE__ */ i("button", { ref: _, type: "button", tabIndex: -1, "aria-hidden": !0, onMouseDown: (e) => e.preventDefault(), className: "editor-input__menu-anchor" }) }),
+    /* @__PURE__ */ i(we, { children: /* @__PURE__ */ P(Te, { color: "primary", onInteractOutside: (e) => {
+      const t = e.target;
+      t && C.current?.contains(t) && e.preventDefault();
+    }, children: [
+      s.length === 0 && L,
+      /* @__PURE__ */ i(ve, { ref: M, suggestions: s, onSuggestionSelect: (e) => {
+        q?.(e), d(!1);
+      } })
+    ] }) })
+  ] }) : V }) });
 });
-Y.displayName = "EditorInput";
 export {
-  Y as EditorInput
+  Oe as EditorInput
 };

package/dist/components/form/InputSuggestion.d.ts

@@ -24,4 +24,4 @@ export interface InputSuggestionMenuContentItemsHandle {
     clearActiveItem: () => void;
 }
 export declare const InputSuggestionMenuContent: React.NamedExoticComponent<InputSuggestionMenuContentProps>;
-export declare const InputSuggestionMenuContentItems: React.NamedExoticComponent<InputSuggestionMenuContentItemsProps>;
+export declare const InputSuggestionMenuContentItems: React.NamedExoticComponent<InputSuggestionMenuContentItemsProps & React.RefAttributes<InputSuggestionMenuContentItemsHandle>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.10.9",
+  "version": "0.11.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {
@@ -18,8 +18,8 @@
   "author": "CodeZero",
   "devDependencies": {
     "@ark-ui/react": "^5.36.2",
-    "@babel/plugin-proposal-decorators": "^7.29.0",
-    "@babel/plugin-transform-class-properties": "^7.28.6",
+    "@babel/plugin-proposal-decorators": "^7.29.7",
+    "@babel/plugin-transform-class-properties": "^7.29.7",
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/language": "^6.12.3",
@@ -61,6 +61,9 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@uiw/codemirror-themes": "^4.25.10",
     "@uiw/react-codemirror": "^4.25.10",
+    "slate": "^0.124.1",
+    "slate-history": "^0.113.1",
+    "slate-react": "^0.125.1",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "@vitejs/plugin-react": "^5.2.0",
     "@vitest/browser-playwright": "^4.1.2",
@@ -85,7 +88,7 @@
     "react-zoom-pan-pinch": "^3.7.0",
     "rimraf": "^6.1.3",
     "sass": "^1.99.0",
-    "sass-loader": "^16.0.7",
+    "sass-loader": "^16.0.8",
     "sonner": "^2.0.7",
     "storybook": "^10.4.2",
     "style-loader": "^4.0.0",
@@ -142,6 +145,9 @@
     "react-resizable-panels": "^4.3.1",
     "react-zoom-pan-pinch": "^3.7.0",
     "sonner": "^2.0.7",
+    "slate": "^0.124.0",
+    "slate-history": "^0.113.0",
+    "slate-react": "^0.125.0",
     "zustand": ">=4.3.0 <5.0.0"
   },
   "publishConfig": {