@pega/cosmos-react-build 8.0.0-build.9.1 → 8.0.1

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.js

@@ -1,64 +1,102 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // cspell:words unfocus
-import { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo } from 'react';
 import { Controlled as ReactCodeMirror } from 'react-codemirror2';
-import { showHint, defineMode } from 'codemirror';
-import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/hint/show-hint.js';
-import { useConsolidatedRef, useElement } from '@pega/cosmos-react-core';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/edit/matchbrackets';
+import { Pass, showHint, defineMode, registerHelper } from 'codemirror';
+import { Popover, Text, UnorderedList, Flex, useI18n, useTestIds, withTestIds, useUID, debounce } from '@pega/cosmos-react-core';
 import { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
-import { StyledCodeEditor } from './CodeEditor.styles';
+import { StyledSuggestions, StyledCodeEditor, StyledPopover, StyledList, StyledWarnIcon } from './CodeEditor.styles';
 import getCodeSuggestions from './getCodeSuggestions';
-defineMode('expression', () => {
+import { getEditorsTestIds } from './CodeEditor.test-ids';
+import { lint as jsonLint } from './mode/jsonLinter';
+const contextText = 'ex-context';
+const commentText = 'ex-comment';
+const languages = ['json', 'javascript'];
+const additionalOperators = ['and', 'or', 'when', 'otherwise', 'isA', 'asA', 'define', 'isNone'];
+defineMode('expression', (config, parserConfig) => {
+    const isSingleLine = parserConfig.isSingleLine;
     const tokens = [
         // Below regex is used to identify the context
-        { token: /\w+@/, style: 'ex-context' },
+        { token: /\w+@/, style: contextText },
         // Below regex is used to identify the RuleType
-        { token: /\w+:/, style: 'ex-context' },
+        { token: /\w+:/, style: contextText },
         // Below regex is used to identify the RuleName
         { token: /\w+[(]/, style: 'ex-ruleName' },
         // Below regex is used to identify the delimeters
-        { token: /[:.(),]/, style: 'ex-delimeter' },
+        { token: /[:.(),[\]]/, style: 'ex-delimeter' },
         // Below regex is used to identify the operators
-        { token: /[-+\\/*=<>@]+/, style: 'ex-operator' },
+        { token: /[-+\\/*=<>@#]+/, style: 'ex-operator' },
         // Below regex is used to identify the spaces
         { token: / /, style: 'ex-space' }
     ];
     return {
         startState() {
-            return { inString: false };
+            return { inString: false, inMultiLineComment: false };
         },
         token(stream, state) {
-            // Used to identify the constants in the expression
-            const nextChar = stream.peek();
-            if (!state.inString && (nextChar === "'" || nextChar === '"')) {
-                stream.next(); // Skip quote
-                state.inString = true; // Update state
-            }
-            if (state.inString) {
-                if (nextChar && stream.skipTo(nextChar)) {
-                    // Quote found on this line
-                    stream.next(); // Skip quote
-                    state.inString = false; // Clear flag
+            /** Additional operator highlighting */
+            for (let i = 0; i < additionalOperators.length; i += 1) {
+                const keyword = additionalOperators[i];
+                const len = keyword.length;
+                const currentPos = stream.pos;
+                if (stream.match(keyword, true)) {
+                    const before = currentPos === 0 ? null : stream.string.charAt(currentPos - 1);
+                    const after = stream.eol() ? null : stream.peek();
+                    const isWordChar = (char) => char.includes(' ');
+                    if ((!before || isWordChar(before)) && (!after || isWordChar(after))) {
+                        return 'ex-additional-operators';
+                    }
+                    stream.backUp(len);
+                }
+            }
+            /* Highlights single and multi line comments */
+            if (state.inMultiLineComment && !isSingleLine) {
+                if (stream.match(/.*?\*\//)) {
+                    state.inMultiLineComment = false;
                 }
                 else {
-                    stream.skipToEnd(); // Rest of line is string
+                    stream.skipToEnd();
                 }
-                return nextChar === '"' ? 'ex-constant' : 'ex-context'; // Token style
+                return commentText;
+            }
+            if (stream.match(/\/\*/) && !isSingleLine) {
+                state.inMultiLineComment = true;
+                return commentText;
             }
-            if (stream.peek() === '.') {
-                stream.next();
-                if (stream.match(/.\w+\(/))
-                    return 'ex-delimeter';
+            if (stream.match(/\/\//) && !isSingleLine) {
+                stream.skipToEnd();
+                return commentText;
             }
-            // Used to match the regex in the expression
-            for (const element of tokens) {
-                const match = stream.match(element.token, false);
-                if (match) {
-                    if (stream.pos === stream.start) {
-                        stream.next();
+            // Used to identify the constants in the expression
+            if (!state.inMultiLineComment) {
+                const nextChar = stream.peek();
+                if (!state.inString && (nextChar === "'" || nextChar === '"')) {
+                    stream.next(); // Skip quote
+                    state.inString = true; // Update state
+                }
+                if (state.inString) {
+                    if (nextChar && stream.skipTo(nextChar)) {
+                        // Quote found on this line
+                        stream.next(); // Skip quote
+                        state.inString = false; // Clear flag
+                    }
+                    else {
+                        stream.skipToEnd(); // Rest of line is string
+                    }
+                    return nextChar === '"' ? 'ex-constant' : contextText; // Token style
+                }
+                // Used to match the regex in the expression
+                for (const element of tokens) {
+                    const match = stream.match(element.token, false);
+                    if (match) {
+                        if (stream.pos === stream.start) {
+                            stream.next();
+                        }
+                        return element.style;
                     }
-                    return element.style;
                 }
             }
             stream.next();
@@ -66,76 +104,109 @@ defineMode('expression', () => {
         }
     };
 });
-const defaultConfigOptions = {
-    lineWrapping: true,
-    smartIndent: true,
-    autoCloseBrackets: true,
-    extraKeys: { Tab: false, 'Shift-Tab': false }
-};
-const CodeEditor = forwardRef(function CodeEditor({ fetchSuggestions, autoCompleteTriggers, editorConfigProps, codeEditorHandle, defaultValue = '', loading = false, readOnly, errors, onChange, ...props }, ref) {
+const CodeEditor = forwardRef(({ testId, fetchSuggestions, autoCompleteTriggers, editorConfigProps, codeEditorHandle, defaultValue = '', loading = false, readOnly, isSingleLine = false, errors, onChange, onBlur, inLineErrors, 'aria-describedby': ariaDescribedBy, ...restProps }, ref) => {
+    const t = useI18n();
     const [value, setCode] = useState(defaultValue);
+    const [showEditor, setShowEditor] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const [suggestions, setSuggestions] = useState([]);
     const [codeMirror, setCodeMirror] = useState(null);
-    const [codeEditorContainer, setCodeEditorContainer] = useElement();
-    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);
     const [suggestionTrigger, setSuggestionTrigger] = useState(null);
     const [popover, showPopover] = useState(false);
     const mounted = useRef(false);
+    const testIds = useTestIds(testId, getEditorsTestIds);
+    const editorRef = useRef(null);
+    const uId = useUID();
+    const errorDescId = `${uId}-description`;
+    const onBlurRef = useRef(onBlur);
+    const hasSuggestionRef = useRef(true);
     useImperativeHandle(codeEditorHandle, () => ({
-        insertText: (text) => {
-            if (codeMirror) {
-                if (codeMirror.getSelection()) {
-                    codeMirror.replaceSelection(text);
+        insertText: (text, resetContent, customPosition) => {
+            if (editorRef.current) {
+                if (editorRef.current.getSelection()) {
+                    editorRef.current.replaceSelection(text);
+                }
+                else if (customPosition?.start && customPosition?.end) {
+                    editorRef.current.replaceRange(text, { ...customPosition.start }, { ...customPosition.end });
                 }
                 else {
-                    const cur = codeMirror.getCursor();
-                    codeMirror.replaceRange(text, cur);
+                    const cur = editorRef.current.getCursor();
+                    const doc = editorRef.current.getDoc();
+                    const lastLine = doc.lastLine(); // Get the index of the last line
+                    const lastCharIndex = doc.getLine(lastLine).length;
+                    editorRef.current.replaceRange(text, resetContent ? { ch: lastCharIndex, line: lastLine } : cur, resetContent ? { ch: 0, line: 0 } : undefined);
                 }
             }
         },
         getValue: () => {
-            return codeMirror?.getValue();
+            return editorRef.current?.getValue();
         }
-    }), [codeMirror]);
+    }), []);
     const autoComplete = (codeEditor) => {
         const hintOptions = {
             completeSingle: false,
             completeOnSingleClick: true,
             closeOnUnfocus: true,
             suggestions,
-            container: codeEditorContainer,
             loading,
             triggerCharacterCursorPos: suggestionTrigger?.cursorPosition
         };
-        showHint(codeEditor, getCodeSuggestions, hintOptions);
+        debounce(() => showHint(codeEditor, getCodeSuggestions, hintOptions), 100)();
+    };
+    const errorHandler = (val) => {
+        if (!editorConfigProps?.lint)
+            return;
+        const mode = editorConfigProps?.mode;
+        switch (mode) {
+            case 'json':
+                return jsonLint(val);
+            case 'expression':
+            default:
+                return undefined;
+        }
+    };
+    useEffect(() => {
+        onBlurRef.current = onBlur;
+    }, [onBlur]);
+    const onBlurHandler = (editor) => {
+        if (onBlurRef.current) {
+            onBlurRef.current(editor.getDoc().getValue());
+        }
     };
     const onBeforeChange = async (editor, _data, textvalue) => {
-        setCode(textvalue);
-        onChange?.(textvalue);
+        const updatedTextValue = isSingleLine ? textvalue.replaceAll(/\n/g, '') : textvalue;
+        setCode(updatedTextValue);
+        /** _data.origin is a flag from codemirror that tells from where the change was made in the code editor input */
+        onChange?.(updatedTextValue, errorHandler(updatedTextValue), _data.origin);
         const currentCursor = editor.getCursor();
         const currentCharacter = editor
             .getTokenAt(currentCursor)
             .string.trim();
         let newSuggestions = [];
         if (autoCompleteTriggers?.includes(currentCharacter) && fetchSuggestions) {
+            const suggestionData = await fetchSuggestions(currentCharacter, {
+                line: currentCursor.line,
+                ch: currentCursor.ch
+            });
+            if (suggestionData === undefined) {
+                hasSuggestionRef.current = false;
+                return;
+            }
             setSuggestionTrigger({
                 character: currentCharacter,
                 cursorPosition: currentCursor
             });
-            newSuggestions = [
-                ...(await fetchSuggestions(currentCharacter, {
-                    line: currentCursor.line,
-                    ch: currentCursor.ch
-                }))
-            ];
+            hasSuggestionRef.current = true;
+            newSuggestions = [...suggestionData];
             if (mounted.current) {
                 setSuggestions(newSuggestions);
             }
         }
     };
     useEffect(() => {
-        if (!popover)
+        if (!popover) {
             return;
+        }
         const isSuggestionTriggerPresent = suggestionTrigger &&
             codeMirror
                 ?.getTokenAt(suggestionTrigger.cursorPosition)
@@ -147,7 +218,7 @@ const CodeEditor = forwardRef(function CodeEditor({ fetchSuggestions, autoComple
         }
     }, [onBeforeChange]);
     useEffect(() => {
-        if (codeMirror && (suggestionTrigger || loading)) {
+        if (codeMirror && isFocused && hasSuggestionRef.current && (suggestionTrigger || loading)) {
             autoComplete(codeMirror);
             showPopover(true);
         }
@@ -155,22 +226,268 @@ const CodeEditor = forwardRef(function CodeEditor({ fetchSuggestions, autoComple
             codeMirror?.closeHint();
             showPopover(false);
         }
-    }, [suggestions, loading]);
+    }, [suggestions, loading, suggestionTrigger, codeMirror]);
+    const [popoverInfo, setPopoverInfo] = useState({ targetElement: null, errorMessages: [] });
+    const [show, setShow] = useState(false);
+    const [errorMapping, setErrorMapping] = useState([]);
+    const [textMarkerList, setTextMarkerList] = useState([]);
+    const removeInLineErrors = () => {
+        if (textMarkerList.length) {
+            textMarkerList.forEach(item => item.clear());
+        }
+    };
+    useEffect(() => {
+        removeInLineErrors();
+        if (inLineErrors?.length && codeMirror) {
+            const markerList = [];
+            const errorMessageMap = inLineErrors?.map(({ start, end, messages }, index) => {
+                if (messages.length) {
+                    markerList.push(codeMirror.markText(start, end, {
+                        className: `cm-ex-underline-error error-${index}`
+                    }));
+                    return messages;
+                }
+                return [];
+            });
+            setTextMarkerList(markerList);
+            setErrorMapping(errorMessageMap);
+        }
+        else {
+            setErrorMapping([]);
+        }
+    }, [inLineErrors, codeMirror]);
     useEffect(() => {
         mounted.current = true;
         return () => {
             mounted.current = false;
         };
     }, []);
-    return (_jsxs(StyledCodeEditor, { container: {
-            direction: 'column',
-            justify: 'between'
-        }, item: {
-            grow: 1
-        }, ref: codeEditorConsolidatedRef, errors: errors, readOnly: readOnly, isLoading: loading, suggestions: suggestions, ...props, children: [_jsx(ReactCodeMirror, { value: value, onBeforeChange: onBeforeChange, options: { ...defaultConfigOptions, ...editorConfigProps }, editorDidMount: editor => {
-                    editor.setSize('100%', '100%');
-                    setCodeMirror(editor);
-                } }), errors && _jsx(StyledFormFieldInfo, { status: 'error', children: errors })] }));
+    const getErrors = (target) => {
+        const errorMessages = [];
+        if (target) {
+            errorMapping.forEach((item, index) => {
+                if (target.classList.contains(`error-${index}`)) {
+                    errorMessages.push(...item);
+                }
+            });
+        }
+        return errorMessages;
+    };
+    const onMouseMove = (event, type) => {
+        if (codeMirror && errorMapping.length) {
+            let target;
+            if (type === 'cursor') {
+                const coords = codeMirror.getCursor();
+                const charCoords = codeMirror.charCoords(coords, 'window');
+                target = document.elementFromPoint(charCoords.left, charCoords.top);
+            }
+            else {
+                target = event?.target instanceof Element ? event.target : null;
+            }
+            if (target) {
+                const errorMessages = getErrors(target);
+                if (errorMessages.length) {
+                    setPopoverInfo(() => {
+                        return {
+                            targetElement: target,
+                            errorMessages
+                        };
+                    });
+                    setShow(true);
+                }
+                else {
+                    setShow(false);
+                }
+            }
+        }
+    };
+    const onMouseLeave = () => {
+        setShow(false);
+    };
+    const hidePopover = (e) => {
+        if (e.shiftKey && (e.metaKey || e.ctrlKey) && e.key === ' ') {
+            onMouseMove(null, 'cursor');
+        }
+        else {
+            setShow(false);
+        }
+    };
+    useEffect(() => {
+        if (codeMirror && inLineErrors?.length && errorMapping.length) {
+            const codeMirrorWrapper = codeMirror.getWrapperElement();
+            codeMirrorWrapper.addEventListener('keydown', hidePopover);
+            codeMirrorWrapper.addEventListener('mousedown', onMouseLeave);
+            const elementsWithClassName = Array.from(codeMirrorWrapper.getElementsByClassName('cm-ex-underline-error'));
+            elementsWithClassName.forEach(element => {
+                element.addEventListener('mouseenter', onMouseMove);
+                element.addEventListener('mouseleave', onMouseLeave);
+            });
+            return () => {
+                codeMirrorWrapper.removeEventListener('keydown', hidePopover);
+                codeMirrorWrapper.removeEventListener('mousedown', onMouseLeave);
+                elementsWithClassName.forEach(element => {
+                    element.removeEventListener('mouseenter', onMouseMove);
+                    element.removeEventListener('mouseleave', onMouseLeave);
+                });
+            };
+        }
+        return undefined;
+    }, [value, inLineErrors, errorMapping, codeMirror]);
+    const extendModeWithSingleLine = (mode, singleLineEditor) => {
+        if (typeof mode === 'string' || (mode && typeof mode.name === 'string')) {
+            return {
+                name: typeof mode === 'string' ? mode : mode.name,
+                isSingleLine: singleLineEditor
+            };
+        }
+        return mode;
+    };
+    useEffect(() => {
+        (async () => {
+            if (editorConfigProps?.placeholder) {
+                await import('codemirror/addon/display/placeholder');
+            }
+            if (languages.includes(editorConfigProps?.mode)) {
+                await import('codemirror/mode/javascript/javascript');
+                await import('codemirror/theme/eclipse.css');
+            }
+            if (editorConfigProps?.foldGutter && !isSingleLine) {
+                await import('codemirror/addon/fold/foldcode');
+                await import('codemirror/addon/fold/foldgutter');
+                await import('codemirror/addon/fold/brace-fold');
+                await import('codemirror/addon/fold/comment-fold');
+                await import('codemirror/addon/fold/foldgutter.css');
+            }
+            if (editorConfigProps?.lint) {
+                await import('codemirror/addon/lint/lint.css');
+                await import('codemirror/addon/lint/lint');
+                if (editorConfigProps.mode === 'json') {
+                    await import('codemirror/addon/lint/json-lint');
+                    registerHelper('lint', 'json', jsonLint);
+                }
+            }
+            setShowEditor(true);
+        })();
+    }, [editorConfigProps]);
+    const updatedEditorConfig = useMemo(() => {
+        const mode = extendModeWithSingleLine(editorConfigProps?.mode || 'expression', isSingleLine);
+        return {
+            ...editorConfigProps,
+            lineWrapping: !isSingleLine,
+            smartIndent: true,
+            autoCloseBrackets: true,
+            matchBrackets: true,
+            lineNumbers: !isSingleLine && editorConfigProps?.lineNumbers,
+            placeholder: editorConfigProps?.placeholder,
+            extraKeys: {
+                /** default tab and shift tab behavior
+                 * https://codemirror.net/5/
+                 * https://discuss.codemirror.net/t/does-tab-key-work-in-codemirror-6/2705
+                 */
+                Tab: isSingleLine ? false : () => Pass,
+                'Shift-Tab': isSingleLine ? false : () => Pass,
+                ...(isSingleLine ? { Enter: () => { } } : {})
+            },
+            mode,
+            ...(languages.includes(editorConfigProps?.mode) ? { theme: 'eclipse' } : {}),
+            ...(editorConfigProps?.foldGutter && !isSingleLine
+                ? {
+                    foldGutter: true,
+                    gutters: (() => {
+                        const guttersArr = [];
+                        if (editorConfigProps?.lint)
+                            guttersArr.push('CodeMirror-lint-markers');
+                        if (editorConfigProps?.lineNumbers)
+                            guttersArr.push('CodeMirror-linenumbers');
+                        return [...guttersArr, 'CodeMirror-foldgutter'];
+                    })()
+                }
+                : {}),
+            ...(editorConfigProps?.mode === 'json'
+                ? {
+                    mode: 'application/json',
+                    lint: editorConfigProps.lint
+                }
+                : {})
+        };
+    }, [isSingleLine, editorConfigProps]);
+    const handlePaste = (editor, event) => {
+        if (isSingleLine) {
+            const doc = editor.getDoc();
+            const pastedContent = event.clipboardData?.getData('text/plain').trim();
+            const singleLineContent = pastedContent?.replace(/\r?\n|\r/g, ' ') || '';
+            if (doc && doc.getSelection()) {
+                doc.replaceSelection(singleLineContent);
+            }
+            else {
+                const cursor = doc.getCursor();
+                doc.replaceRange(singleLineContent, cursor);
+            }
+            const cursor = doc.getCursor();
+            doc.setCursor(cursor);
+            event.preventDefault();
+        }
+    };
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (editor && isSingleLine) {
+            editor.on('paste', handlePaste);
+        }
+        return () => {
+            if (editor) {
+                editor.off('paste', handlePaste);
+            }
+        };
+    }, [isSingleLine]);
+    useEffect(() => {
+        const textArea = codeMirror?.getInputField();
+        if (!textArea)
+            return;
+        let describedBy = textArea.getAttribute('aria-describedby') || '';
+        const ids = new Set(describedBy.split(' ').filter(item => item));
+        if (ariaDescribedBy && !ids.has(ariaDescribedBy)) {
+            ids.add(ariaDescribedBy);
+        }
+        if (errors && !ids.has(errorDescId)) {
+            ids.add(errorDescId);
+        }
+        else if (!errors && ids.has(errorDescId)) {
+            ids.delete(errorDescId);
+        }
+        if (!ariaDescribedBy) {
+            describedBy = ids.has(errorDescId) ? errorDescId : '';
+        }
+        else
+            describedBy = Array.from(ids).join(' ').trim();
+        if (describedBy) {
+            textArea.setAttribute('aria-describedby', describedBy);
+        }
+        else {
+            textArea.removeAttribute('aria-describedby');
+        }
+    }, [codeMirror, errors, ariaDescribedBy]);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledSuggestions, { isLoading: loading, suggestions: suggestions }), _jsxs(StyledCodeEditor, { ...restProps, "data-testid": testIds.root, container: {
+                    direction: 'column',
+                    justify: 'between'
+                }, item: {
+                    grow: 1
+                }, ref: ref, errors: errors, readOnly: readOnly, isLoading: loading, suggestions: suggestions, isSingleLine: isSingleLine, editorConfigProps: updatedEditorConfig, children: [showEditor && (_jsx(ReactCodeMirror, { value: value, onBeforeChange: onBeforeChange, options: updatedEditorConfig, editorDidMount: editor => {
+                            editor.setSize('100%', '100%');
+                            setCodeMirror(editor);
+                            editorRef.current = editor;
+                        }, onBlur: editor => {
+                            setIsFocused(false);
+                            if (onBlur) {
+                                onBlurHandler(editor);
+                            }
+                        }, onFocus: () => {
+                            setIsFocused(true);
+                        } })), popoverInfo.errorMessages.length > 0 && popoverInfo.targetElement !== null && (_jsx(Popover, { as: StyledPopover, show: show, target: popoverInfo.targetElement, placement: 'bottom-start', "data-testid": testIds.errorPopover, children: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsx(Text, { variant: 'h4', children: t('errors', [], {
+                                                count: popoverInfo.errorMessages.length === 1
+                                                    ? 1
+                                                    : // Using NaN to always select "other" pluralization form
+                                                        NaN
+                                            }) })] }), popoverInfo.errorMessages.length > 1 ? (_jsx(UnorderedList, { as: StyledList, items: popoverInfo.errorMessages })) : (_jsx(Text, { children: popoverInfo.errorMessages }))] }) })), errors && (_jsx(StyledFormFieldInfo, { id: errorDescId, status: 'error', "data-testid": testIds.errorMessage, children: errors }))] })] }));
 });
-export default CodeEditor;
+export default withTestIds(CodeEditor, getEditorsTestIds);
 //# sourceMappingURL=CodeEditor.js.map