@react-fabric/monaco 1.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 React Fabric, 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.

package/README.md

@@ -0,0 +1,10 @@
+# React-Fabric: Monaco editor
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/monaco
+```
+
+#### Usage

package/dist/cjs/components/CodeEditor.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _toArray = require('@babel/runtime/helpers/toArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var MonacoEditor = require('react-monaco-editor');
+var CodeEditor_module = require('./CodeEditor.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CodeEditor = function CodeEditor(_ref) {
+  var ref = _ref.ref,
+    value = _ref.value,
+    schema = _ref.schema,
+    required = _ref.required,
+    readOnly = _ref.readOnly,
+    minimal = _ref.minimal,
+    onChange = _ref.onChange,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? "json" : _ref$language;
+  var _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorRef = _useState2[0],
+    setEditorRef = _useState2[1];
+  var _useState3 = react.useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    monacoRef = _useState4[0],
+    setMonacoRef = _useState4[1];
+  var isDark = core.useIsDark();
+
+  /** ***************** watch theme change *******************/
+  var _useState5 = react.useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    theme = _useState6[0],
+    setTheme = _useState6[1];
+  react.useLayoutEffect(function () {
+    editorRef && setTheme(isDark ? "vs-dark" : "light");
+  }, [isDark, editorRef]);
+
+  /** ***************** watch editor container resize *******************/
+  var resizeHandler = react.useCallback(function (size) {
+    return editorRef === null || editorRef === void 0 ? void 0 : editorRef.layout(size);
+  }, [editorRef]);
+  var containerRef = core.useResizeObserver(resizeHandler);
+
+  /** ***************** defer value and pass to editor as defaultValue *******************/
+  var deferredValue = react.useDeferredValue(value);
+  var codeValue = react.useMemo(function () {
+    return utilities.isString(deferredValue) ? deferredValue : JSON.stringify(deferredValue, null, 4);
+  }, [deferredValue]);
+  var handleChange = core.useDebounce(function (value) {
+    var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
+    if (model) {
+      var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
+        owner: model.getLanguageId()
+      });
+      (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
+        return m.severity > 7;
+      }).length) === 0 && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
+    }
+  }, [onChange, editorRef], 1000);
+  react.useImperativeHandle(ref, function () {
+    return {
+      getValue: function getValue() {
+        return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
+      },
+      validate: function validate() {
+        var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
+        if (model) {
+          var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
+            owner: model.getLanguageId()
+          });
+          return (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
+            return m.severity > 8;
+          }).length) === 0;
+        }
+        try {
+          var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
+          if (language === "json") val = JSON.parse(val);
+          return required ? !utilities.isEmpty(val) : true;
+        } catch (_unused) {
+          return false;
+        }
+      }
+    };
+  }, [required, language]);
+  var schemaUri = react.useCallback(function (monaco) {
+    if (schema) {
+      var _schema = _toArray(schema),
+        main = _schema[0],
+        rest = _schema.slice(1);
+      // configure the JSON language support with schemas and schema associations
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        allowComments: false,
+        schemas: [_objectSpread({
+          fileMatch: ["*"]
+        }, main)].concat(_toConsumableArray(rest))
+      });
+    }
+  }, [schema]);
+  var resetSchema = react.useCallback(function (_, monaco) {
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      allowComments: false,
+      schemas: []
+    });
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(core.Section, {
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: containerRef,
+      className: classNames(CodeEditor_module.codeEditor, "area-content"),
+      children: /*#__PURE__*/jsxRuntime.jsx(MonacoEditor, {
+        editorDidMount: function editorDidMount(e, m) {
+          return [!!e && setEditorRef(e), !!m && setMonacoRef(m)];
+        },
+        editorWillMount: schemaUri,
+        editorWillUnmount: resetSchema,
+        value: codeValue,
+        language: language,
+        onChange: handleChange,
+        theme: theme,
+        className: CodeEditor_module.editor,
+        options: {
+          readOnly: readOnly,
+          minimap: {
+            enabled: !minimal
+          },
+          scrollBeyondLastLine: false,
+          folding: !minimal,
+          lineNumbers: minimal ? "off" : undefined,
+          wordWrap: "on",
+          fontFamily: 'Menlo, Monaco, "Courier New", monospace'
+        }
+      })
+    })
+  });
+};
+
+exports.CodeEditor = CodeEditor;

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

@@ -0,0 +1 @@
+@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}& span{padding:0}}}.editorTools{@apply bg-base}}

package/dist/cjs/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var CodeEditor = require('./components/CodeEditor.js');
+
+
+
+exports.CodeEditor = CodeEditor.CodeEditor;

package/dist/esm/components/CodeEditor.js

@@ -0,0 +1,146 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _toArray from '@babel/runtime/helpers/toArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useIsDark, useResizeObserver, useDebounce, Section } from '@react-fabric/core';
+import { isString, isEmpty } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useState, useLayoutEffect, useCallback, useDeferredValue, useMemo, useImperativeHandle } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import classes from './CodeEditor.module.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CodeEditor = function CodeEditor(_ref) {
+  var ref = _ref.ref,
+    value = _ref.value,
+    schema = _ref.schema,
+    required = _ref.required,
+    readOnly = _ref.readOnly,
+    minimal = _ref.minimal,
+    onChange = _ref.onChange,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? "json" : _ref$language;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorRef = _useState2[0],
+    setEditorRef = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    monacoRef = _useState4[0],
+    setMonacoRef = _useState4[1];
+  var isDark = useIsDark();
+
+  /** ***************** watch theme change *******************/
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    theme = _useState6[0],
+    setTheme = _useState6[1];
+  useLayoutEffect(function () {
+    editorRef && setTheme(isDark ? "vs-dark" : "light");
+  }, [isDark, editorRef]);
+
+  /** ***************** watch editor container resize *******************/
+  var resizeHandler = useCallback(function (size) {
+    return editorRef === null || editorRef === void 0 ? void 0 : editorRef.layout(size);
+  }, [editorRef]);
+  var containerRef = useResizeObserver(resizeHandler);
+
+  /** ***************** defer value and pass to editor as defaultValue *******************/
+  var deferredValue = useDeferredValue(value);
+  var codeValue = useMemo(function () {
+    return isString(deferredValue) ? deferredValue : JSON.stringify(deferredValue, null, 4);
+  }, [deferredValue]);
+  var handleChange = useDebounce(function (value) {
+    var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
+    if (model) {
+      var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
+        owner: model.getLanguageId()
+      });
+      (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
+        return m.severity > 7;
+      }).length) === 0 && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
+    }
+  }, [onChange, editorRef], 1000);
+  useImperativeHandle(ref, function () {
+    return {
+      getValue: function getValue() {
+        return editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
+      },
+      validate: function validate() {
+        var model = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getModel();
+        if (model) {
+          var markers = monacoRef === null || monacoRef === void 0 ? void 0 : monacoRef.editor.getModelMarkers({
+            owner: model.getLanguageId()
+          });
+          return (markers === null || markers === void 0 ? void 0 : markers.filter(function (m) {
+            return m.severity > 8;
+          }).length) === 0;
+        }
+        try {
+          var val = editorRef === null || editorRef === void 0 ? void 0 : editorRef.getValue();
+          if (language === "json") val = JSON.parse(val);
+          return required ? !isEmpty(val) : true;
+        } catch (_unused) {
+          return false;
+        }
+      }
+    };
+  }, [required, language]);
+  var schemaUri = useCallback(function (monaco) {
+    if (schema) {
+      var _schema = _toArray(schema),
+        main = _schema[0],
+        rest = _schema.slice(1);
+      // configure the JSON language support with schemas and schema associations
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        allowComments: false,
+        schemas: [_objectSpread({
+          fileMatch: ["*"]
+        }, main)].concat(_toConsumableArray(rest))
+      });
+    }
+  }, [schema]);
+  var resetSchema = useCallback(function (_, monaco) {
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      allowComments: false,
+      schemas: []
+    });
+  }, []);
+  return /*#__PURE__*/jsx(Section, {
+    children: /*#__PURE__*/jsx("div", {
+      ref: containerRef,
+      className: classNames(classes.codeEditor, "area-content"),
+      children: /*#__PURE__*/jsx(MonacoEditor, {
+        editorDidMount: function editorDidMount(e, m) {
+          return [!!e && setEditorRef(e), !!m && setMonacoRef(m)];
+        },
+        editorWillMount: schemaUri,
+        editorWillUnmount: resetSchema,
+        value: codeValue,
+        language: language,
+        onChange: handleChange,
+        theme: theme,
+        className: classes.editor,
+        options: {
+          readOnly: readOnly,
+          minimap: {
+            enabled: !minimal
+          },
+          scrollBeyondLastLine: false,
+          folding: !minimal,
+          lineNumbers: minimal ? "off" : undefined,
+          wordWrap: "on",
+          fontFamily: 'Menlo, Monaco, "Courier New", monospace'
+        }
+      })
+    })
+  });
+};
+
+export { CodeEditor };

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

@@ -0,0 +1 @@
+@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}& span{padding:0}}}.editorTools{@apply bg-base}}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { CodeEditor } from './components/CodeEditor.js';

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

@@ -0,0 +1,18 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+export interface MonacoEditorRef {
+    validate: () => boolean;
+    getValue: () => string | undefined;
+}
+export interface EditorProps {
+    value?: string | AnyObject;
+    required?: boolean;
+    readOnly?: boolean;
+    minimal?: boolean;
+    schema?: Array<{
+        uri: string;
+        schema: KeyValue;
+    }>;
+    language?: "json" | "css" | "html" | "text" | "markdown";
+    onChange?: (value: string) => void;
+}
+export declare const CodeEditor: ({ ref, value, schema, required, readOnly, minimal, onChange, language, }: EditorProps & RefProp<MonacoEditorRef>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { CodeEditor } from "./components/CodeEditor";

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@react-fabric/monaco",
+  "version": "1.0.0-beta.0",
+  "description": "RUF: Monaco editor",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/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",
+    "test": "tests"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "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",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@react-fabric/core": "^1.0.0-beta.0",
+    "@react-fabric/utilities": "^1.0.0-beta.0",
+    "classnames": "^2.5.1",
+    "react-monaco-editor": "^0.56.2"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "monaco-editor": "^0.52.0"
+  },
+  "engines": {
+    "node": ">=18.12.0",
+    "npm": ">=8.19.0"
+  },
+  "gitHead": "83fa79064b1d57e71149005432192d506810bbda"
+}

package/src/components/CodeEditor.module.css

@@ -0,0 +1,92 @@
+/*
+ * 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;
+      }
+
+      & span {
+        padding: 0;
+      }
+    }
+  }
+
+  .editorTools {
+    @apply bg-base;
+  }
+}

package/src/components/CodeEditor.tsx

@@ -0,0 +1,205 @@
+/*
+ * 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.
+ */
+
+import {
+  Section,
+  useDebounce,
+  useIsDark,
+  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,
+  useState,
+} from "react";
+import MonacoEditor from "react-monaco-editor";
+import classes from "./CodeEditor.module.css";
+
+export interface MonacoEditorRef {
+  validate: () => boolean;
+  getValue: () => string | undefined;
+}
+
+export interface EditorProps {
+  value?: string | AnyObject;
+
+  required?: boolean;
+  readOnly?: boolean;
+
+  minimal?: boolean;
+
+  schema?: Array<{ uri: string; schema: KeyValue }>;
+
+  language?: "json" | "css" | "html" | "text" | "markdown";
+
+  onChange?: (value: string) => void;
+}
+
+export const CodeEditor = ({
+  ref,
+  value,
+  schema,
+  required,
+  readOnly,
+  minimal,
+  onChange,
+  language = "json",
+}: EditorProps & RefProp<MonacoEditorRef>) => {
+  const [editorRef, setEditorRef] = useState<AnyObject>();
+  const [monacoRef, setMonacoRef] = useState<typeof monacoEditor>();
+  const isDark = useIsDark();
+
+  /** ***************** watch theme change *******************/
+  const [theme, setTheme] = useState("");
+  useLayoutEffect(() => {
+    editorRef && setTheme(isDark ? "vs-dark" : "light");
+  }, [isDark, editorRef]);
+
+  /** ***************** watch editor container resize *******************/
+  const resizeHandler = useCallback(
+    (size: AnyObject) => 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 handleChange = useDebounce(
+    (value: string) => {
+      const model = editorRef?.getModel();
+      if (model) {
+        const markers = monacoRef?.editor.getModelMarkers({
+          owner: model.getLanguageId(),
+        });
+        markers?.filter((m) => m.severity > 7).length === 0 &&
+          onChange?.(value);
+      }
+    },
+    [onChange, editorRef],
+    1000,
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getValue() {
+        return editorRef?.getValue();
+      },
+      validate() {
+        const model = editorRef?.getModel();
+        if (model) {
+          const markers = monacoRef?.editor.getModelMarkers({
+            owner: model.getLanguageId(),
+          });
+          return markers?.filter((m) => m.severity > 8).length === 0;
+        }
+        try {
+          let val = editorRef?.getValue();
+          if (language === "json") val = JSON.parse(val);
+          return required ? !isEmpty(val) : true;
+        } catch {
+          return false;
+        }
+      },
+    }),
+    [required, language],
+  );
+
+  const schemaUri = useCallback(
+    (monaco: typeof monacoEditor) => {
+      if (schema) {
+        const [main, ...rest] = schema;
+        // configure the JSON language support with schemas and schema associations
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          validate: true,
+          allowComments: false,
+          schemas: [
+            {
+              fileMatch: ["*"], // associate with our model
+              ...main,
+            },
+            ...rest,
+          ],
+        });
+      }
+    },
+    [schema],
+  );
+
+  const resetSchema = useCallback((_: unknown, monaco: typeof monacoEditor) => {
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      allowComments: false,
+      schemas: [],
+    });
+  }, []);
+
+  return (
+    <Section>
+      <div
+        ref={containerRef}
+        className={classNames(classes.codeEditor, "area-content")}
+      >
+        <MonacoEditor
+          editorDidMount={(e, m) => [
+            !!e && setEditorRef(e),
+            !!m && setMonacoRef(m),
+          ]}
+          editorWillMount={schemaUri}
+          editorWillUnmount={resetSchema}
+          value={codeValue}
+          language={language}
+          onChange={handleChange}
+          theme={theme}
+          className={classes.editor}
+          options={{
+            readOnly,
+            minimap: {
+              enabled: !minimal,
+            },
+            scrollBeyondLastLine: false,
+            folding: !minimal,
+            lineNumbers: minimal ? "off" : undefined,
+            wordWrap: "on",
+            fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+          }}
+        />
+      </div>
+    </Section>
+  );
+};

package/src/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+export { CodeEditor } from "./components/CodeEditor";