react-dsl-editor 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import { CSSProperties } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { TextareaHTMLAttributes } from 'react';
+
+export declare function alternative<T extends string>(type?: T, ...seq: Parse<T>[]): Parse<T>;
+
+export declare function appendOffset<T>(error: ParserError<T>, offset: number): ParserError<T>;
+
+export declare function appendOffsets<T>(errors: ParserError<T>[], offsets: number): ParserError<T>[];
+
+export declare interface ASTNode<T extends string> {
+    type: T;
+    text: string;
+    children?: ASTNode<T>[];
+    errors: ParserError<T>[];
+    offset: number;
+}
+
+export declare function DslEditor<T extends string>({ code, onChange, onParsed, grammar, wrap, suggestions: clientSuggestions, className, styles, ...textareaProps }: {
+    code: string;
+    onChange: (text: string) => void;
+    onParsed?: (ast: ParserResult<T>) => void;
+    grammar: Parse<T>;
+    wrap?: boolean;
+    className?: string;
+    styles?: Partial<Record<T | 'error', CSSProperties>>;
+    suggestions?: (type: T | 'error') => string[] | undefined;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'wrap' | 'onChange'>): JSX.Element;
+
+export declare function isParserError<T extends string>(result: ParserResult<T>): boolean;
+
+export declare function isParserSuccess<T extends string>(result: ParserResult<T>): boolean;
+
+export declare type NodeTypes<T> = _NodeTypes<T> | 'error';
+
+declare type _NodeTypes<T> = T extends Parse<infer U> ? U : never;
+
+export declare function optional<T extends string>(subparser: Parse<T>): Parse<T>;
+
+export declare const optionalWhitespace: Parse<"optionalWhitespace">;
+
+export declare type Parse<T extends string> = (text: string) => ParserResult<T>;
+
+export declare class Parser<T extends string> {
+    private readonly parser;
+    constructor(parser: Parse<T>);
+    parse(input: string): ASTNode<T>;
+}
+
+export declare interface ParserError<T> {
+    offset: number;
+    expected: string | RegExp;
+    got: string;
+    type: T;
+}
+
+export declare interface ParserResult<T extends string> {
+    type: T;
+    text: string;
+    children?: ParserResult<T>[];
+    errors: ParserError<T>[];
+}
+
+export declare class ParsingError extends Error {
+    constructor(msg: string);
+}
+
+export declare function pattern(regex: string): Parse<'pattern'>;
+
+export declare function pattern<T extends string>(regex: string, type: T): Parse<T>;
+
+export declare const rational: Parse<"rational">;
+
+export declare function repeat<T extends string>(type: T | undefined, parser: Parse<T>, min?: number, max?: number): Parse<T>;
+
+export declare function seq<T extends string>(type?: T, ...p: Parse<T>[]): Parse<T | 'optionalWhitespace'>;
+
+export declare function sequence<T extends string>(type?: T, ...seq: Parse<T>[]): Parse<T>;
+
+export declare function term<T extends string>(str: T): Parse<T>;
+
+export declare function term<T extends string>(str: string, type: T): Parse<T>;
+
+export declare const ws: Parse<"space" | "ws">;
+
+export { }

package/dist/react-dsl-editor.js

@@ -0,0 +1,566 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const textStyle = {
+	position: "absolute",
+	inset: 0,
+	overflow: "auto",
+	padding: 3,
+	fontSize: "1em",
+	lineHeight: "1.3em",
+	fontFamily: "monospace"
+}, ReadOnlyTextarea = forwardRef(function({ wrap: o, children: _, style: v = {} }, y) {
+	return /* @__PURE__ */ jsx("pre", {
+		ref: y,
+		style: {
+			...textStyle,
+			pointerEvents: "none",
+			margin: 0,
+			overflow: "auto",
+			whiteSpace: o ? "pre-wrap" : "pre",
+			...v
+		},
+		children: _
+	});
+});
+function SyntaxHighlighter({ syntax: o = [], ref: _, wrap: v, styles: y }) {
+	return /* @__PURE__ */ jsx(ReadOnlyTextarea, {
+		ref: _,
+		wrap: v,
+		children: o.map((o, _) => /* @__PURE__ */ jsx("span", {
+			className: [o.name].join(" "),
+			style: y?.[o.name],
+			children: o.text
+		}, `token_${_}`))
+	});
+}
+function e$3(o, _, v) {
+	let y = (v) => o(v, ..._);
+	return v === void 0 ? y : Object.assign(y, {
+		lazy: v,
+		lazyArgs: _
+	});
+}
+function t$2(o, _, v) {
+	let y = o.length - _.length;
+	if (y === 0) return o(..._);
+	if (y === 1) return e$3(o, _, v);
+	throw Error("Wrong number of arguments");
+}
+var t$5 = {
+	done: !1,
+	hasNext: !1
+};
+function t$6(o, ..._) {
+	let v = o, y = _.map((o) => "lazy" in o ? r$2(o) : void 0), b = 0;
+	for (; b < _.length;) {
+		if (y[b] === void 0 || !i$1(v)) {
+			let o = _[b];
+			v = o(v), b += 1;
+			continue;
+		}
+		let o = [];
+		for (let v = b; v < _.length; v++) {
+			let _ = y[v];
+			if (_ === void 0 || (o.push(_), _.isSingle)) break;
+		}
+		let x = [];
+		for (let _ of v) if (n$3(_, x, o)) break;
+		let { isSingle: S } = o.at(-1);
+		v = S ? x[0] : x, b += o.length;
+	}
+	return v;
+}
+function n$3(o, _, v) {
+	if (v.length === 0) return _.push(o), !1;
+	let y = o, b = t$5, x = !1;
+	for (let [o, S] of v.entries()) {
+		let { index: C, items: w } = S;
+		if (w.push(y), b = S(y, C, w), S.index += 1, b.hasNext) {
+			if (b.hasMany ?? !1) {
+				for (let y of b.next) if (n$3(y, _, v.slice(o + 1))) return !0;
+				return x;
+			}
+			y = b.next;
+		}
+		if (!b.hasNext) break;
+		b.done && (x = !0);
+	}
+	return b.hasNext && _.push(y), x;
+}
+function r$2(o) {
+	let { lazy: _, lazyArgs: v } = o, y = _(...v);
+	return Object.assign(y, {
+		isSingle: _.single ?? !1,
+		index: 0,
+		items: []
+	});
+}
+function i$1(o) {
+	return typeof o == "string" || typeof o == "object" && !!o && Symbol.iterator in o;
+}
+var e$1 = {
+	asc: (o, _) => o > _,
+	desc: (o, _) => o < _
+};
+function t(o, _) {
+	let [v, ...y] = _;
+	if (!i(v)) {
+		let _ = r$1(...y);
+		return o(v, _);
+	}
+	let b = r$1(v, ...y);
+	return (_) => o(_, b);
+}
+function r$1(o, _, ...v) {
+	let y = typeof o == "function" ? o : o[0], b = typeof o == "function" ? "asc" : o[1], { [b]: x } = e$1, S = _ === void 0 ? void 0 : r$1(_, ...v);
+	return (o, _) => {
+		let v = y(o), b = y(_);
+		return x(v, b) ? 1 : x(b, v) ? -1 : S?.(o, _) ?? 0;
+	};
+}
+function i(o) {
+	if (a(o)) return !0;
+	if (typeof o != "object" || !Array.isArray(o)) return !1;
+	let [_, v, ...y] = o;
+	return a(_) && typeof v == "string" && v in e$1 && y.length === 0;
+}
+var a = (o) => typeof o == "function" && o.length === 1;
+function e(o) {
+	return o === "" || o === void 0 ? !0 : Array.isArray(o) ? o.length === 0 : Object.keys(o).length === 0;
+}
+function t$4(...o) {
+	return t$2(n$2, o);
+}
+var n$2 = (o) => o.at(-1);
+function t$3(...o) {
+	return t$2(n$1, o, r);
+}
+var n$1 = (o, _) => o.map(_), r = (o) => (_, v, y) => ({
+	done: !1,
+	hasNext: !0,
+	next: o(_, v, y)
+});
+function t$1(...o) {
+	return t(n, o);
+}
+var n = (o, _) => [...o].sort(_);
+function isParserError(o) {
+	return !e(o.errors);
+}
+function isParserSuccess(o) {
+	return !e(o.text);
+}
+function alternative(o = "alternative", ..._) {
+	return (v) => {
+		let y = [];
+		for (let o of _) {
+			let _ = o(v);
+			if (isParserSuccess(_)) return _;
+			y.push(..._.errors);
+		}
+		return {
+			type: o,
+			text: "",
+			errors: y
+		};
+	};
+}
+function appendOffset(o, _) {
+	return {
+		...o,
+		offset: o.offset + _
+	};
+}
+function appendOffsets(o, _) {
+	return o.map((o) => appendOffset(o, _));
+}
+function optional(o) {
+	return (_) => {
+		let v = o(_);
+		return isParserError(v) ? {
+			type: v.type,
+			text: "",
+			errors: []
+		} : v;
+	};
+}
+function pattern(o, _ = "pattern") {
+	return (v) => {
+		let y = (/* @__PURE__ */ RegExp(`^${o}`)).exec(v);
+		return y ? {
+			type: _,
+			text: y[0],
+			errors: []
+		} : {
+			type: _,
+			text: "",
+			errors: [{
+				expected: new RegExp(o),
+				got: v,
+				offset: 0,
+				type: _
+			}]
+		};
+	};
+}
+const optionalWhitespace = pattern("\\s*", "optionalWhitespace");
+function filter(o, _) {
+	if (!isParserSuccess(_)) return _;
+	let { children: v } = _;
+	return v ? {
+		..._,
+		children: v.filter(o).map((_) => filter(o, _))
+	} : _;
+}
+function trimEmptyNode(o) {
+	return filter((o) => isParserError(o) || o.text !== "" || !!o.children, o);
+}
+function withOffset(o, _ = 0) {
+	let v = _;
+	return {
+		...o,
+		children: o.children?.map((o, _, y) => {
+			let { text: b } = y[_ - 1] ?? { text: "" };
+			return v += b.length, withOffset(o, v);
+		}),
+		offset: _
+	};
+}
+var Parser = class {
+	parser;
+	constructor(o) {
+		this.parser = o;
+	}
+	parse(o) {
+		let _ = withOffset(this.parser(o));
+		if (_.text !== o) {
+			let v = _.text.length;
+			_.errors.push({
+				offset: v,
+				got: o.substring(v),
+				expected: "",
+				type: "error"
+			});
+		}
+		return [trimEmptyNode].reduce((o, _) => _(o), _);
+	}
+}, ParsingError = class extends Error {
+	constructor(o) {
+		super(o);
+	}
+};
+const rational = pattern("\\d+\\.?\\d*", "rational");
+function repeat(o = "repeat", _, v = 1, y = Infinity) {
+	return (b) => {
+		let x = [], S = 0, C = [];
+		for (let o = 0; o < y; o++) {
+			let y = _(b.substring(S));
+			if (S += y.text.length, (isParserError(y) || C.length > 0) && o >= v) break;
+			y.errors.forEach((o) => C.push(appendOffset(o, S))), x.push(y);
+		}
+		return {
+			type: o,
+			text: x.map((o) => o.text).join(""),
+			errors: C,
+			children: x
+		};
+	};
+}
+function sequence(o = "sequence", ..._) {
+	return (v) => {
+		let y = [], b = 0, x = [];
+		for (let o of _) {
+			let _ = o(v.substring(b));
+			_.errors = appendOffsets(_.errors, b), b += _.text.length, x.push(..._.errors), y.push(_);
+		}
+		return {
+			type: o,
+			text: v.substring(0, b),
+			errors: x,
+			children: y
+		};
+	};
+}
+function seq(o = "seq", ..._) {
+	return sequence(o, optionalWhitespace, ..._.flatMap((o) => [o, optionalWhitespace]));
+}
+function term(o, _) {
+	let v = _ ?? o;
+	return (_) => _.startsWith(o) ? {
+		type: v,
+		text: o,
+		errors: []
+	} : {
+		type: v,
+		text: "",
+		errors: [{
+			expected: o,
+			got: _,
+			offset: 0,
+			type: v
+		}]
+	};
+}
+const ws = repeat("ws", term(" ", "space"));
+function getSuggestions(o, _, v) {
+	return console.assert(!0, o, _, v), {
+		suggestions: [],
+		prefix: ""
+	};
+}
+function syntaxForParserResult(o, _, v = []) {
+	if (o.children) for (let y of o.children) syntaxForParserResult(y, _, v), _ += isParserSuccess(y) ? y.text.length : 0;
+	else isParserSuccess(o) && v.push({
+		name: o.type,
+		text: o.text,
+		startOffset: _
+	});
+	return v;
+}
+function removeOverlap(o) {
+	return o.flatMap((o, _, v) => {
+		let y = v[_ - 1] ?? {
+			text: "",
+			startOffset: 0,
+			name: "error"
+		}, b = y.startOffset + y.text.length;
+		return o.startOffset < b ? [] : [o];
+	});
+}
+function textSyntax(o, _) {
+	let v = syntaxForParserResult(o, 0), y = t$6(v, t$3((o) => o.startOffset + o.text.length), t$1((o) => o), t$4(), (o) => o ?? 0);
+	if (y < _.length) {
+		let o = y;
+		v.push({
+			name: "error",
+			text: _.substring(o),
+			startOffset: o
+		});
+	}
+	return removeOverlap(v);
+}
+const CursorPosition = forwardRef(function(o, _) {
+	let v = useRef(null), b = useRef(null);
+	return useImperativeHandle(_, () => ({ getCursorPosition() {
+		if (!v.current || !b.current) return {
+			top: 0,
+			left: 0
+		};
+		let { offsetTop: o, offsetLeft: _ } = v.current, { scrollTop: y, scrollLeft: x } = b.current, S = window.getComputedStyle(b.current), C = parseInt(S.lineHeight);
+		return {
+			top: o - y + C,
+			left: _ - x
+		};
+	} }), []), /* @__PURE__ */ jsxs(ReadOnlyTextarea, {
+		ref: b,
+		wrap: o.wrap,
+		style: { visibility: "hidden" },
+		children: [o.text, /* @__PURE__ */ jsx("span", {
+			ref: v,
+			children: "\xA0"
+		})]
+	});
+});
+function SuggestionsView({ suggestions: o, onSelect: _ }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			gap: 4,
+			padding: "4px 0",
+			overflowY: "auto"
+		},
+		children: o.map((o, v) => /* @__PURE__ */ jsxs("button", {
+			onClick: () => _(o),
+			children: [
+				"\xA0",
+				o,
+				"\xA0"
+			]
+		}, v))
+	});
+}
+function shortcutName(o) {
+	let _ = "";
+	o.ctrlKey && (_ = "Ctrl");
+	let { key: v } = o;
+	return v === " " && (v = "Space"), `${_}${v}`;
+}
+function useSyncScroll(o) {
+	return useCallback((_) => {
+		let v = _.currentTarget;
+		o.current && v && (o.current.scrollTop = v.scrollTop, o.current.scrollLeft = v.scrollLeft);
+	}, [o]);
+}
+function SuggestionsMenu({ suggestions: o, onSelect: _, style: v, selectedIndex: y, onHover: b }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			...v,
+			background: "#252526",
+			border: "1px solid #454545",
+			boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+			color: "#cccccc",
+			fontFamily: "monospace",
+			fontSize: "0.9em",
+			minWidth: 200,
+			zIndex: 100
+		},
+		children: o.map((o, v) => /* @__PURE__ */ jsx("div", {
+			onClick: () => _(o),
+			onMouseOver: () => b(v),
+			style: {
+				cursor: "pointer",
+				padding: "4px 8px",
+				backgroundColor: y === v ? "#094771" : "transparent"
+			},
+			children: o
+		}, v))
+	});
+}
+function DslEditor({ code: o, onChange: y, onParsed: T, grammar: E, wrap: D = !1, suggestions: O, className: k = DslEditor.name, styles: A,...j }) {
+	let [M, N] = useState({
+		suggestions: [],
+		prefix: ""
+	}), [P, F] = useState([]), [I, L] = useState({
+		top: 0,
+		left: 0,
+		visible: !1
+	}), [R, z] = useState(0), [B, V] = useState(""), H = useRef(null), U = useRef(null), W = useRef(null), G = useRef(null), K = useCallback((o) => {
+		let _ = U.current?.selectionStart ?? 0, v = getSuggestions(o, _, O);
+		N(v);
+	}, [O]), q = useCallback(() => {
+		K(P), V(U.current?.value?.substring(0, U.current?.selectionStart ?? 0) ?? "");
+	}, [P, K]);
+	useEffect(() => {
+		H.current = new Parser(E);
+	}, [E]), useEffect(() => {
+		if (!H.current) return;
+		let _ = H.current.parse(o);
+		T?.(_);
+		let v = textSyntax(_, o);
+		K(v), F(v), V(o.substring(0, U.current?.selectionStart ?? 0));
+	}, [
+		o,
+		T,
+		K
+	]);
+	let J = useCallback(() => W.current?.getCursorPosition?.() ?? {
+		top: 0,
+		left: 0
+	}, []), Y = useCallback((_) => {
+		if (!U.current) return;
+		let { selectionStart: v, selectionEnd: b } = U.current, { prefix: x } = M, S = o.substring(0, v - x.length) + _ + o.substring(b);
+		y(S), setTimeout(() => {
+			U.current && (U.current.focus(), U.current.selectionStart = U.current.selectionEnd = v - x.length + _.length);
+		}, 0), L((o) => ({
+			...o,
+			visible: !1
+		}));
+	}, [
+		o,
+		y,
+		M
+	]), X = useMemo(() => ({
+		ArrowDown() {
+			z((o) => (o + 1) % M.suggestions.length);
+		},
+		ArrowUp() {
+			z((o) => (o - 1 + M.suggestions.length) % M.suggestions.length);
+		},
+		Enter() {
+			M.suggestions[R] && Y(M.suggestions[R]);
+		},
+		Escape() {
+			L((o) => ({
+				...o,
+				visible: !1
+			}));
+		}
+	}), [
+		Y,
+		R,
+		M
+	]), Z = useMemo(() => ({ CtrlSpace() {
+		let { top: o, left: _ } = J();
+		z(0), L({
+			visible: !0,
+			top: o,
+			left: _
+		});
+	} }), [J]), Q = useCallback((o) => {
+		let _ = (I.visible ? X : Z)[shortcutName(o)];
+		_ && (o.preventDefault(), _());
+	}, [
+		I.visible,
+		X,
+		Z
+	]), $ = useCallback((o) => {
+		y(o.target.value), L((o) => ({
+			...o,
+			visible: !1
+		})), V(o.target.value.substring(0, o.target.selectionStart));
+	}, [y]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "grid",
+			gridTemplateRows: "1fr auto",
+			flex: 1,
+			width: "100%",
+			height: "100%"
+		},
+		className: k,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "relative",
+				border: "1px solid black",
+				overflow: "hidden"
+			},
+			children: [
+				/* @__PURE__ */ jsx("textarea", {
+					ref: U,
+					spellCheck: !1,
+					wrap: D ? "soft" : "off",
+					style: {
+						...textStyle,
+						color: "transparent",
+						background: "transparent",
+						caretColor: "black",
+						border: "none",
+						resize: "none"
+					},
+					value: o,
+					onSelect: q,
+					onChange: $,
+					onScroll: useSyncScroll(G),
+					onKeyDown: Q,
+					...j
+				}),
+				/* @__PURE__ */ jsx(SyntaxHighlighter, {
+					syntax: P,
+					ref: G,
+					wrap: D,
+					styles: A
+				}),
+				/* @__PURE__ */ jsx(CursorPosition, {
+					ref: W,
+					text: B,
+					wrap: D
+				}),
+				I.visible && M.suggestions.length > 0 && /* @__PURE__ */ jsx(SuggestionsMenu, {
+					suggestions: M.suggestions,
+					onSelect: Y,
+					style: {
+						top: I.top,
+						left: I.left
+					},
+					selectedIndex: R,
+					onHover: z
+				})
+			]
+		}), /* @__PURE__ */ jsx(SuggestionsView, {
+			suggestions: M.suggestions,
+			onSelect: Y
+		})]
+	});
+}
+export { DslEditor, Parser, ParsingError, alternative, appendOffset, appendOffsets, isParserError, isParserSuccess, optional, optionalWhitespace, pattern, rational, repeat, seq, sequence, term, ws };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-dsl-editor",
   "license": "MIT",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "repository": {
     "url": "https://github.com/rzymek/react-dsl-editor"
   },