@pega/cosmos-react-build 3.0.0-dev.9.1 → 3.0.0-rc.3

package/lib/components/DynamicContentEditor/DynamicContentEditor.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef, useEffect, useState } from 'react';
+import { forwardRef, useRef, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Editor } from '@pega/cosmos-react-rte';
-import { Button, defaultThemeProp, Menu, Modal, ModalManagerContext, Popover, StyledPopover, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Menu, menuHelpers, Modal, Popover, StyledPopover, useModalManager, useConsolidatedRef, useI18n, useUID } from '@pega/cosmos-react-core';
 import { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';
 import { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';
 const StyledDynamicContentEditor = styled.div ``;
@@ -11,13 +11,15 @@ export const StyledSearchPopover = styled(StyledPopover) `
 `;
 StyledDynamicContentEditor.defaultProps = defaultThemeProp;
 const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, fieldItems, defaultValue, onBlur, ...restProps }, ref) => {
-    const { create } = useContext(ModalManagerContext);
+    const menuID = useUID();
+    const { create } = useModalManager();
     const t = useI18n();
     const modalMethods = useRef();
     const [editor, setEditor] = useState();
     const [bookmark, setBookmark] = useState();
-    const [fieldMenu, setFieldMenu] = useState({ items: fieldItems || [] });
-    const [currentElementContent, setCurrentElementContent] = useState(null);
+    const [fieldMenuItems, setFieldMenuItems] = useState(fieldItems || []);
+    const [currentElementId, setCurrentElementId] = useState('');
+    const [currentElementContent, setCurrentElementContent] = useState('');
     const [currentCursorPosition, setCurrentCursorPosition] = useState({
         bottom: 0,
         height: 0,
@@ -53,16 +55,18 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
         center: true,
         onAfterClose: () => {
             setBookmark(undefined);
+            setCurrentElementId('');
             setCurrentElementContent('');
             onActiveFieldChange({ id: '', text: '' });
         },
         onBeforeOpen: () => {
-            if (currentElementContent)
-                onActiveFieldChange({ id: currentElementContent, text: currentElementContent });
+            if (currentElementId) {
+                onActiveFieldChange({ id: currentElementId, text: currentElementContent });
+            }
         }
     };
     const findAndRenameField = (fieldId) => {
-        if (!editor || !fieldItems)
+        if (!editor || !fieldMenuItems)
             return;
         const selectedRange = editor.selection.getRng();
         const endOffset = selectedRange.endOffset;
@@ -78,9 +82,9 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
         range.setEnd(selectedRange.commonAncestorContainer, endPos);
         editor.getDoc().getSelection()?.removeAllRanges();
         editor.getDoc().getSelection()?.addRange(range);
-        const selectedFieldId = fieldItems.find(item => item.id === fieldId)?.id;
-        if (selectedFieldId) {
-            editor.selection.setContent(`<pega-reference contenteditable="false" data-rule-type="field" data-rule-id=${selectedFieldId}>${selectedFieldId}</pega-reference>`);
+        const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);
+        if (selectedField) {
+            editor.selection.setContent(`<pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id=".${selectedField.id}">${selectedField.primary}</pega-reference>`);
             setShowFieldsPopover(false);
         }
     };
@@ -90,16 +94,18 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
     };
     const filterFieldMenu = (searchString) => {
         setShowFieldsPopover(true);
-        setFieldMenu({ items: fieldItems || [] });
+        setFieldMenuItems(fieldItems || []);
         if (/\s/.test(searchString)) {
             setShowFieldsPopover(false);
             return;
         }
-        if (searchString && fieldItems) {
-            const newFieldItems = fieldItems.filter(item => item.id.toLowerCase().startsWith(searchString.toLowerCase()));
-            if (newFieldItems) {
+        if (searchString && fieldMenuItems) {
+            const newFieldMenuItems = menuHelpers
+                .flatten(fieldMenuItems)
+                .filter(({ primary }) => primary.toLowerCase().startsWith(searchString.toLocaleLowerCase()));
+            if (newFieldMenuItems) {
                 setShowFieldsPopover(true);
-                setFieldMenu({ items: newFieldItems });
+                setFieldMenuItems(newFieldMenuItems);
             }
             else
                 setShowFieldsPopover(false);
@@ -107,8 +113,10 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
     };
     const updateBookmarkAndCurrentElement = (editorSelection) => {
         const targetEl = editorSelection.getNode();
-        const fieldValue = targetEl.getAttribute('data-rule-id');
+        const fieldId = targetEl.getAttribute('data-rule-id');
+        const fieldValue = targetEl.innerText;
         setBookmark(editorSelection.getBookmark());
+        setCurrentElementId(fieldId || '');
         setCurrentElementContent(fieldValue);
     };
     const handleElementClick = ({ target }) => {
@@ -147,14 +155,16 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
                     }
                 }
             }
-        ], placement: 'bottom-start', children: fieldItems && (_jsx(Menu, { ...fieldMenu, as: StyledSearchPopover, focusControlEl: editor?.getBody() || undefined, mode: 'action', onItemClick: findAndRenameField })) }));
+        ], placement: 'bottom-start', children: fieldMenuItems && (_jsx(Menu, { id: menuID, items: fieldMenuItems, as: StyledSearchPopover, focusControlEl: editor?.getBody() || undefined, mode: 'action', onItemClick: findAndRenameField, variant: 'drill-down' })) }));
     useEffect(() => {
-        if (currentElementContent)
+        if (currentElementId)
             modalMethods.current = create(Modal, modalProps);
-    }, [currentElementContent]);
+    }, [currentElementId]);
     useEffect(() => {
         editor?.getDoc().addEventListener('click', handleElementClick);
+        const currentActiveEl = document.activeElement;
         editorRef.current?.insertHtml(defaultValue?.trim() || '', false);
+        currentActiveEl?.focus();
         return () => {
             editor?.getDoc().removeEventListener('click', handleElementClick);
         };
@@ -166,27 +176,27 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
     }, [modalProps]);
     const onEditorChange = (formEditor) => {
         if (formEditor) {
-            const targetEl = formEditor?.selection?.getBoundingClientRect();
-            const { left = 0, top = 0 } = targetEl;
+            const targetEl = formEditor.selection.getBoundingClientRect();
+            const { left = 0, top = 0 } = targetEl ?? {};
             setCurrentCursorPosition({
-                ...formEditor?.selection?.getBoundingClientRect(),
+                ...formEditor.selection.getBoundingClientRect(),
                 x: left,
                 y: top,
                 toJSON: () => { }
             });
-        }
-        if (formEditor?.selection?.isCollapsed()) {
-            // get the full line string
-            const selectedRange = formEditor.selection.getRng();
-            const endOffset = selectedRange.endOffset;
-            const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
-            const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];
-            if (fieldString?.startsWith('@') &&
-                fieldString.indexOf('@') === fieldString.lastIndexOf('@')) {
-                filterFieldMenu(fieldString.slice(1));
+            if (formEditor.selection.isCollapsed()) {
+                // get the full line string
+                const selectedRange = formEditor.selection.getRng();
+                const endOffset = selectedRange.endOffset;
+                const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
+                const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];
+                if (fieldString?.startsWith('@') &&
+                    fieldString.indexOf('@') === fieldString.lastIndexOf('@')) {
+                    filterFieldMenu(fieldString.slice(1));
+                }
+                else
+                    setShowFieldsPopover(false);
             }
-            else
-                setShowFieldsPopover(false);
         }
     };
     const onKeyDown = event => {
@@ -202,6 +212,7 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
                 {
                     createCustomElement: createPegaReferenceElement,
                     name: 'pega-reference',
+                    extensionAttributes: ['contenteditable'],
                     style: pegaReferenceElementStyle
                 }
             ], customActions: [

package/lib/components/DynamicContentEditor/DynamicContentEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useContext,\n  useRef,\n  useEffect,\n  useState\n} from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n  Button,\n  defaultThemeProp,\n  ForwardProps,\n  Menu,\n  MenuItemProps,\n  MenuProps,\n  Modal,\n  ModalManagerContext,\n  ModalMethods,\n  Popover,\n  PropsWithDefaults,\n  StyledPopover,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        form: { dynamicContentPicker, onSubmit },\n        onActiveFieldChange,\n        label,\n        toolbar,\n        fieldItems,\n        defaultValue,\n        onBlur,\n        ...restProps\n      }: PropsWithoutRef<DynamicContentEditorProps>,\n      ref: DynamicContentEditorProps['ref']\n    ) => {\n      const { create } = useContext(ModalManagerContext);\n      const t = useI18n();\n\n      const modalMethods = useRef<ModalMethods>();\n      const [editor, setEditor] = useState<TinyMCEEditor | undefined>();\n      const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n      const [fieldMenu, setFieldMenu] = useState<MenuProps>({ items: fieldItems || [] });\n      const [currentElementContent, setCurrentElementContent] = useState<string | null>(null);\n      const [currentCursorPosition, setCurrentCursorPosition] = useState({\n        bottom: 0,\n        height: 0,\n        left: 0,\n        right: 0,\n        top: 0,\n        width: 0,\n        x: 0,\n        y: 0,\n        toJSON: () => {}\n      });\n      const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n      const fieldPopoverRef = useRef<HTMLDivElement>(null);\n      const editorRef = useConsolidatedRef(ref);\n\n      const tooltip = getKeyCommand(\n        navigator.appVersion.includes('Mac'),\n        ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n      );\n\n      const insertField = (field: ItemType) => {\n        if (!editor) return;\n\n        const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n        if (bookmark) {\n          editor.selection.moveToBookmark(bookmark);\n          editor.selection.setContent(fieldContent);\n        } else {\n          editor.insertContent(fieldContent);\n        }\n\n        modalMethods.current?.dismiss();\n      };\n\n      const modalProps = {\n        children: dynamicContentPicker,\n        heading: t('rte_insert_field'),\n        actions: (\n          <>\n            <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n              {t('cancel')}\n            </Button>\n            <Button variant='primary' onClick={() => onSubmit(insertField)}>\n              {t('submit')}\n            </Button>\n          </>\n        ),\n        center: true,\n        onAfterClose: () => {\n          setBookmark(undefined);\n          setCurrentElementContent('');\n          onActiveFieldChange({ id: '', text: '' });\n        },\n        onBeforeOpen: () => {\n          if (currentElementContent)\n            onActiveFieldChange({ id: currentElementContent, text: currentElementContent });\n        }\n      };\n\n      const findAndRenameField = (fieldId: string) => {\n        if (!editor || !fieldItems) return;\n\n        const selectedRange = editor.selection.getRng();\n        const endOffset = selectedRange.endOffset;\n        const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n        if (stringToSearch === undefined) return;\n\n        const splitSearch = stringToSearch.split(' ');\n        const fieldString = splitSearch[splitSearch.length - 1];\n        const range = editor.getDoc().createRange();\n\n        const startPos = stringToSearch.lastIndexOf(fieldString);\n        const endPos = startPos + fieldString.length;\n        range.setStart(selectedRange.commonAncestorContainer, startPos);\n        range.setEnd(selectedRange.commonAncestorContainer, endPos);\n        editor.getDoc().getSelection()?.removeAllRanges();\n        editor.getDoc().getSelection()?.addRange(range);\n        const selectedFieldId = fieldItems.find(item => item.id === fieldId)?.id;\n        if (selectedFieldId) {\n          editor.selection.setContent(\n            `<pega-reference contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedFieldId}>${selectedFieldId}</pega-reference>`\n          );\n          setShowFieldsPopover(false);\n        }\n      };\n\n      const hidePopover = () => {\n        if (fieldPopoverRef) setShowFieldsPopover(false);\n      };\n\n      const filterFieldMenu = (searchString: string) => {\n        setShowFieldsPopover(true);\n        setFieldMenu({ items: fieldItems || [] });\n        if (/\\s/.test(searchString)) {\n          setShowFieldsPopover(false);\n          return;\n        }\n        if (searchString && fieldItems) {\n          const newFieldItems: MenuItemProps[] = fieldItems.filter(item =>\n            item.id.toLowerCase().startsWith(searchString.toLowerCase())\n          );\n          if (newFieldItems) {\n            setShowFieldsPopover(true);\n            setFieldMenu({ items: newFieldItems });\n          } else setShowFieldsPopover(false);\n        }\n      };\n\n      const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n        const targetEl = editorSelection.getNode();\n        const fieldValue = targetEl.getAttribute('data-rule-id');\n        setBookmark(editorSelection.getBookmark());\n        setCurrentElementContent(fieldValue);\n      };\n\n      const handleElementClick = ({ target }: MouseEvent) => {\n        if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(editor.selection);\n        }\n        hidePopover();\n      };\n\n      const onInsertField = (incEditor: TinyMCEEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        if (targetEl.tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(incEditor.selection);\n        } else {\n          modalMethods.current = create(Modal, modalProps);\n        }\n      };\n\n      const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        return targetEl.tagName === 'PEGA-REFERENCE';\n      };\n\n      const fieldSelectionPopover = (\n        <Popover\n          show={showFieldsPopover}\n          strategy='fixed'\n          ref={fieldPopoverRef}\n          target={{\n            getBoundingClientRect() {\n              return currentCursorPosition;\n            }\n          }}\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: () => {\n                  const iframe = editorRef.current?.element?.querySelector('iframe');\n                  const iframeRect = iframe?.getBoundingClientRect();\n                  const x = iframeRect?.x ?? 0;\n                  const y = iframeRect?.y ?? 0;\n                  return [x, y];\n                }\n              }\n            }\n          ]}\n          placement='bottom-start'\n        >\n          {fieldItems && (\n            <Menu\n              {...fieldMenu}\n              as={StyledSearchPopover}\n              focusControlEl={editor?.getBody() || undefined}\n              mode='action'\n              onItemClick={findAndRenameField}\n            />\n          )}\n        </Popover>\n      );\n\n      useEffect(() => {\n        if (currentElementContent) modalMethods.current = create(Modal, modalProps);\n      }, [currentElementContent]);\n\n      useEffect(() => {\n        editor?.getDoc().addEventListener('click', handleElementClick);\n        editorRef.current?.insertHtml(defaultValue?.trim() || '', false);\n        return () => {\n          editor?.getDoc().removeEventListener('click', handleElementClick);\n        };\n      }, [editor, editorRef.current]);\n\n      useEffect(() => {\n        if (modalMethods.current) {\n          modalMethods.current.update(modalProps);\n        }\n      }, [modalProps]);\n\n      const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n        if (formEditor) {\n          const targetEl = formEditor?.selection?.getBoundingClientRect();\n          const { left = 0, top = 0 } = targetEl;\n          setCurrentCursorPosition({\n            ...formEditor?.selection?.getBoundingClientRect(),\n            x: left,\n            y: top,\n            toJSON: () => {}\n          });\n        }\n\n        if (formEditor?.selection?.isCollapsed()) {\n          // get the full line string\n          const selectedRange = formEditor.selection.getRng();\n          const endOffset = selectedRange.endOffset;\n          const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n            0,\n            endOffset\n          );\n          const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];\n          if (\n            fieldString?.startsWith('@') &&\n            fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n          ) {\n            filterFieldMenu(fieldString.slice(1));\n          } else setShowFieldsPopover(false);\n        }\n      };\n\n      const onKeyDown: EditorProps['onKeyDown'] = event => {\n        if (\n          (event?.key === 'Enter' || event?.key === 'ArrowLeft' || event?.key === 'ArrowRight') &&\n          !!fieldPopoverRef.current\n        ) {\n          event?.preventDefault();\n        }\n        if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n          hidePopover();\n        }\n      };\n\n      return (\n        <>\n          <Editor\n            ref={editorRef}\n            {...restProps}\n            label={label}\n            toolbar={toolbar}\n            customComponents={[\n              {\n                createCustomElement: createPegaReferenceElement,\n                name: 'pega-reference',\n                style: pegaReferenceElementStyle\n              }\n            ]}\n            customActions={[\n              {\n                icon: 'code',\n                text: tooltip,\n                onMouseDown: () => {\n                  modalMethods.current = create(Modal, modalProps);\n                },\n                active: isPegaRefActive,\n                shortcut: {\n                  pattern: 'meta+191',\n                  description: tooltip,\n                  command: onInsertField\n                }\n              }\n            ]}\n            onInit={setEditor}\n            onChange={onEditorChange}\n            onBlur={() => {\n              onBlur?.();\n              hidePopover();\n            }}\n            onKeyDown={onKeyDown}\n          >\n            {fieldSelectionPopover}\n          </Editor>\n        </>\n      );\n    }\n  );\n\nexport default DynamicContentEditor;\n"]}
+{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n  Button,\n  defaultThemeProp,\n  ForwardProps,\n  Menu,\n  menuHelpers,\n  MenuProps,\n  Modal,\n  ModalMethods,\n  Popover,\n  PropsWithDefaults,\n  StyledPopover,\n  useModalManager,\n  useConsolidatedRef,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        form: { dynamicContentPicker, onSubmit },\n        onActiveFieldChange,\n        label,\n        toolbar,\n        fieldItems,\n        defaultValue,\n        onBlur,\n        ...restProps\n      }: PropsWithoutRef<DynamicContentEditorProps>,\n      ref: DynamicContentEditorProps['ref']\n    ) => {\n      const menuID = useUID();\n      const { create } = useModalManager();\n      const t = useI18n();\n\n      const modalMethods = useRef<ModalMethods>();\n      const [editor, setEditor] = useState<TinyMCEEditor | undefined>();\n      const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n      const [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems || []);\n      const [currentElementId, setCurrentElementId] = useState('');\n      const [currentElementContent, setCurrentElementContent] = useState('');\n      const [currentCursorPosition, setCurrentCursorPosition] = useState({\n        bottom: 0,\n        height: 0,\n        left: 0,\n        right: 0,\n        top: 0,\n        width: 0,\n        x: 0,\n        y: 0,\n        toJSON: () => {}\n      });\n      const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n      const fieldPopoverRef = useRef<HTMLDivElement>(null);\n      const editorRef = useConsolidatedRef(ref);\n\n      const tooltip = getKeyCommand(\n        navigator.appVersion.includes('Mac'),\n        ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n      );\n\n      const insertField = (field: ItemType) => {\n        if (!editor) return;\n\n        const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n        if (bookmark) {\n          editor.selection.moveToBookmark(bookmark);\n          editor.selection.setContent(fieldContent);\n        } else {\n          editor.insertContent(fieldContent);\n        }\n\n        modalMethods.current?.dismiss();\n      };\n\n      const modalProps = {\n        children: dynamicContentPicker,\n        heading: t('rte_insert_field'),\n        actions: (\n          <>\n            <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n              {t('cancel')}\n            </Button>\n            <Button variant='primary' onClick={() => onSubmit(insertField)}>\n              {t('submit')}\n            </Button>\n          </>\n        ),\n        center: true,\n        onAfterClose: () => {\n          setBookmark(undefined);\n          setCurrentElementId('');\n          setCurrentElementContent('');\n          onActiveFieldChange({ id: '', text: '' });\n        },\n        onBeforeOpen: () => {\n          if (currentElementId) {\n            onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n          }\n        }\n      };\n\n      const findAndRenameField = (fieldId: string) => {\n        if (!editor || !fieldMenuItems) return;\n\n        const selectedRange = editor.selection.getRng();\n        const endOffset = selectedRange.endOffset;\n        const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n        if (stringToSearch === undefined) return;\n\n        const splitSearch = stringToSearch.split(' ');\n        const fieldString = splitSearch[splitSearch.length - 1];\n        const range = editor.getDoc().createRange();\n\n        const startPos = stringToSearch.lastIndexOf(fieldString);\n        const endPos = startPos + fieldString.length;\n        range.setStart(selectedRange.commonAncestorContainer, startPos);\n        range.setEnd(selectedRange.commonAncestorContainer, endPos);\n        editor.getDoc().getSelection()?.removeAllRanges();\n        editor.getDoc().getSelection()?.addRange(range);\n\n        const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n        if (selectedField) {\n          editor.selection.setContent(\n            `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\".${selectedField.id}\">${selectedField.primary}</pega-reference>`\n          );\n          setShowFieldsPopover(false);\n        }\n      };\n\n      const hidePopover = () => {\n        if (fieldPopoverRef) setShowFieldsPopover(false);\n      };\n\n      const filterFieldMenu = (searchString: string) => {\n        setShowFieldsPopover(true);\n        setFieldMenuItems(fieldItems || []);\n        if (/\\s/.test(searchString)) {\n          setShowFieldsPopover(false);\n          return;\n        }\n        if (searchString && fieldMenuItems) {\n          const newFieldMenuItems: MenuProps['items'] = menuHelpers\n            .flatten(fieldMenuItems)\n            .filter(({ primary }) =>\n              primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n            );\n          if (newFieldMenuItems) {\n            setShowFieldsPopover(true);\n            setFieldMenuItems(newFieldMenuItems);\n          } else setShowFieldsPopover(false);\n        }\n      };\n\n      const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n        const targetEl = editorSelection.getNode() as HTMLElement;\n        const fieldId = targetEl.getAttribute('data-rule-id');\n        const fieldValue = targetEl.innerText;\n        setBookmark(editorSelection.getBookmark());\n        setCurrentElementId(fieldId || '');\n        setCurrentElementContent(fieldValue);\n      };\n\n      const handleElementClick = ({ target }: MouseEvent) => {\n        if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(editor.selection);\n        }\n        hidePopover();\n      };\n\n      const onInsertField = (incEditor: TinyMCEEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        if (targetEl.tagName === 'PEGA-REFERENCE') {\n          updateBookmarkAndCurrentElement(incEditor.selection);\n        } else {\n          modalMethods.current = create(Modal, modalProps);\n        }\n      };\n\n      const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n        const targetEl = incEditor.selection.getNode();\n        return targetEl.tagName === 'PEGA-REFERENCE';\n      };\n\n      const fieldSelectionPopover = (\n        <Popover\n          show={showFieldsPopover}\n          strategy='fixed'\n          ref={fieldPopoverRef}\n          target={{\n            getBoundingClientRect() {\n              return currentCursorPosition;\n            }\n          }}\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: () => {\n                  const iframe = editorRef.current?.element?.querySelector('iframe');\n                  const iframeRect = iframe?.getBoundingClientRect();\n                  const x = iframeRect?.x ?? 0;\n                  const y = iframeRect?.y ?? 0;\n                  return [x, y];\n                }\n              }\n            }\n          ]}\n          placement='bottom-start'\n        >\n          {fieldMenuItems && (\n            <Menu\n              id={menuID}\n              items={fieldMenuItems}\n              as={StyledSearchPopover}\n              focusControlEl={editor?.getBody() || undefined}\n              mode='action'\n              onItemClick={findAndRenameField}\n              variant='drill-down'\n            />\n          )}\n        </Popover>\n      );\n\n      useEffect(() => {\n        if (currentElementId) modalMethods.current = create(Modal, modalProps);\n      }, [currentElementId]);\n\n      useEffect(() => {\n        editor?.getDoc().addEventListener('click', handleElementClick);\n        const currentActiveEl = document.activeElement as HTMLElement | null;\n        editorRef.current?.insertHtml(defaultValue?.trim() || '', false);\n        currentActiveEl?.focus();\n        return () => {\n          editor?.getDoc().removeEventListener('click', handleElementClick);\n        };\n      }, [editor, editorRef.current]);\n\n      useEffect(() => {\n        if (modalMethods.current) {\n          modalMethods.current.update(modalProps);\n        }\n      }, [modalProps]);\n\n      const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n        if (formEditor) {\n          const targetEl = formEditor.selection.getBoundingClientRect();\n          const { left = 0, top = 0 } = targetEl ?? {};\n          setCurrentCursorPosition({\n            ...formEditor.selection.getBoundingClientRect(),\n            x: left,\n            y: top,\n            toJSON: () => {}\n          });\n\n          if (formEditor.selection.isCollapsed()) {\n            // get the full line string\n            const selectedRange = formEditor.selection.getRng();\n            const endOffset = selectedRange.endOffset;\n            const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n              0,\n              endOffset\n            );\n            const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];\n            if (\n              fieldString?.startsWith('@') &&\n              fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n            ) {\n              filterFieldMenu(fieldString.slice(1));\n            } else setShowFieldsPopover(false);\n          }\n        }\n      };\n\n      const onKeyDown: EditorProps['onKeyDown'] = event => {\n        if (\n          (event?.key === 'Enter' || event?.key === 'ArrowLeft' || event?.key === 'ArrowRight') &&\n          !!fieldPopoverRef.current\n        ) {\n          event?.preventDefault();\n        }\n        if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n          hidePopover();\n        }\n      };\n\n      return (\n        <>\n          <Editor\n            ref={editorRef}\n            {...restProps}\n            label={label}\n            toolbar={toolbar}\n            customComponents={[\n              {\n                createCustomElement: createPegaReferenceElement,\n                name: 'pega-reference',\n                extensionAttributes: ['contenteditable'],\n                style: pegaReferenceElementStyle\n              }\n            ]}\n            customActions={[\n              {\n                icon: 'code',\n                text: tooltip,\n                onMouseDown: () => {\n                  modalMethods.current = create(Modal, modalProps);\n                },\n                active: isPegaRefActive,\n                shortcut: {\n                  pattern: 'meta+191',\n                  description: tooltip,\n                  command: onInsertField\n                }\n              }\n            ]}\n            onInit={setEditor}\n            onChange={onEditorChange}\n            onBlur={() => {\n              onBlur?.();\n              hidePopover();\n            }}\n            onKeyDown={onKeyDown}\n          >\n            {fieldSelectionPopover}\n          </Editor>\n        </>\n      );\n    }\n  );\n\nexport default DynamicContentEditor;\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { EditorProps } from '@pega/cosmos-react-rte';
-import { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
+import { MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 export declare type ItemType = {
     id: string;
     text: string;
@@ -13,7 +13,7 @@ export interface DynamicContentEditorProps extends EditorProps {
     };
     onActiveFieldChange: (field: ItemType) => void;
     /** Property selection array */
-    fieldItems?: MenuItemProps[];
+    fieldItems?: MenuProps['items'];
     defaultValue?: string;
     onBlur?: () => void;
 }

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AAEvF,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}
+{"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAEnF,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { EditorProps } from '@pega/cosmos-react-rte';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport type ItemType = {\n  id: string;\n  text: string;\n};\n\nexport interface DynamicContentEditorProps extends EditorProps {\n  /** Insert field form */\n  form: {\n    onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n    dynamicContentPicker: ReactNode;\n  };\n  onActiveFieldChange: (field: ItemType) => void;\n  /** Property selection array */\n  fieldItems?: MenuItemProps[];\n  defaultValue?: string;\n  onBlur?: () => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n  updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}
+{"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { EditorProps } from '@pega/cosmos-react-rte';\nimport { MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport type ItemType = {\n  id: string;\n  text: string;\n};\n\nexport interface DynamicContentEditorProps extends EditorProps {\n  /** Insert field form */\n  form: {\n    onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n    dynamicContentPicker: ReactNode;\n  };\n  onActiveFieldChange: (field: ItemType) => void;\n  /** Property selection array */\n  fieldItems?: MenuProps['items'];\n  defaultValue?: string;\n  onBlur?: () => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n  updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/hint/show-hint.js';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { CodeEditorProps } from './CodeEditor.types';
+declare const CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps>;
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.d.ts.map

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAUf,OAAO,qCAAqC,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAkC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EAEL,eAAe,EAGhB,MAAM,oBAAoB,CAAC;AAuC5B,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8HjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// cSpell:words unfocus
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle } 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 { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
+import { StyledCodeEditor } from './CodeEditor.styles';
+import getCodeSuggestions from './getCodeSuggestions';
+defineMode('expression', () => {
+    const tokens = [
+        {
+            token: /[a-zA-Z_$]*\.[\w$]+/,
+            style: 'ex-properties'
+        },
+        {
+            token: /(^@+)(\([\w.-]+:[\w.-]+\))*([\w.]+)(\s*)/,
+            style: 'ex-functions'
+        }
+    ];
+    return {
+        token(stream) {
+            // eslint-disable-next-line no-restricted-syntax
+            for (const element of tokens) {
+                if (stream.match('#') || stream.match('//'))
+                    stream.skipToEnd();
+                else if (stream.match(element.token))
+                    return element.style;
+            }
+            stream.next();
+            return null;
+        }
+    };
+});
+const defaultConfigOptions = {
+    lineWrapping: true,
+    smartIndent: true,
+    autoCloseBrackets: true,
+    extraKeys: { Tab: false, 'Shift-Tab': false }
+};
+const CodeEditor = forwardRef(({ fetchSuggestions, autoCompleteTriggers, editorConfigProps, codeEditorHandle, defaultValue = '', loading = false, readOnly, errors, onChange, ...props }, ref) => {
+    const [value, setCode] = useState(defaultValue);
+    const [suggestions, setSuggestions] = useState([]);
+    const [codeMirror, setCodeMirror] = useState(null);
+    const [autoCompleteTrigger, setAutoCompleteTrigger] = useState('');
+    const [codeEditorContainer, setCodeEditorContainer] = useElement();
+    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);
+    const mounted = useRef(false);
+    useImperativeHandle(codeEditorHandle, () => ({
+        insertText: (text) => {
+            if (codeMirror) {
+                const cur = codeMirror.getCursor();
+                codeMirror.replaceRange(text, cur);
+            }
+        },
+        getValue: () => {
+            return codeMirror?.getValue();
+        }
+    }), [codeMirror]);
+    const autoComplete = (codeEditor) => {
+        const hintOptions = {
+            completeSingle: false,
+            completeOnSingleClick: true,
+            closeOnUnfocus: true,
+            suggestions,
+            container: codeEditorContainer,
+            loading,
+            autoCompleteTrigger
+        };
+        showHint(codeEditor, getCodeSuggestions, hintOptions);
+    };
+    const onBeforeChange = async (editor, _data, textvalue) => {
+        setCode(textvalue);
+        onChange?.(textvalue);
+        const currentCursor = editor.getCursor();
+        const textTillCursorPos = editor.getValue().split('\n')[currentCursor.line];
+        let start = textTillCursorPos?.lastIndexOf(' ');
+        if (start === -1) {
+            start = 0;
+        }
+        const currentWord = textTillCursorPos.substring(start, currentCursor.ch);
+        /* Below regex is used to find the query token which is present before the triggering character
+            to send update list.  */
+        const regexp = /[\w$]*(\.+[\w$)(\][]*)+/g;
+        const tokenArray = [...currentWord.matchAll(regexp)];
+        const autoCompleteTriggerChar = editor.getTokenAt(currentCursor)
+            .string;
+        if (!codeMirror?.getTokenAt(codeMirror.getCursor()).string.includes(autoCompleteTrigger))
+            setSuggestions([]);
+        if (autoCompleteTriggers?.includes(autoCompleteTriggerChar) && fetchSuggestions) {
+            setAutoCompleteTrigger(autoCompleteTriggerChar);
+            const newSuggestions = [
+                ...(await fetchSuggestions(autoCompleteTriggerChar, tokenArray.length === 0 ? '' : tokenArray[tokenArray.length - 1][0]))
+            ];
+            if (mounted.current)
+                setSuggestions(newSuggestions);
+        }
+    };
+    useEffect(() => {
+        if (codeMirror && ((suggestions.length > 0 && value.length > 0) || loading)) {
+            autoComplete(codeMirror);
+        }
+        else
+            codeMirror?.closeHint();
+    }, [suggestions, loading]);
+    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, ...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 })] }));
+});
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words unfocus\nimport {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useRef,\n  useState,\n  useEffect,\n  useImperativeHandle\n} from 'react';\nimport { Controlled as ReactCodeMirror } from 'react-codemirror2';\nimport {\n  showHint,\n  defineMode,\n  Editor,\n  Position,\n  EditorChange,\n  EditorConfiguration\n} from 'codemirror';\nimport 'codemirror/addon/edit/closebrackets';\nimport 'codemirror/addon/hint/show-hint.js';\n\nimport { useConsolidatedRef, useElement, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\n\nimport {\n  AutoCompleteTriggerType,\n  CodeEditorProps,\n  EditorState,\n  SuggestionsType\n} from './CodeEditor.types';\nimport { StyledCodeEditor } from './CodeEditor.styles';\nimport getCodeSuggestions from './getCodeSuggestions';\n\ndefineMode('expression', () => {\n  const tokens = [\n    {\n      token: /[a-zA-Z_$]*\\.[\\w$]+/,\n      style: 'ex-properties'\n    },\n    {\n      token: /(^@+)(\\([\\w.-]+:[\\w.-]+\\))*([\\w.]+)(\\s*)/,\n      style: 'ex-functions'\n    }\n  ];\n\n  return {\n    token(stream) {\n      // eslint-disable-next-line no-restricted-syntax\n      for (const element of tokens) {\n        if (stream.match('#') || stream.match('//')) stream.skipToEnd();\n        else if (stream.match(element.token)) return element.style;\n      }\n      stream.next();\n      return null;\n    }\n  };\n});\n\nconst defaultConfigOptions: Pick<\n  EditorConfiguration,\n  'lineWrapping' | 'smartIndent' | 'autoCloseBrackets' | 'extraKeys'\n> = {\n  lineWrapping: true,\n  smartIndent: true,\n  autoCloseBrackets: true,\n  extraKeys: { Tab: false, 'Shift-Tab': false }\n};\n\nconst CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps> = forwardRef(\n  (\n    {\n      fetchSuggestions,\n      autoCompleteTriggers,\n      editorConfigProps,\n      codeEditorHandle,\n      defaultValue = '',\n      loading = false,\n      readOnly,\n      errors,\n      onChange,\n      ...props\n    }: PropsWithoutRef<CodeEditorProps>,\n    ref: CodeEditorProps['ref']\n  ) => {\n    const [value, setCode] = useState<string>(defaultValue);\n    const [suggestions, setSuggestions] = useState<SuggestionsType[]>([]);\n    const [codeMirror, setCodeMirror] = useState<Editor | null>(null);\n    const [autoCompleteTrigger, setAutoCompleteTrigger] = useState('');\n    const [codeEditorContainer, setCodeEditorContainer] = useElement<HTMLDivElement>();\n    const codeEditorConsolidatedRef = useConsolidatedRef(setCodeEditorContainer, ref);\n    const mounted = useRef(false);\n\n    useImperativeHandle<any, EditorState>(\n      codeEditorHandle,\n      () => ({\n        insertText: (text: string) => {\n          if (codeMirror) {\n            const cur: Position = codeMirror.getCursor();\n            codeMirror.replaceRange(text, cur);\n          }\n        },\n        getValue: () => {\n          return codeMirror?.getValue();\n        }\n      }),\n      [codeMirror]\n    );\n\n    const autoComplete = (codeEditor: Editor) => {\n      const hintOptions = {\n        completeSingle: false,\n        completeOnSingleClick: true,\n        closeOnUnfocus: true,\n        suggestions,\n        container: codeEditorContainer,\n        loading,\n        autoCompleteTrigger\n      };\n      showHint(codeEditor, getCodeSuggestions, hintOptions);\n    };\n\n    const onBeforeChange = async (editor: Editor, _data: EditorChange, textvalue: string) => {\n      setCode(textvalue);\n      onChange?.(textvalue);\n      const currentCursor = editor.getCursor();\n      const textTillCursorPos = editor.getValue().split('\\n')[currentCursor.line];\n      let start = textTillCursorPos?.lastIndexOf(' ');\n      if (start === -1) {\n        start = 0;\n      }\n      const currentWord = textTillCursorPos.substring(start, currentCursor.ch);\n      /* Below regex is used to find the query token which is present before the triggering character\n          to send update list.  */\n      const regexp = /[\\w$]*(\\.+[\\w$)(\\][]*)+/g;\n      const tokenArray = [...currentWord.matchAll(regexp)];\n      const autoCompleteTriggerChar = editor.getTokenAt(currentCursor)\n        .string as AutoCompleteTriggerType;\n\n      if (!codeMirror?.getTokenAt(codeMirror.getCursor()).string.includes(autoCompleteTrigger))\n        setSuggestions([]);\n\n      if (autoCompleteTriggers?.includes(autoCompleteTriggerChar) && fetchSuggestions) {\n        setAutoCompleteTrigger(autoCompleteTriggerChar);\n        const newSuggestions = [\n          ...(await fetchSuggestions(\n            autoCompleteTriggerChar,\n            tokenArray.length === 0 ? '' : tokenArray[tokenArray.length - 1][0]\n          ))\n        ];\n        if (mounted.current) setSuggestions(newSuggestions);\n      }\n    };\n\n    useEffect(() => {\n      if (codeMirror && ((suggestions.length > 0 && value.length > 0) || loading)) {\n        autoComplete(codeMirror);\n      } else codeMirror?.closeHint();\n    }, [suggestions, loading]);\n\n    useEffect(() => {\n      mounted.current = true;\n      return () => {\n        mounted.current = false;\n      };\n    }, []);\n\n    return (\n      <StyledCodeEditor\n        container={{\n          direction: 'column',\n          justify: 'between'\n        }}\n        item={{\n          grow: 1\n        }}\n        ref={codeEditorConsolidatedRef}\n        errors={errors}\n        readOnly={readOnly}\n        isLoading={loading}\n        {...props}\n      >\n        <ReactCodeMirror\n          value={value}\n          onBeforeChange={onBeforeChange}\n          options={{ ...defaultConfigOptions, ...editorConfigProps }}\n          editorDidMount={editor => {\n            editor.setSize('100%', '100%');\n            setCodeMirror(editor);\n          }}\n        />\n        {errors && <StyledFormFieldInfo status='error'>{errors}</StyledFormFieldInfo>}\n      </StyledCodeEditor>\n    );\n  }\n);\n\nexport default CodeEditor;\n"]}

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const StyledLoading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCodeEditor: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FlexProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    isLoading?: boolean | undefined;
+    errors?: string | undefined;
+    readOnly?: boolean | undefined;
+}, never>;
+//# sourceMappingURL=CodeEditor.styles.d.ts.map

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;SAihB5B,CAAC"}