pixel-react 1.6.3 → 1.6.6

package/src/components/Editor/Editor.tsx

@@ -1,248 +1,250 @@
-import {
-  useRef,
-  useState,
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
-import MonacoEditor, { OnMount } from '@monaco-editor/react';
-import { js as beautifyJS, html as beautifyHTML } from 'js-beautify';
-import { dropdownPositionType, EditorProps, DyanamicObj } from './types';
-import './Editor.scss';
-import VariableDropdown from './VariableDropdown';
-
-const Editor = forwardRef<any, EditorProps>(
-  (
-    {
-      width,
-      height,
-      readOnly,
-      value = '',
-      handleChange,
-      setValue,
-      variableOptionsList = [],
-      language = 'json',
-      theme = 'light',
-    },
-    ref
-  ) => {
-    const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
-    const decorationsRef = useRef<string[]>([]);
-    const [currentLine, setCurrentLine] = useState<number>(0);
-    const [showDropdown, setShowDropdown] = useState<boolean>(false);
-    const [dropdownPosition, setDropdownPosition] =
-      useState<dropdownPositionType>({ top: 0, left: 0 });
-
-    const handleEditorDidMount: OnMount = (editor: any) => {
-      editorRef.current = editor;
-
-      editor.onDidChangeCursorPosition((e: any) => {
-        setCurrentLine(e.position.lineNumber);
-      });
-
-      editor.onDidChangeModelContent(() => {
-        const content = editor.getValue();
-        setValue(content);
-
-        const position = editor.getPosition();
-        const model = editor.getModel();
-        if (position && model) {
-          const currentLineContent = model.getLineContent(position.lineNumber);
-          if (currentLineContent[position.column - 2] === '$') {
-            const visiblePosition = editor.getScrolledVisiblePosition(position);
-            if (visiblePosition) {
-              setDropdownPosition({
-                top: visiblePosition.top,
-                left: visiblePosition.left,
-              });
-              setShowDropdown(true);
-            }
-          } else {
-            setShowDropdown(false);
-          }
-        }
-      });
-    };
-
-    useEffect(() => {
-      if (editorRef.current && currentLine) {
-        const decorations = [
-          {
-            range: {
-              startLineNumber: currentLine,
-              startColumn: 1,
-              endLineNumber: currentLine,
-              endColumn: 1,
-            },
-            options: {
-              isWholeLine: true,
-              className: 'current-line-background',
-            },
-          },
-        ];
-
-        decorationsRef.current = editorRef.current.deltaDecorations(
-          decorationsRef.current,
-          decorations
-        );
-      }
-    }, [currentLine]);
-
-    const handleSelectSuggestion = (suggestion: string, type: string) => {
-      if (editorRef.current) {
-        const editor = editorRef.current;
-        const position = editor.getPosition();
-        if (position) {
-          editor.executeEdits('', [
-            {
-              range: {
-                startLineNumber: position.lineNumber,
-                startColumn: position.column,
-                endLineNumber: position.lineNumber,
-                endColumn: position.column,
-              },
-              text: `{${type}_${suggestion}}`,
-            },
-          ]);
-          setShowDropdown(false);
-        }
-      }
-    };
-
-    const handleSelectVariable = (option: DyanamicObj) => {
-      handleSelectSuggestion(
-        option?.name,
-        option?.type === 'GLOBAL'
-          ? 'GV'
-          : option?.type === 'LOCAL'
-            ? 'LV'
-            : 'PEV'
-      );
-    };
-
-    const mapLanguageToContentType = (language: string | undefined): string => {
-      switch (language) {
-        case 'javascript':
-        case 'typescript':
-          return 'javascript';
-        case 'json':
-          return 'json';
-        case 'html':
-          return 'html';
-        case 'xml':
-          return 'xml';
-        default:
-          return 'plain text';
-      }
-    };
-
-    const beautifyContent = (content: string, language: string): string => {
-      switch (language) {
-        case 'json':
-          return beautifyJS(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            keep_array_indentation: true,
-            break_chained_methods: true,
-            brace_style: 'collapse',
-            space_before_conditional: true,
-            unescape_strings: true,
-            jslint_happy: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            comma_first: true,
-            e4x: true,
-            indent_empty_lines: true,
-          });
-        case 'javascript':
-          return beautifyJS(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            keep_array_indentation: true,
-            break_chained_methods: true,
-            brace_style: 'collapse',
-            space_before_conditional: true,
-            unescape_strings: true,
-            jslint_happy: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            comma_first: true,
-            e4x: true,
-            indent_empty_lines: true,
-          });
-        case 'html':
-          return beautifyHTML(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            indent_empty_lines: true,
-          });
-        case 'xml':
-          return beautifyHTML(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            indent_empty_lines: true,
-          });
-        case 'plain text':
-          return content;
-        default:
-          return content;
-      }
-    };
-
-    // Expose editorRef and helper functions to parent via forwarded ref
-    useImperativeHandle(ref, () => ({
-      getEditorInstance: () => editorRef.current,
-      beautify: () => {
-        if (editorRef.current) {
-          const content = editorRef.current.getValue();
-          const lang = editorRef.current.getModel()?.getLanguageId();
-          const language = mapLanguageToContentType(lang);
-          const beautifiedContent = beautifyContent(content, language);
-          editorRef.current.setValue(beautifiedContent);
-        }
-      },
-    }));
-
-    return (
-      <div style={{ width, height }} className="ff-editor-container">
-        <MonacoEditor
-          height="90%"
-          width="100%"
-          language={language}
-          value={value}
-          options={{
-            lineNumbers: 'on',
-            wordWrap: 'on',
-            autoClosingBrackets: 'always',
-            scrollBeyondLastLine: false,
-            readOnly,
-          }}
-          onMount={handleEditorDidMount}
-          onChange={(newValue, event) => handleChange(newValue, event)}
-          theme={theme}
-        />
-        {showDropdown && dropdownPosition && (
-          <VariableDropdown
-            optionsList={variableOptionsList}
-            onSelectVariable={handleSelectVariable}
-            dropdownPosition={dropdownPosition}
-          />
-        )}
-      </div>
-    );
-  }
-);
-
-export default Editor;
+import {
+  useRef,
+  useState,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import MonacoEditor, { OnMount } from '@monaco-editor/react';
+import { js as beautifyJS, html as beautifyHTML } from 'js-beautify';
+import { dropdownPositionType, EditorProps, DyanamicObj } from './types';
+import './Editor.scss';
+import VariableDropdown from './VariableDropdown';
+
+const Editor = forwardRef<any, EditorProps>(
+  (
+    {
+      width,
+      height,
+      readOnly,
+      value = '',
+      handleChange,
+      setValue,
+      variableOptionsList = [],
+      language = 'json',
+      theme = 'light',
+    },
+    ref
+  ) => {
+    const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
+    const decorationsRef = useRef<string[]>([]);
+    const [currentLine, setCurrentLine] = useState<number>(0);
+    const [showDropdown, setShowDropdown] = useState<boolean>(false);
+    const [dropdownPosition, setDropdownPosition] =
+      useState<dropdownPositionType>({ top: 0, left: 0 });
+
+    const handleEditorDidMount: OnMount = (editor: any) => {
+      editorRef.current = editor;
+
+      editor.onDidChangeCursorPosition((e: any) => {
+        setCurrentLine(e.position.lineNumber);
+      });
+
+      editor.onDidChangeModelContent(() => {
+        const content = editor.getValue();
+        setValue(content);
+
+        const position = editor.getPosition();
+        const model = editor.getModel();
+        if (position && model) {
+          const currentLineContent = model.getLineContent(position.lineNumber);
+          if (currentLineContent[position.column - 2] === '$') {
+            const visiblePosition = editor.getScrolledVisiblePosition(position);
+            if (visiblePosition) {
+              setDropdownPosition({
+                top: visiblePosition.top,
+                left: visiblePosition.left,
+              });
+              setShowDropdown(true);
+            }
+          } else {
+            setShowDropdown(false);
+          }
+        }
+      });
+    };
+
+    useEffect(() => {
+      if (editorRef.current && currentLine) {
+        const decorations = [
+          {
+            range: {
+              startLineNumber: currentLine,
+              startColumn: 1,
+              endLineNumber: currentLine,
+              endColumn: 1,
+            },
+            options: {
+              isWholeLine: true,
+              className: 'current-line-background',
+            },
+          },
+        ];
+
+        decorationsRef.current = editorRef.current.deltaDecorations(
+          decorationsRef.current,
+          decorations
+        );
+      }
+    }, [currentLine]);
+
+    const handleSelectSuggestion = (suggestion: string, type: string) => {
+      if (editorRef.current) {
+        const editor = editorRef.current;
+        const position = editor.getPosition();
+        if (position) {
+          editor.executeEdits('', [
+            {
+              range: {
+                startLineNumber: position.lineNumber,
+                startColumn: position.column,
+                endLineNumber: position.lineNumber,
+                endColumn: position.column,
+              },
+              text: `{${type}_${suggestion}}`,
+            },
+          ]);
+          setShowDropdown(false);
+        }
+      }
+    };
+
+    const handleSelectVariable = (option: DyanamicObj) => {
+      handleSelectSuggestion(
+        option?.name,
+        option?.type === 'GLOBAL'
+          ? 'GV'
+          : option?.type === 'LOCAL'
+          ? 'LV'
+          : 'PEV'
+      );
+    };
+
+    const mapLanguageToContentType = (language: string | undefined): string => {
+      switch (language) {
+        case 'javascript':
+        case 'typescript':
+          return 'javascript';
+        case 'json':
+          return 'json';
+        case 'html':
+          return 'html';
+        case 'xml':
+          return 'xml';
+        default:
+          return 'plain text';
+      }
+    };
+
+    const beautifyContent = (content: string, language: string): string => {
+      switch (language) {
+        case 'json':
+          return beautifyJS(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            keep_array_indentation: true,
+            break_chained_methods: true,
+            brace_style: 'collapse',
+            space_before_conditional: true,
+            unescape_strings: true,
+            jslint_happy: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            comma_first: true,
+            e4x: true,
+            indent_empty_lines: true,
+          });
+        case 'javascript':
+          return beautifyJS(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            keep_array_indentation: true,
+            break_chained_methods: true,
+            brace_style: 'collapse',
+            space_before_conditional: true,
+            unescape_strings: true,
+            jslint_happy: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            comma_first: true,
+            e4x: true,
+            indent_empty_lines: true,
+          });
+        case 'html':
+          return beautifyHTML(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            indent_empty_lines: true,
+          });
+        case 'xml':
+          return beautifyHTML(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            indent_empty_lines: true,
+          });
+        case 'plain text':
+          return content;
+        default:
+          return content;
+      }
+    };
+
+    // Expose editorRef and helper functions to parent via forwarded ref
+    useImperativeHandle(ref, () => ({
+      getEditorInstance: () => editorRef.current,
+      beautify: () => {
+        if (editorRef.current) {
+          const content = editorRef.current.getValue();
+          const lang = editorRef.current.getModel()?.getLanguageId();
+          const language = mapLanguageToContentType(lang);
+          const beautifiedContent = beautifyContent(content, language);
+          editorRef.current.setValue(beautifiedContent);
+        }
+      },
+    }));
+
+    return (
+      <div style={{ width, height }} className="ff-editor-container">
+        <MonacoEditor
+          height="90%"
+          width="100%"
+          language={language}
+          value={value}
+          options={{
+            lineNumbers: 'on',
+            wordWrap: 'on',
+            autoClosingBrackets: 'always',
+            scrollBeyondLastLine: false,
+            readOnly,
+          }}
+          onMount={handleEditorDidMount}
+          onChange={(newValue, event) => handleChange(newValue, event)}
+          theme={theme}
+        />
+        {showDropdown && dropdownPosition && (
+          <VariableDropdown
+            position="absolute"
+            width="300px"
+            optionsList={variableOptionsList}
+            onSelectVariable={handleSelectVariable}
+            dropdownPosition={dropdownPosition}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+export default Editor;

package/src/components/Editor/VariableDropdown.scss

@@ -1,21 +1,27 @@
-.ff-variable-dropdown {
-  position: absolute;
-  width: 200px;
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--variable-dropdown-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 3px;
-  z-index: 9999;
-}
-.ff-variable-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  cursor: pointer;
-  &:hover {
-    background-color: var(--hover-color);
-  }
-}
+.ff-variable-dropdown {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--variable-dropdown-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+  z-index: 9999;
+  overflow: hidden;
+  overflow-y: auto;
+  &.absolute {
+    position: absolute;
+  }
+  &.relative {
+    position: relative;
+  }
+}
+.ff-variable-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--hover-color);
+  }
+}

package/src/components/Editor/VariableDropdown.tsx

@@ -1,49 +1,57 @@
-import type { FC, ReactNode } from 'react';
-import { VariableDropdownProps, DyanamicObj } from './types';
-import Icon from '../Icon';
-import './VariableDropdown.scss';
-import Typography from '../Typography';
-
-const VariableDropdown: FC<VariableDropdownProps> = ({
-  optionsList = [],
-  onSelectVariable,
-  dropdownPosition,
-}): ReactNode => {
-  return (
-    <div
-      className="ff-variable-dropdown"
-      style={{
-        top: dropdownPosition.top + 30,
-        left: dropdownPosition.left - 30,
-      }}
-    >
-      {optionsList?.map((option: DyanamicObj): ReactNode => {
-        return (
-          <div
-            className="ff-variable-option"
-            onClick={() => onSelectVariable(option)}
-            key={option?.id}
-          >
-            <Typography as="span" fontSize={14}>
-              {option?.name}
-            </Typography>
-            <Icon
-              name={
-                option?.type === 'LOCAL'
-                  ? 'local_variable_icon'
-                  : option?.type === 'GLOBAL'
-                    ? 'global_variable_icon'
-                    : 'project_env_variable_icon'
-              }
-              height={16}
-              width={16}
-              hoverEffect
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default VariableDropdown;
+import type { FC, ReactNode } from 'react';
+import { VariableDropdownProps, DyanamicObj } from './types';
+import Icon from '../Icon';
+import './VariableDropdown.scss';
+import Typography from '../Typography';
+import cx from 'classnames';
+
+const VariableDropdown: FC<VariableDropdownProps> = ({
+  optionsList = [],
+  onSelectVariable,
+  dropdownPosition,
+  position = 'relative',
+  width = '300px',
+}): ReactNode => {
+  return (
+    <div
+      className={cx('ff-variable-dropdown', position)}
+      style={
+        dropdownPosition
+          ? {
+              top: dropdownPosition.top + 30,
+              left: dropdownPosition.left - 30,
+              width,
+            }
+          : { width }
+      }
+    >
+      {optionsList?.map((option: DyanamicObj): ReactNode => {
+        return (
+          <div
+            className="ff-variable-option"
+            onClick={() => onSelectVariable(option)}
+            key={option?.id}
+          >
+            <Typography as="span" fontSize={14}>
+              {option?.name}
+            </Typography>
+            <Icon
+              name={
+                option?.type === 'LOCAL'
+                  ? 'local_variable_icon'
+                  : option?.type === 'GLOBAL'
+                  ? 'global_variable_icon'
+                  : 'project_env_variable_icon'
+              }
+              height={16}
+              width={16}
+              hoverEffect
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default VariableDropdown;