@snack-uikit/code-editor 0.1.2-preview-cb79db34.0 → 0.1.3-preview-c01bf388.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.1.2 (2024-04-23)
+
+### Only dependencies have been changed
+* [@snack-uikit/utils@3.3.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
 ## 0.1.1 (2023-12-14)
 
 ### Only dependencies have been changed

package/README.md

@@ -19,6 +19,7 @@
 | value | `string` | - | Value of the current model |
 | language | `string` | - | Language of the current model |
 | path | `string` | - | Path of the current model Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
+| theme | `string` | "light" | The theme for the monaco Available options "vs-dark" \| "light" Define new themes by `monaco.editor.defineTheme` |
 | line | `number` | - | The line to jump on it |
 | loading | `ReactNode` | "Loading..." | The loading screen before the editor will be mounted |
 | options | `IStandaloneEditorConstructionOptions` | - | IStandaloneEditorConstructionOptions |

package/dist/components/CodeEditor.d.ts

@@ -5,5 +5,5 @@ export type CodeEditorProps = WithSupportProps<{
      * <br> По дефолту берется значение из useTheme внутри
      */
     themeClassName?: string;
-}> & Omit<EditorProps, 'theme'>;
-export declare function CodeEditor({ themeClassName, className, options, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+}> & EditorProps;
+export declare function CodeEditor({ themeClassName, className, theme, options, loading, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeEditor.js

@@ -12,13 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Editor, useMonaco } from '@monaco-editor/react';
 import { useMemo } from 'react';
+import { Spinner } from '@snack-uikit/loaders';
 import { excludeSupportProps, extractSupportProps } from '@snack-uikit/utils';
-import { DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
+import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { useCalculatedThemeValues } from './hooks';
-import styles from './styles.module.css';
 import { isDark } from './utils';
 export function CodeEditor(_a) {
-    var { themeClassName, className, options } = _a, props = __rest(_a, ["themeClassName", "className", "options"]);
+    var { themeClassName, className, theme, options, loading } = _a, props = __rest(_a, ["themeClassName", "className", "theme", "options", "loading"]);
     const monaco = useMonaco();
     const themeValues = useCalculatedThemeValues(themeClassName);
     const themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
@@ -53,6 +53,7 @@ export function CodeEditor(_a) {
                 },
             ],
             colors: {
+                'editor.background': '#00000000',
                 'editor.foreground': themeValues.sys.neutral.textMain,
                 'editor.selectionBackground': themeValues.sys.primary.decorHovered,
                 'editor.lineHighlightBackground': themeValues.sys.neutral.decorDefault + '3F',
@@ -61,20 +62,20 @@ export function CodeEditor(_a) {
                 'scrollbarSlider.background': themeValues.sys.neutral.accentDefault + '52',
                 'scrollbarSlider.hoverBackground': themeValues.sys.neutral.accentDefault + '7B',
                 'scrollbarSlider.activeBackground': themeValues.sys.neutral.accentDefault + 'A4',
-                "editorLineNumber.foreground": themeValues.sys.neutral.textLight,
-                "editorLineNumber.activeForeground": themeValues.sys.neutral.textMain
+                'editorLineNumber.foreground': themeValues.sys.neutral.textLight,
+                'editorLineNumber.activeForeground': themeValues.sys.neutral.textMain,
             },
         }
         : DEFAULT_THEME_VALUES))), [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys]);
     const dark = useMemo(() => { var _a; return isDark((_a = themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys.available.complementary) !== null && _a !== void 0 ? _a : ''); }, [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys.available.complementary]);
     monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snackDark', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs-dark' }));
     monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs' }));
-    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { children: _jsx(Editor, Object.assign({ theme: dark ? 'snackDark' : 'snack', className: styles.editor, options: Object.assign(Object.assign({ minimap: {
-                    enabled: false,
-                } }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
-                ? {
-                    fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
-                    fontWeight: themeValues.mono.body.s['font-weight'],
-                }
-                : DEFAULT_THEME_OPTIONS)), options) }, excludeSupportProps(props))) })));
+    const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign({}, CODE_EDITOR_OPTIONS), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
+        ? {
+            fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
+            fontWeight: themeValues.mono.body.s['font-weight'],
+            fontFamily: themeValues.mono.body.s['font-family'],
+        }
+        : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
+    return (_jsx(Editor, Object.assign({}, extractSupportProps(props), { theme: (theme !== null && theme !== void 0 ? theme : dark) ? 'snackDark' : 'snack', className: className, loading: loading !== null && loading !== void 0 ? loading : _jsx(Spinner, {}), options: mergedOptions }, excludeSupportProps(props))));
 }

package/dist/components/constants.d.ts

@@ -15,6 +15,7 @@ export declare const DEFAULT_THEME_VALUES: {
         token: string;
     }[];
     colors: {
+        'editor.background': string;
         'editor.foreground': string;
         'editor.selectionBackground': string;
         'editor.lineHighlightBackground': string;
@@ -23,15 +24,16 @@ export declare const DEFAULT_THEME_VALUES: {
         'scrollbarSlider.background': string;
         'scrollbarSlider.hoverBackground': string;
         'scrollbarSlider.activeBackground': string;
-        "editorLineNumber.foreground": string;
-        "editorLineNumber.activeForeground": string;
+        'editorLineNumber.foreground': string;
+        'editorLineNumber.activeForeground': string;
     };
 };
 export declare const DEFAULT_THEME_OPTIONS: {
-    body: {
+    mono: {
         s: {
             fontWeight: string;
             fontSize: number;
+            fontFamily: string;
         };
     };
 };
@@ -69,7 +71,31 @@ export declare const THEME_VARS: {
             s: {
                 'font-weight': string;
                 'font-size': string;
+                'font-family': string;
             };
         };
     };
 };
+export declare const CODE_EDITOR_OPTIONS: {
+    minimap: {
+        enabled: boolean;
+    };
+    padding: {
+        top: number;
+        bottom: number;
+    };
+    tabSize: number;
+    scrollBeyondLastLine: boolean;
+    fixedOverflowWidgets: boolean;
+    lineDecorationsWidth: number;
+    lineNumbersMinChars: number;
+    scrollbar: {
+        verticalScrollbarSize: number;
+        horizontalScrollbarSize: number;
+        useShadows: boolean;
+    };
+    contextmenu: boolean;
+    guides: {
+        indentation: boolean;
+    };
+};

package/dist/components/constants.js

@@ -11,6 +11,7 @@ export const DEFAULT_THEME_VALUES = {
         { foreground: '#3280e8', token: 'keyword' },
     ],
     colors: {
+        'editor.background': '#00000000',
         'editor.foreground': '#333333',
         'editor.selectionBackground': '#decdfb',
         'editor.lineHighlightBackground': '#decdfb',
@@ -19,15 +20,16 @@ export const DEFAULT_THEME_VALUES = {
         'scrollbarSlider.background': '#75757552',
         'scrollbarSlider.hoverBackground': '#7575757B',
         'scrollbarSlider.activeBackground': '#757575A4',
-        "editorLineNumber.foreground": "#333333",
-        "editorLineNumber.activeForeground": "#898989"
+        'editorLineNumber.foreground': '#333333',
+        'editorLineNumber.activeForeground': '#898989',
     },
 };
 export const DEFAULT_THEME_OPTIONS = {
-    body: {
+    mono: {
         s: {
             fontWeight: '400',
-            fontSize: 14,
+            fontSize: 12,
+            fontFamily: 'SB Sans Text Mono',
         },
     },
 };
@@ -65,7 +67,31 @@ export const THEME_VARS = {
             s: {
                 'font-weight': '--mono-body-s-font-weight',
                 'font-size': '--mono-body-s-font-size',
+                'font-family': '--mono-body-s-font-family',
             },
         },
     },
 };
+export const CODE_EDITOR_OPTIONS = {
+    minimap: {
+        enabled: false,
+    },
+    padding: {
+        top: 4,
+        bottom: 4,
+    },
+    tabSize: 4,
+    scrollBeyondLastLine: false,
+    fixedOverflowWidgets: true,
+    lineDecorationsWidth: 4,
+    lineNumbersMinChars: 2,
+    scrollbar: {
+        verticalScrollbarSize: 8,
+        horizontalScrollbarSize: 8,
+        useShadows: false,
+    },
+    contextmenu: false,
+    guides: {
+        indentation: false,
+    },
+};

package/dist/components/hooks.d.ts

@@ -32,6 +32,7 @@ export declare function useCalculatedThemeValues(themeClassNameProps?: string):
             s: {
                 'font-weight': string;
                 'font-size': string;
+                'font-family': string;
             };
         };
     };

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.2-preview-cb79db34.0",
+  "version": "0.1.3-preview-c01bf388.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,7 +33,8 @@
   "scripts": {},
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
-    "@snack-uikit/utils": "3.2.1-preview-cb79db34.0"
+    "@snack-uikit/loaders": "0.5.2",
+    "@snack-uikit/utils": "3.3.0"
   },
-  "gitHead": "ec06c40c0ed64aa42d8842734a8c532f5c4603e6"
+  "gitHead": "81d58386bd6b1a8ab786092bfb598811c5e31045"
 }

package/src/components/CodeEditor.tsx

@@ -1,11 +1,11 @@
 import { Editor, EditorProps, useMonaco } from '@monaco-editor/react';
 import { useMemo } from 'react';
 
+import { Spinner } from '@snack-uikit/loaders';
 import { excludeSupportProps, extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
+import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { useCalculatedThemeValues } from './hooks';
-import styles from './styles.module.scss';
 import { isDark } from './utils';
 
 export type CodeEditorProps = WithSupportProps<{
@@ -14,9 +14,9 @@ export type CodeEditorProps = WithSupportProps<{
    */
   themeClassName?: string;
 }> &
-  Omit<EditorProps, 'theme'>;
+  EditorProps;
 
-export function CodeEditor({ themeClassName, className, options, ...props }: CodeEditorProps) {
+export function CodeEditor({ themeClassName, className, theme, options, loading, ...props }: CodeEditorProps) {
   const monaco = useMonaco();
 
   const themeValues = useCalculatedThemeValues(themeClassName);
@@ -56,6 +56,7 @@ export function CodeEditor({ themeClassName, className, options, ...props }: Cod
               },
             ],
             colors: {
+              'editor.background': '#00000000',
               'editor.foreground': themeValues.sys.neutral.textMain,
               'editor.selectionBackground': themeValues.sys.primary.decorHovered,
               'editor.lineHighlightBackground': themeValues.sys.neutral.decorDefault + '3F',
@@ -64,8 +65,8 @@ export function CodeEditor({ themeClassName, className, options, ...props }: Cod
               'scrollbarSlider.background': themeValues.sys.neutral.accentDefault + '52',
               'scrollbarSlider.hoverBackground': themeValues.sys.neutral.accentDefault + '7B',
               'scrollbarSlider.activeBackground': themeValues.sys.neutral.accentDefault + 'A4',
-              "editorLineNumber.foreground": themeValues.sys.neutral.textLight,
-              "editorLineNumber.activeForeground": themeValues.sys.neutral.textMain
+              'editorLineNumber.foreground': themeValues.sys.neutral.textLight,
+              'editorLineNumber.activeForeground': themeValues.sys.neutral.textMain,
             },
           }
         : DEFAULT_THEME_VALUES),
@@ -81,25 +82,29 @@ export function CodeEditor({ themeClassName, className, options, ...props }: Cod
   monaco?.editor.defineTheme('snackDark', { ...themeDataWithoutBase, base: 'vs-dark' });
   monaco?.editor.defineTheme('snack', { ...themeDataWithoutBase, base: 'vs' });
 
+  const mergedOptions = useMemo(
+    () => ({
+      ...CODE_EDITOR_OPTIONS,
+      ...(themeValues?.mono
+        ? {
+            fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
+            fontWeight: themeValues.mono.body.s['font-weight'],
+            fontFamily: themeValues.mono.body.s['font-family'],
+          }
+        : DEFAULT_THEME_OPTIONS.mono.s),
+      ...options,
+    }),
+    [options, themeValues?.mono],
+  );
+
   return (
-    <div className={className} {...extractSupportProps(props)}>
-      <Editor
-        theme={dark ? 'snackDark' : 'snack'}
-        className={styles.editor}
-        options={{
-          minimap: {
-            enabled: false,
-          },
-          ...(themeValues?.mono
-            ? {
-                fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
-                fontWeight: themeValues.mono.body.s['font-weight'],
-              }
-            : DEFAULT_THEME_OPTIONS),
-          ...options,
-        }}
-        {...excludeSupportProps(props)}
-      />
-    </div>
+    <Editor
+      {...extractSupportProps(props)}
+      theme={theme ?? dark ? 'snackDark' : 'snack'}
+      className={className}
+      loading={loading ?? <Spinner />}
+      options={mergedOptions}
+      {...excludeSupportProps(props)}
+    />
   );
 }

package/src/components/constants.ts

@@ -11,6 +11,7 @@ export const DEFAULT_THEME_VALUES = {
     { foreground: '#3280e8', token: 'keyword' },
   ],
   colors: {
+    'editor.background': '#00000000',
     'editor.foreground': '#333333',
     'editor.selectionBackground': '#decdfb',
     'editor.lineHighlightBackground': '#decdfb',
@@ -19,16 +20,17 @@ export const DEFAULT_THEME_VALUES = {
     'scrollbarSlider.background': '#75757552',
     'scrollbarSlider.hoverBackground': '#7575757B',
     'scrollbarSlider.activeBackground': '#757575A4',
-    "editorLineNumber.foreground": "#333333",
-    "editorLineNumber.activeForeground": "#898989"
+    'editorLineNumber.foreground': '#333333',
+    'editorLineNumber.activeForeground': '#898989',
   },
 };
 
 export const DEFAULT_THEME_OPTIONS = {
-  body: {
+  mono: {
     s: {
       fontWeight: '400',
-      fontSize: 14,
+      fontSize: 12,
+      fontFamily: 'SB Sans Text Mono',
     },
   },
 };
@@ -67,7 +69,32 @@ export const THEME_VARS = {
       s: {
         'font-weight': '--mono-body-s-font-weight',
         'font-size': '--mono-body-s-font-size',
+        'font-family': '--mono-body-s-font-family',
       },
     },
   },
 };
+
+export const CODE_EDITOR_OPTIONS = {
+  minimap: {
+    enabled: false,
+  },
+  padding: {
+    top: 4,
+    bottom: 4,
+  },
+  tabSize: 4,
+  scrollBeyondLastLine: false,
+  fixedOverflowWidgets: true,
+  lineDecorationsWidth: 4,
+  lineNumbersMinChars: 2,
+  scrollbar: {
+    verticalScrollbarSize: 8,
+    horizontalScrollbarSize: 8,
+    useShadows: false,
+  },
+  contextmenu: false,
+  guides: {
+    indentation: false,
+  },
+};

package/dist/components/styles.module.css

@@ -1,13 +0,0 @@
-.editor{
-  background-color:inherit;
-}
-.editor::after{
-  pointer-events:none;
-  content:"";
-  position:absolute;
-  top:0;
-  bottom:0;
-  width:100%;
-  opacity:var(--opacity-a004, 0.04);
-  background-color:var(--sys-neutral-accent-default, #6f717c);
-}

package/src/components/styles.module.scss

@@ -1,19 +0,0 @@
-@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
-
-.editor {
-  background-color: inherit;
-
-  &::after {
-    pointer-events: none;
-    content: '';
-
-    position: absolute;
-    top: 0;
-    bottom: 0;
-
-    width: 100%;
-
-    opacity: $opacity-a004;
-    background-color: $sys-neutral-accent-default;
-  }
-}