@react-fabric/monaco 1.0.0-beta.9 → 1.0.2

package/dist/types/components/CodeEditor.d.ts

@@ -1,30 +1,50 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import * as monacoEditor from "monaco-editor";
 export interface MonacoEditorRef {
+    focus: () => void;
     validate: () => boolean;
     getValue: () => string | undefined;
+    addAction?: monacoEditor.editor.IStandaloneCodeEditor["addAction"];
+    addCommand?: monacoEditor.editor.IStandaloneCodeEditor["addCommand"];
+    executeCommand?: monacoEditor.editor.IStandaloneCodeEditor["executeCommand"];
+    setModel?: monacoEditor.editor.IStandaloneCodeEditor["setModel"];
 }
 export interface BaseEditorProps {
-    value?: string | AnyObject;
+    value?: string;
     required?: boolean;
     readOnly?: boolean;
     minimal?: boolean;
-    language?: "json" | "css" | "html" | "text" | "markdown";
     onChange?: (value: string) => void;
-}
-type EditorProps = BaseEditorProps & ({
-    language: "json";
+    language?: "css" | "text" | "markdown" | "yaml" | "xml" | "json" | "html";
     schema?: Array<{
         uri: string;
         schema: KeyValue;
     }>;
-    handlebarSuggestions?: never;
-} | {
-    language: "html";
-    schema?: never;
     handlebarSuggestions?: Array<{
         text: string;
         description?: string;
     }>;
-});
-export declare const CodeEditor: ({ ref, value, schema, handlebarSuggestions, required, readOnly, minimal, onChange, language, }: EditorProps & RefProp<MonacoEditorRef>) => import("react/jsx-runtime").JSX.Element;
-export {};
+}
+/**
+ * CodeEditor component to render a code editor using Monaco Editor.
+ * It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
+ * The editor can be configured to be read-only, minimal, and can handle changes in the code.
+ * It provides a ref to access the editor's value and validation methods.
+ *
+ * @example
+ * ```jsx
+ * <CodeEditor
+ *   value={initialValue}
+ *   schema={[{ uri: "http://example.com/schema.json", schema: {} }]}
+ *   handlebarSuggestions={[{ text: "example", description: "An example suggestion" }]}
+ *   required={true}
+ *   readOnly={false}
+ *   minimal={false}
+ *   onChange={(value) => console.log("Code changed:", value)}
+ *   language="json"
+ * />
+ * ```
+ *
+ * @see {@link https://microsoft.github.io/monaco-editor/}
+ */
+export declare function CodeEditor({ ref, value, schema, handlebarSuggestions, required, readOnly, minimal, onChange, language, }: BaseEditorProps & RefProp<MonacoEditorRef>): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -1 +1,27 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export declare const MONACO_PACKAGE = "@react-fabric/monaco";
+export declare const MONACO_VERSION = "1.0.0";
 export { CodeEditor } from "./components/CodeEditor";

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@react-fabric/monaco",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.2",
   "description": "RUF: Monaco editor",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
-  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/monaco",
+  "repository": "https://github.com/adarshpastakia/react-fabric/tree/main/packages/monaco",
   "source": "src/index.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
@@ -22,8 +24,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "makelink": "yarn link",
-    "removelink": "yarn unlink",
     "prebuild": "rm -rf ./dist",
     "build:dts": "tsc -p ./tsconfig.build.json",
     "build:rollup": "rollup -c ../../rollup.config.mjs",
@@ -33,21 +33,21 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.9",
-    "@react-fabric/utilities": "^1.0.0-beta.9",
-    "classnames": "^2.5.1",
-    "monaco-editor": "^0.52.0",
-    "react-monaco-editor": "^0.56.2"
+    "@monaco-editor/react": "~4.7.0",
+    "@react-fabric/core": "^1.0.2",
+    "@react-fabric/utilities": "^1.0.2",
+    "axios": "1.20.0",
+    "monaco-editor": "^0.57.0"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "i18next": "~26.3.6",
+    "react": "~19.3.0",
+    "react-dom": "~19.3.0",
+    "react-i18next": "~17.0.11"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=24.0.0",
+    "npm": ">=11.0.0"
   },
-  "gitHead": "3dde23444bcebf68c30198af5c2fef55572da38f"
+  "gitHead": "b9fc477b5b3a13b782977bf17762027f376ac30e"
 }

package/src/components/CodeEditor.tsx

@@ -21,61 +21,79 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Section,
-  useDebounce,
-  useIsDark,
-  useResizeObserver,
-} from "@react-fabric/core";
+import MonacoEditor from "@monaco-editor/react";
+import { Layout, useApplicationContext, useDebounce, useResizeObserver } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { isEmpty, isString } from "@react-fabric/utilities";
-import classNames from "classnames";
-import type monacoEditor from "monaco-editor";
-import {
-  useCallback,
-  useDeferredValue,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import MonacoEditor from "react-monaco-editor";
-import classes from "./CodeEditor.module.css";
+import { cn, isEmpty, isString } from "@react-fabric/utilities";
+import * as monacoEditor from "monaco-editor";
+import { useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 export interface MonacoEditorRef {
+  focus: () => void;
   validate: () => boolean;
   getValue: () => string | undefined;
+
+  addAction?: monacoEditor.editor.IStandaloneCodeEditor["addAction"];
+  addCommand?: monacoEditor.editor.IStandaloneCodeEditor["addCommand"];
+  executeCommand?: monacoEditor.editor.IStandaloneCodeEditor["executeCommand"];
+  setModel?: monacoEditor.editor.IStandaloneCodeEditor["setModel"];
 }
 
 export interface BaseEditorProps {
-  value?: string | AnyObject;
+  value?: string;
 
   required?: boolean;
   readOnly?: boolean;
 
   minimal?: boolean;
 
-  language?: "json" | "css" | "html" | "text" | "markdown";
-
   onChange?: (value: string) => void;
+
+  language?: "css" | "text" | "markdown" | "yaml" | "xml" | "json" | "html";
+  schema?: Array<{ uri: string; schema: KeyValue }>;
+  handlebarSuggestions?: Array<{ text: string; description?: string }>;
 }
 
-type EditorProps = BaseEditorProps &
-  (
-    | {
-        language: "json";
-        schema?: Array<{ uri: string; schema: KeyValue }>;
-        handlebarSuggestions?: never;
-      }
-    | {
-        language: "html";
-        schema?: never;
-        handlebarSuggestions?: Array<{ text: string; description?: string }>;
-      }
-  );
+monacoEditor.editor.defineTheme("my-light", {
+  base: "vs", // can also be 'vs' or 'hc-black'
+  inherit: true, // set to false to completely replace the builtin rules
+  rules: [],
+  colors: {
+    "minimap.background": "#8881",
+  },
+});
+monacoEditor.editor.defineTheme("my-dark", {
+  base: "vs-dark", // can also be 'vs' or 'hc-black'
+  inherit: true, // set to false to completely replace the builtin rules
+  rules: [],
+  colors: {
+    "minimap.background": "#8881",
+  },
+});
 
-export const CodeEditor = ({
+/**
+ * CodeEditor component to render a code editor using Monaco Editor.
+ * It supports JSON and HTML languages with optional schema validation and handlebar suggestions.
+ * The editor can be configured to be read-only, minimal, and can handle changes in the code.
+ * It provides a ref to access the editor's value and validation methods.
+ *
+ * @example
+ * ```jsx
+ * <CodeEditor
+ *   value={initialValue}
+ *   schema={[{ uri: "http://example.com/schema.json", schema: {} }]}
+ *   handlebarSuggestions={[{ text: "example", description: "An example suggestion" }]}
+ *   required={true}
+ *   readOnly={false}
+ *   minimal={false}
+ *   onChange={(value) => console.log("Code changed:", value)}
+ *   language="json"
+ * />
+ * ```
+ *
+ * @see {@link https://microsoft.github.io/monaco-editor/}
+ */
+export function CodeEditor({
   ref,
   value,
   schema,
@@ -85,43 +103,34 @@ export const CodeEditor = ({
   minimal,
   onChange,
   language = "json",
-}: EditorProps & RefProp<MonacoEditorRef>) => {
-  const [editorRef, setEditorRef] = useState<AnyObject>();
-  const [monacoRef, setMonacoRef] = useState<typeof monacoEditor>();
-  const isDark = useIsDark();
+}: BaseEditorProps & RefProp<MonacoEditorRef>) {
+  const [editorRef, setEditorRef] = useState<monacoEditor.editor.IStandaloneCodeEditor>();
+  const monacoRef = useRef<typeof monacoEditor>(null);
+  const { isDark } = useApplicationContext();
 
   /** ***************** watch theme change *******************/
   const [theme, setTheme] = useState("");
   useLayoutEffect(() => {
-    editorRef && setTheme(isDark ? "vs-dark" : "light");
-  }, [isDark, editorRef]);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setTheme(isDark ? "my-dark" : "my-light");
+  }, [isDark]);
 
   /** ***************** watch editor container resize *******************/
-  const resizeHandler = useCallback(
-    (size: AnyObject) => editorRef?.layout(size),
-    [editorRef],
-  );
+  const resizeHandler = useCallback((size: monacoEditor.editor.IDimension) => editorRef?.layout(size), [editorRef]);
   const containerRef = useResizeObserver(resizeHandler);
 
   /** ***************** defer value and pass to editor as defaultValue *******************/
   const deferredValue = useDeferredValue(value);
-  const codeValue = useMemo(
-    () =>
-      isString(deferredValue)
-        ? deferredValue
-        : JSON.stringify(deferredValue, null, 4),
-    [deferredValue],
-  );
+  const codeValue = useMemo(() => (isString(deferredValue) ? deferredValue : JSON.stringify(deferredValue, null, 4)), [deferredValue]);
 
   const handleChange = useDebounce(
     (value: string) => {
       const model = editorRef?.getModel();
       if (model) {
-        const markers = monacoRef?.editor.getModelMarkers({
+        const markers = monacoRef.current?.editor.getModelMarkers({
           owner: model.getLanguageId(),
         });
-        markers?.filter((m) => m.severity > 7).length === 0 &&
-          onChange?.(value);
+        if (markers?.filter((m) => m.severity === monacoEditor.MarkerSeverity.Error).length === 0) onChange?.(value);
       }
     },
     [onChange, editorRef],
@@ -131,36 +140,43 @@ export const CodeEditor = ({
   useImperativeHandle(
     ref,
     () => ({
+      addAction: editorRef?.addAction.bind(editorRef),
+      addCommand: editorRef?.addCommand.bind(editorRef),
+      executeCommand: editorRef?.executeCommand.bind(editorRef),
+      setModel: editorRef?.setModel.bind(editorRef),
+      focus() {
+        editorRef?.focus();
+      },
       getValue() {
         return editorRef?.getValue();
       },
       validate() {
         const model = editorRef?.getModel();
         if (model) {
-          const markers = monacoRef?.editor.getModelMarkers({
+          const markers = monacoRef.current?.editor.getModelMarkers({
             owner: model.getLanguageId(),
           });
-          return markers?.filter((m) => m.severity > 8).length === 0;
+          return markers?.filter((m) => m.severity === monacoEditor.MarkerSeverity.Error).length === 0;
         }
         try {
           let val = editorRef?.getValue();
-          if (language === "json") val = JSON.parse(val);
+          if (language === "json") val = JSON.parse(val ?? "{}") as never;
           return required ? !isEmpty(val) : true;
         } catch {
           return false;
         }
       },
     }),
-    [required, language],
+    [editorRef, language, required],
   );
 
-  const disposeRef = useRef<AnyObject>();
+  const disposeRef = useRef<monacoEditor.IDisposable>(null);
   const schemaUri = useCallback(
     (monaco: typeof monacoEditor) => {
       if (language === "json" && schema) {
-        const [main, ...rest] = schema;
+        const [main, ...rest] = schema as Array<{ uri: string; schema: KeyValue }>;
         // configure the JSON language support with schemas and schema associations
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        monaco?.json?.jsonDefaults.setDiagnosticsOptions({
           validate: true,
           allowComments: false,
           schemas: [
@@ -174,48 +190,45 @@ export const CodeEditor = ({
       }
       if (language === "html" && handlebarSuggestions) {
         disposeRef.current?.dispose?.();
-        disposeRef.current = monaco.languages.registerCompletionItemProvider(
-          "html",
-          {
-            triggerCharacters: ["{{"],
-            provideCompletionItems: function (model, position) {
-              // find out if we are completing a property in the 'dependencies' object.
-              const textUntilPosition = model.getValueInRange({
-                startLineNumber: 1,
-                startColumn: 1,
-                endLineNumber: position.lineNumber,
-                endColumn: position.column,
-              });
-              const match = textUntilPosition.match(/\{\{(.*)([^}])?$/);
-              if (!match) {
-                return { suggestions: [] };
-              }
-              const word = model.getWordUntilPosition(position);
-              const range = {
-                startLineNumber: position.lineNumber,
-                endLineNumber: position.lineNumber,
-                startColumn: word.startColumn,
-                endColumn: word.endColumn,
-              };
-              return {
-                suggestions: handlebarSuggestions.map((hs) => ({
-                  label: hs.text,
-                  kind: monaco.languages.CompletionItemKind.Text,
-                  documentation: hs.description,
-                  insertText: hs.text,
-                  range,
-                })),
-              };
-            },
+        disposeRef.current = monaco.languages.registerCompletionItemProvider("html", {
+          triggerCharacters: ["{{"],
+          provideCompletionItems: function (model, position) {
+            // find out if we are completing a property in the 'dependencies' object.
+            const textUntilPosition = model.getValueInRange({
+              startLineNumber: 1,
+              startColumn: 1,
+              endLineNumber: position.lineNumber,
+              endColumn: position.column,
+            });
+            const match = textUntilPosition.match(/\{\{(.*)([^}])?$/);
+            if (!match) {
+              return { suggestions: [] };
+            }
+            const word = model.getWordUntilPosition(position);
+            const range = {
+              startLineNumber: position.lineNumber,
+              endLineNumber: position.lineNumber,
+              startColumn: word.startColumn,
+              endColumn: word.endColumn,
+            };
+            return {
+              suggestions: handlebarSuggestions.map((hs) => ({
+                label: hs.text,
+                kind: monaco.languages.CompletionItemKind.Text,
+                documentation: hs.description,
+                insertText: hs.text,
+                range,
+              })),
+            };
           },
-        );
+        });
       }
     },
-    [schema, language],
+    [language, schema, handlebarSuggestions],
   );
 
-  const resetSchema = useCallback((_: unknown, monaco: typeof monacoEditor) => {
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+  useEffect(() => {
+    monacoRef.current?.json?.jsonDefaults.setDiagnosticsOptions({
       validate: true,
       allowComments: false,
       schemas: [],
@@ -223,25 +236,18 @@ export const CodeEditor = ({
   }, []);
 
   return (
-    <Section>
-      <div
-        ref={containerRef}
-        data-testid="code-editor"
-        className={classNames(classes.codeEditor, "area-content")}
-      >
+    <Layout className="relative">
+      <div ref={containerRef} data-ref="codeEditor" className={cn("fabric-codeEditor", "absolute inset-0")}>
         <MonacoEditor
-          editorDidMount={(e, m) => [
-            !!e && setEditorRef(e),
-            !!m && setMonacoRef(m),
-          ]}
-          editorWillMount={schemaUri}
-          editorWillUnmount={resetSchema}
+          onMount={(e, m) => [!!e && setEditorRef(e), !!m && (monacoRef.current = m as typeof monacoEditor)]}
+          beforeMount={schemaUri}
+          theme={theme}
           value={codeValue}
           language={language}
           onChange={handleChange}
-          theme={theme}
-          className={classes.editor}
+          className={"fabric-editor"}
           options={{
+            theme,
             readOnly,
             minimap: {
               enabled: !minimal,
@@ -254,6 +260,6 @@ export const CodeEditor = ({
           }}
         />
       </div>
-    </Section>
+    </Layout>
   );
-};
+}

package/src/index.ts

@@ -1,24 +1,29 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
+export const MONACO_PACKAGE = "@react-fabric/monaco";
+export const MONACO_VERSION = "1.0.0";
+
 export { CodeEditor } from "./components/CodeEditor";

package/dist/cjs/components/CodeEditor.module.css

@@ -1 +0,0 @@
-@layer util{.codeEditor{border:solid transparent;border-width:1px 1px 2px;direction:ltr;overflow:hidden;&:has(:global(.monaco-editor.focused)){border-color:theme(borderColor.primary.500)}.editor{&>:global(.monaco-editor){--vscode-menu-background:theme(colors.tint.50)!important;--vscode-menu-border:theme(borderColor.base)!important;--vscode-focusBorder:transparent!important;--vscode-menu-selectionBackground:color(from var(--primary) srgb r g b/80%)!important;--vscode-editor-background:var(--fabric-bg)!important;--vscode-editor-foreground:var(--fabric-text)!important;--vscode-breadcrumb-background:var(--fabric-bg)!important;--vscode-editorGutter-background:color(from theme(colors.tint.50) srgb r g g/50%)!important;--vscode-minimapSlider-background:color(from var(--tint) srgb r g b/20%)!important;--vscode-minimapSlider-hoverBackground:color(from var(--tint) srgb r g b/25%)!important;--vscode-minimapSlider-activeBackground:color(from var(--tint) srgb r g b/30%)!important;--vscode-input-border:var(--primary)!important;--vscode-editorStickyScroll-background:var(--fabric-bg)!important;--vscode-editorMarkerNavigation-background:var(--fabric-bg)!important;--vscode-editor-wordHighlightTextBackground:color(from theme(colors.accent.700) srgb r g b/20%)!important}& :global(.minimap-decorations-layer){background-color:color(from theme(colors.tint.50) srgb r g g/50%)!important}& :global(.folded-background){opacity:.5}& :global(.monaco-findInput) textarea{min-height:unset;resize:none}& :global{.editor-widget.suggest-widget .message{font-size:.75rem}}& span{padding:0}}}.editorTools{@apply bg-base}}

package/dist/esm/components/CodeEditor.module.css

@@ -1 +0,0 @@
-@layer util{.codeEditor{border:solid transparent;border-width:1px 1px 2px;direction:ltr;overflow:hidden;&:has(:global(.monaco-editor.focused)){border-color:theme(borderColor.primary.500)}.editor{&>:global(.monaco-editor){--vscode-menu-background:theme(colors.tint.50)!important;--vscode-menu-border:theme(borderColor.base)!important;--vscode-focusBorder:transparent!important;--vscode-menu-selectionBackground:color(from var(--primary) srgb r g b/80%)!important;--vscode-editor-background:var(--fabric-bg)!important;--vscode-editor-foreground:var(--fabric-text)!important;--vscode-breadcrumb-background:var(--fabric-bg)!important;--vscode-editorGutter-background:color(from theme(colors.tint.50) srgb r g g/50%)!important;--vscode-minimapSlider-background:color(from var(--tint) srgb r g b/20%)!important;--vscode-minimapSlider-hoverBackground:color(from var(--tint) srgb r g b/25%)!important;--vscode-minimapSlider-activeBackground:color(from var(--tint) srgb r g b/30%)!important;--vscode-input-border:var(--primary)!important;--vscode-editorStickyScroll-background:var(--fabric-bg)!important;--vscode-editorMarkerNavigation-background:var(--fabric-bg)!important;--vscode-editor-wordHighlightTextBackground:color(from theme(colors.accent.700) srgb r g b/20%)!important}& :global(.minimap-decorations-layer){background-color:color(from theme(colors.tint.50) srgb r g g/50%)!important}& :global(.folded-background){opacity:.5}& :global(.monaco-findInput) textarea{min-height:unset;resize:none}& :global{.editor-widget.suggest-widget .message{font-size:.75rem}}& span{padding:0}}}.editorTools{@apply bg-base}}

package/src/components/CodeEditor.module.css

@@ -1,98 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-/* stylelint-disable custom-property-pattern */
-
-@layer util {
-  .codeEditor {
-    direction: ltr;
-    overflow: hidden;
-    border: 1px solid transparent;
-    border-bottom-width: 2px;
-
-    &:has(:global(.monaco-editor.focused)) {
-      border-color: theme(borderColor.primary.500);
-    }
-
-    .editor {
-      & > :global(.monaco-editor) {
-        --vscode-menu-background: theme(colors.tint.50) !important;
-        --vscode-menu-border: theme(borderColor.base) !important;
-        --vscode-focusBorder: transparent !important;
-        --vscode-menu-selectionBackground: color(
-          from var(--primary) srgb r g b / 80%
-        ) !important;
-        --vscode-editor-background: var(--fabric-bg) !important;
-        --vscode-editor-foreground: var(--fabric-text) !important;
-        --vscode-breadcrumb-background: var(--fabric-bg) !important;
-        --vscode-editorGutter-background: color(
-          from theme(colors.tint.50) srgb r g g / 50%
-        ) !important;
-        --vscode-minimapSlider-background: color(
-          from var(--tint) srgb r g b / 20%
-        ) !important;
-        --vscode-minimapSlider-hoverBackground: color(
-          from var(--tint) srgb r g b / 25%
-        ) !important;
-        --vscode-minimapSlider-activeBackground: color(
-          from var(--tint) srgb r g b / 30%
-        ) !important;
-        --vscode-input-border: var(--primary) !important;
-        --vscode-editorStickyScroll-background: var(--fabric-bg) !important;
-        --vscode-editorMarkerNavigation-background: var(--fabric-bg) !important;
-        --vscode-editor-wordHighlightTextBackground: color(
-          from theme(colors.accent.700) srgb r g b / 20%
-        ) !important;
-      }
-
-      & :global(.minimap-decorations-layer) {
-        background-color: color(
-          from theme(colors.tint.50) srgb r g g / 50%
-        ) !important;
-      }
-
-      & :global(.folded-background) {
-        opacity: 0.5;
-      }
-
-      & :global(.monaco-findInput) textarea {
-        resize: initial;
-        min-height: unset;
-      }
-
-      & :global {
-        .editor-widget.suggest-widget .message {
-          font-size: 0.75rem;
-        }
-      }
-
-      & span {
-        padding: 0;
-      }
-    }
-  }
-
-  .editorTools {
-    @apply bg-base;
-  }
-}