react-dsl-editor 0.4.3 → 0.4.5

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export declare interface DSL<T extends string> {
     errors: DSLError[];
 }
 
-export declare function DslEditor<T extends string>({ code, onChange, onParsed, grammar, wrap, tooltipProps, suggestions: clientSuggestions, className, syntaxColors, ...textareaProps }: {
+export declare function DslEditor<T extends string>({ code, onChange, onParsed, grammar, wrap, tooltipProps, suggestions: clientSuggestions, validate, className, syntaxColors, ...textareaProps }: {
     code: string;
     onChange: (text: string) => void;
     onParsed?: (dsl: DSL<T>) => void;
@@ -36,6 +36,7 @@ export declare function DslEditor<T extends string>({ code, onChange, onParsed,
     wrap?: boolean;
     className?: string;
     tooltipProps?: HTMLAttributes<HTMLElement>;
+    validate?: (node: T, text: string) => string | undefined;
     suggestions?: (node: CSTNode<T>) => string[] | undefined;
     syntaxColors?: SyntaxColorsProvider;
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'wrap' | 'onChange'>): JSX.Element;
@@ -45,7 +46,6 @@ export declare interface DSLError {
     expected?: string[];
     start: number;
     end: number;
-    depth: number;
 }
 
 export declare class DSLParser<T extends string> {
@@ -54,6 +54,8 @@ export declare class DSLParser<T extends string> {
     private _parseStrict;
     parseStrict(input: string): ParserSuccess<T> | undefined;
     parse(input: string): DSL<T>;
+    protected validate(node: T, text: string): string | undefined;
+    private validateCST;
 }
 
 export declare const eof: GrammarNode<never>;
@@ -64,7 +66,10 @@ export declare type FaultToleranceMode = 'skip-parser' | 'skip-input' | 'fuzzy-m
 
 export declare interface GrammarNode<T extends string = never> {
     type: T;
-    suggestions(): string[];
+    suggestions(): {
+        text: string;
+        node: GrammarNode<T>;
+    }[];
     parse(text: string, context: ParserContext<T>): ParserResult<T>;
     children: GrammarNode<T>[];
     meta?: Record<string, unknown>;
@@ -82,7 +87,7 @@ export declare function nodeName<T extends string>(node: {
     grammar: GrammarNode<T>;
 }): T | undefined;
 
-export declare type NodeTypes<T> = _NodeTypes<T> | 'error';
+export declare type NodeTypes<T> = _NodeTypes<T>;
 
 declare type _NodeTypes<T> = T extends GrammarNode<infer U> ? U : never;
 
@@ -137,6 +142,11 @@ declare const themes: {
     readonly dark: string[];
 };
 
+export declare interface ValidationError<T extends string> {
+    node: CSTNode<T>;
+    message: string;
+}
+
 export declare function visit<T extends string, V = string>(parserResult: ParserSuccess<T>, type: T[], extractor?: (node: ParserSuccess<T>) => V): V[];
 
 export declare function visitPredicate<T extends string, V = string>(parserResult: ParserSuccess<T>, filter: (v: ParserSuccess<T>) => boolean, extractor?: (node: ParserSuccess<T>) => V): V[];

package/dist/react-dsl-editor.js

@@ -830,9 +830,12 @@ function indexOf(o, h, g = 0) {
 }
 function pattern(o) {
 	let h = new import_randexp.default(o);
-	h.randInt = (o) => o;
+	h.randInt = (o) => o, h.defaultRange.subtract(-Infinity, Infinity);
 	function g() {
-		return t$1(t$3(0, 10), t$2(() => h.gen()), n$1());
+		return t$1(t$3(0, 10), t$2(() => h.gen()), n$1(), t$2((o) => ({
+			node: _,
+			text: o
+		})));
 	}
 	let _ = {
 		type: "pattern",
@@ -890,7 +893,7 @@ function repeat(o, h = 1, g = 1e3) {
 				x += y.text.length, S.push(y);
 			}
 			let w = C < h ? error({
-				expected: o.suggestions(),
+				expected: o.suggestions().map((o) => o.text),
 				got: v,
 				grammar: _,
 				offset: x,
@@ -938,7 +941,7 @@ function sequence(...o) {
 			let h = [];
 			for (let g of o) {
 				let o = g.suggestions();
-				if (h.push(...o.filter((o) => o !== "")), !o.includes("")) break;
+				h.push(...o.filter((o) => o.text !== ""));
 			}
 			return h;
 		},
@@ -1003,10 +1006,16 @@ function topError(o) {
 		message: o.expected.map((o) => JSON.stringify(o)).join(" or ") + ` expected, but got ${JSON.stringify(o.got)} (${pathToString(o.path)})`,
 		expected: o.expected,
 		start: o.offset,
-		end: o.offset + Math.max(1, o.got.length),
-		depth: 1
+		end: o.offset + Math.max(1, o.got.length)
 	}];
 }
+function validationErrors(o) {
+	return o.map((o) => ({
+		start: o.node.offset,
+		end: o.node.end,
+		message: o.message
+	}));
+}
 var DSLParser = class {
 	grammar;
 	constructor(o) {
@@ -1020,7 +1029,7 @@ var DSLParser = class {
 				return h.length < v.length && (h = v), error({
 					grammar: _,
 					offset: 0,
-					expected: _.suggestions(),
+					expected: _.suggestions().map((o) => o.text),
 					got: o,
 					path: v
 				});
@@ -1044,9 +1053,25 @@ var DSLParser = class {
 			terminals: _,
 			result: h,
 			strictResult: isParserSuccess(h) ? h : void 0,
-			errors: [...topError(h), ...topError(h.errorLabel)]
+			errors: [
+				...topError(h),
+				...topError(h.errorLabel),
+				...validationErrors(this.validateCST(g))
+			]
 		};
 	}
+	validate(o, h) {}
+	validateCST(o) {
+		let h = t$1(o.children ?? [], t((o) => this.validateCST(o))), g = nodeName(o);
+		if (g) {
+			let _ = this.validate(g, o.text);
+			_ && h.push({
+				node: o,
+				message: _
+			});
+		}
+		return h;
+	}
 };
 function visit(o, h, g = (o) => o.text) {
 	return visitPredicate(o, (o) => {
@@ -1067,15 +1092,16 @@ function getSuggestions(o, h, g = () => void 0) {
 			}));
 		}
 		return o.grammar.suggestions().map((h) => ({
-			node: o,
-			suggestion: h
+			node: _.find((o) => o.grammar === h.node) ?? o,
+			suggestion: h.text
 		}));
 	}));
 	return t$1(v, t((o) => {
 		let g = o.node.text.substring(0, h - o.node.offset);
 		return o.suggestion.startsWith(g) && o.suggestion.trim().length > 0 ? [{
 			suggestion: o.suggestion,
-			prefix: g
+			prefix: g,
+			node: o.node
 		}] : [];
 	}), n((o) => o.suggestion));
 }
@@ -1271,84 +1297,114 @@ function SuggestionsMenu({ suggestions: o, onSelect: h, style: g, selectedIndex:
 		}, g))
 	});
 }
-function DslEditor({ code: o, onChange: h, onParsed: v, grammar: S, wrap: T = !1, tooltipProps: E = { style: { backgroundColor: "darkGray" } }, suggestions: D, className: O = DslEditor.name, syntaxColors: k = defaultSyntaxColors("light"),...A }) {
-	let [j, M] = useState([]), [N, F] = useState(), [I, L] = useState({
+function getCursorCoordinates(o) {
+	return o?.getCursorPosition?.() ?? {
+		top: 0,
+		left: 0
+	};
+}
+function DslEditor({ code: o, onChange: h, onParsed: v, grammar: S, wrap: T = !1, tooltipProps: E = { style: { backgroundColor: "darkGray" } }, suggestions: D, validate: O, className: k = DslEditor.name, syntaxColors: A = defaultSyntaxColors("light"),...j }) {
+	let [M, N] = useState([]), [F, I] = useState(), [L, R] = useState({
 		top: 0,
 		left: 0,
+		cursorPosition: !1,
 		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 h = H.current?.selectionStart ?? 0, g = getSuggestions(o, h, D);
-		return M(g), g;
-	}, [D]), q = useCallback(() => {
-		N && V(H.current?.value?.substring(0, H.current?.selectionStart ?? 0) ?? "");
-	}, [N]);
+	}), [z, B] = useState(0), [V, H] = useState(""), U = useRef(null), W = useRef(null), G = useRef(null), K = useRef(null), q = useCallback((o) => {
+		let h = U.current?.selectionStart ?? 0, g = getSuggestions(o, h, D);
+		return N(g), g;
+	}, [D]), J = useCallback(() => {
+		F && H(U.current?.value?.substring(0, U.current?.selectionStart ?? 0) ?? "");
+	}, [F]);
 	useEffect(() => {
-		let h = new DSLParser(S).parse(o);
-		F(h), v?.(h), K(h.cst), V(o.substring(0, H.current?.selectionStart ?? 0));
+		let h = (O ? new class extends DSLParser {
+			constructor() {
+				super(S);
+			}
+			validate(o, h) {
+				return O(o, h);
+			}
+		}() : new DSLParser(S)).parse(o);
+		I(h), v?.(h), q(h.cst), H(o.substring(0, U.current?.selectionStart ?? 0));
 	}, [
 		o,
 		v,
 		S,
-		K
+		q,
+		O
 	]);
-	let J = useCallback(() => U.current?.getCursorPosition?.() ?? {
-		top: 0,
-		left: 0
-	}, []), Y = useCallback((g) => {
-		if (!H.current) return;
-		let { selectionStart: _, selectionEnd: v } = H.current, { prefix: y } = g, b = o.substring(0, _ - y.length) + g.suggestion + o.substring(v);
-		h(b), setTimeout(() => {
-			H.current && (H.current.focus(), H.current.selectionStart = H.current.selectionEnd = _ - y.length + g.suggestion.length);
-		}, 0), L((o) => ({
+	let Y = useCallback((g) => {
+		if (!U.current || !F?.cst) return;
+		let { selectionStart: _, selectionEnd: v } = U.current, { prefix: y } = g;
+		if (_ === v) {
+			let _ = o.substring(0, g.node.offset) + g.suggestion + o.substring(g.node.end);
+			h(_);
+		} else {
+			let b = o.substring(0, _ - y.length) + g.suggestion + o.substring(v);
+			h(b);
+		}
+		setTimeout(() => {
+			U.current && (U.current.focus(), U.current.selectionStart = U.current.selectionEnd = _ - y.length + g.suggestion.length);
+		}, 0), R((o) => ({
 			...o,
 			visible: !1
 		}));
-	}, [o, h]), X = useMemo(() => ({
+	}, [
+		o,
+		h,
+		F?.cst
+	]), X = useMemo(() => ({
 		ArrowDown() {
-			z((o) => (o + 1) % j.length);
+			B((o) => (o + 1) % M.length);
 		},
 		ArrowUp() {
-			z((o) => (o - 1 + j.length) % j.length);
+			B((o) => (o - 1 + M.length) % M.length);
 		},
 		Enter() {
-			j[R] && Y(j[R]);
+			M[z] && Y(M[z]);
 		},
 		Escape() {
-			L((o) => ({
+			R((o) => ({
 				...o,
 				visible: !1
 			}));
 		}
 	}), [
 		Y,
-		R,
-		j
+		z,
+		M
 	]), Z = useMemo(() => ({ CtrlSpace() {
-		if (!N?.cst) return;
-		let o = K(N?.cst);
-		if (e(o)) return;
-		let { top: h, left: g } = J();
-		z(0), L({
-			visible: !0,
-			top: h,
-			left: g
+		if (!F?.cst) return;
+		let o = q(F?.cst);
+		e(o) || R({
+			cursorPosition: !0,
+			visible: !1,
+			top: 0,
+			left: 0
 		});
-	} }), [
-		J,
-		N?.cst,
-		K
-	]), Q = useCallback((o) => {
-		let h = (I.visible ? X : Z)[shortcutName(o)];
+	} }), [F?.cst, q]);
+	useEffect(() => {
+		if (L.cursorPosition) {
+			let { top: o, left: h } = getCursorCoordinates(W.current);
+			B(0), R({
+				cursorPosition: !1,
+				visible: !0,
+				top: o,
+				left: h
+			});
+		}
+	}, [L.cursorPosition]);
+	let Q = useCallback((o) => {
+		let h = (L.visible ? X : Z)[shortcutName(o)];
 		h && (o.preventDefault(), h());
 	}, [
-		I.visible,
+		L.visible,
 		X,
 		Z
 	]), $ = useCallback((o) => {
-		h(o.target.value), L((o) => ({
+		h(o.target.value), R((o) => ({
 			...o,
 			visible: !1
-		})), V(o.target.value.substring(0, o.target.selectionStart));
+		})), H(o.target.value.substring(0, o.target.selectionStart));
 	}, [h]);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
@@ -1358,7 +1414,7 @@ function DslEditor({ code: o, onChange: h, onParsed: v, grammar: S, wrap: T = !1
 			width: "100%",
 			height: "100%"
 		},
-		className: O,
+		className: k,
 		children: /* @__PURE__ */ jsxs("div", {
 			style: {
 				position: "relative",
@@ -1367,44 +1423,44 @@ function DslEditor({ code: o, onChange: h, onParsed: v, grammar: S, wrap: T = !1
 			},
 			children: [
 				/* @__PURE__ */ jsx("textarea", {
-					ref: H,
+					ref: U,
 					spellCheck: !1,
 					wrap: T ? "soft" : "off",
 					style: textStyle,
 					value: o,
-					onSelect: q,
+					onSelect: J,
 					onChange: $,
-					onScroll: useSyncScroll(W, G),
+					onScroll: useSyncScroll(G, K),
 					onKeyDown: Q,
-					...A
+					...j
 				}),
-				N && /* @__PURE__ */ jsx(SyntaxHighlighter, {
-					cstRoot: N.cst,
-					ref: W,
+				F && /* @__PURE__ */ jsx(SyntaxHighlighter, {
+					cstRoot: F.cst,
+					ref: G,
 					wrap: T,
-					syntaxColors: k
+					syntaxColors: A
 				}),
-				!e(N?.errors ?? []) && /* @__PURE__ */ jsx(ErrorHighlighter, {
-					ref: G,
-					errors: N?.errors ?? [],
+				!e(F?.errors ?? []) && /* @__PURE__ */ jsx(ErrorHighlighter, {
+					ref: K,
+					errors: F?.errors ?? [],
 					tooltipProps: E,
 					wrap: T,
 					children: o
 				}),
-				/* @__PURE__ */ jsx(CursorPosition, {
-					ref: U,
-					text: B,
+				L.cursorPosition && /* @__PURE__ */ jsx(CursorPosition, {
+					ref: W,
+					text: V,
 					wrap: T
 				}),
-				I.visible && j.length > 0 && /* @__PURE__ */ jsx(SuggestionsMenu, {
-					suggestions: j,
+				L.visible && /* @__PURE__ */ jsx(SuggestionsMenu, {
+					suggestions: M,
 					onSelect: Y,
 					style: {
-						top: I.top,
-						left: I.left
+						top: L.top,
+						left: L.left
 					},
-					selectedIndex: R,
-					onHover: z
+					selectedIndex: z,
+					onHover: B
 				})
 			]
 		})

package/package.json

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