@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
273 lines (272 loc) • 11.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CodeEditor", {
enumerable: true,
get: function() {
return CodeEditor;
}
});
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _define_property = require("@swc/helpers/_/_define_property");
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _jsxruntime = require("react/jsx-runtime");
var _core = require("@mantine/core");
var _hooks = require("@mantine/hooks");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("@monaco-editor/react"));
var _monacoeditor = require("monaco-editor");
var _react1 = require("react");
var _clsx = /*#__PURE__*/ _interop_require_default._(require("clsx"));
var _hooks1 = require("../../hooks");
var _copyToClipboard = require("../copyToClipboard");
var _CodeEditormodulecss = /*#__PURE__*/ _interop_require_default._(require("./CodeEditor.module.css"));
var _xml = require("./languages/xml");
var _search = require("./search");
var defaultProps = {
language: 'plaintext',
monacoLoader: 'local',
defaultValue: '',
minHeight: 300
};
var CodeEditor = function(props) {
var _useProps = (0, _core.useProps)('CodeEditor', defaultProps, props), language = _useProps.language, defaultValue = _useProps.defaultValue, onChange = _useProps.onChange, onCopy = _useProps.onCopy, onSearch = _useProps.onSearch, onFocus = _useProps.onFocus, value = _useProps.value, label = _useProps.label, required = _useProps.required, labelProps = _useProps.labelProps, error = _useProps.error, errorProps = _useProps.errorProps, description = _useProps.description, descriptionProps = _useProps.descriptionProps, minHeight = _useProps.minHeight, maxHeight = _useProps.maxHeight, disabled = _useProps.disabled, monacoLoader = _useProps.monacoLoader, tmp = _useProps.options, tabSize = (tmp === void 0 ? {
tabSize: 2
} : tmp).tabSize, editorHandle = _useProps.editorHandle, others = _object_without_properties._(_useProps, [
"language",
"defaultValue",
"onChange",
"onCopy",
"onSearch",
"onFocus",
"value",
"label",
"required",
"labelProps",
"error",
"errorProps",
"description",
"descriptionProps",
"minHeight",
"maxHeight",
"disabled",
"monacoLoader",
"options",
"editorHandle"
]);
var _useState = _sliced_to_array._((0, _react1.useState)(false), 2), loaded = _useState[0], setLoaded = _useState[1];
var _useUncontrolled = _sliced_to_array._((0, _hooks.useUncontrolled)({
value: value,
defaultValue: defaultValue,
onChange: onChange,
finalValue: ''
}), 2), _value = _useUncontrolled[0], handleChange = _useUncontrolled[1];
var _useParentHeight = _sliced_to_array._((0, _hooks1.useParentHeight)(), 2), parentHeight = _useParentHeight[0], ref = _useParentHeight[1];
var editorRef = (0, _react1.useRef)(null);
var loadLocalMonaco = /*#__PURE__*/ function() {
var _ref = _async_to_generator._(function() {
var monacoInstance;
return _ts_generator._(this, function(_state) {
switch(_state.label){
case 0:
return [
4,
Promise.resolve().then(function() {
return /*#__PURE__*/ _interop_require_wildcard._(require("monaco-editor"));
})
];
case 1:
monacoInstance = _state.sent();
_react.loader.config({
monaco: monacoInstance
});
setLoaded(true);
return [
2
];
}
});
});
return function loadLocalMonaco() {
return _ref.apply(this, arguments);
};
}();
var registerLanguages = function(monaco) {
if (monaco && language === 'xml') {
_xml.XML.register(monaco);
}
};
var registerThemes = function(monaco) {
monaco.editor.defineTheme('light-disabled', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.background': theme.colors.gray[2]
}
});
monaco.editor.defineTheme('vs-dark-disabled', {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {
'editor.background': theme.colors.navy[7]
}
});
};
var handleSearch = function() {
if (editorRef.current) {
editorRef.current.focus();
editorRef.current.trigger('editor', 'actions.find', '');
onSearch === null || onSearch === void 0 ? void 0 : onSearch();
}
};
var _useState1 = _sliced_to_array._((0, _react1.useState)(false), 2), hasMonacoError = _useState1[0], setHasMonacoError = _useState1[1];
var hasMonacoErrorRef = (0, _react1.useRef)(false);
hasMonacoErrorRef.current = hasMonacoError;
var renderErrorOutline = !!error || hasMonacoError;
var theme = (0, _core.useMantineTheme)();
var colorScheme = (0, _core.useMantineColorScheme)().colorScheme;
(0, _react1.useEffect)(function() {
if (monacoLoader === 'local') {
loadLocalMonaco();
} else {
setLoaded(true);
}
}, []);
var handleValidate = function(markers) {
setHasMonacoError(markers.some(function(marker) {
return marker.severity === _monacoeditor.MarkerSeverity.Error;
}));
};
var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Label, _object_spread_props._(_object_spread._({
required: required
}, labelProps), {
children: label
})) : null;
var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
children: description
})) : null;
var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Error, _object_spread_props._(_object_spread._({
mt: "xs"
}, errorProps), {
children: error
})) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Space, {
h: "xs"
});
var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
children: [
_label,
_description
]
}) : null;
var _buttons = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
justify: "right",
gap: 0,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_search.Search, {
handleSearch: handleSearch
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_copyToClipboard.CopyToClipboard, {
value: _value,
onCopy: function() {
return onCopy === null || onCopy === void 0 ? void 0 : onCopy();
}
})
]
});
var editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';
if (disabled) {
editorTheme += '-disabled';
}
var _editor = loaded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
p: "md",
pl: "xs",
className: (0, _clsx.default)(_CodeEditormodulecss.default.editor, _define_property._({}, _CodeEditormodulecss.default.valid, !renderErrorOutline), _define_property._({}, _CodeEditormodulecss.default.error, renderErrorOutline), _define_property._({}, _CodeEditormodulecss.default.disabled, disabled)),
"data-testid": "editor-wrapper",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default, {
onValidate: handleValidate,
defaultLanguage: language,
theme: editorTheme,
options: {
minimap: {
enabled: false
},
wordWrap: 'on',
scrollBeyondLastLine: false,
formatOnPaste: true,
fontSize: (0, _core.px)(theme.fontSizes.xs),
readOnly: disabled,
tabSize: tabSize
},
value: _value,
onChange: handleChange,
onMount: function(editor, monaco) {
editorRef.current = editor;
if (editorHandle) {
editorHandle.current = editor;
}
registerLanguages(monaco);
registerThemes(monaco);
editor.onDidFocusEditorText(function() {
return onFocus === null || onFocus === void 0 ? void 0 : onFocus();
});
editor.onDidBlurEditorText(/*#__PURE__*/ _async_to_generator._(function() {
return _ts_generator._(this, function(_state) {
// monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
setTimeout(/*#__PURE__*/ _async_to_generator._(function() {
var _editor_getAction;
return _ts_generator._(this, function(_state) {
switch(_state.label){
case 0:
if (!!hasMonacoErrorRef.current) return [
3,
2
];
return [
4,
editor === null || editor === void 0 ? void 0 : (_editor_getAction = editor.getAction('editor.action.formatDocument')) === null || _editor_getAction === void 0 ? void 0 : _editor_getAction.run()
];
case 1:
_state.sent();
_state.label = 2;
case 2:
return [
2
];
}
});
}), 550);
return [
2
];
});
}));
}
})
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
className: _CodeEditormodulecss.default.editor,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Loader, {})
});
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, _object_spread_props._(_object_spread._({
justify: "flex-start",
gap: 0,
h: Math.max(parentHeight, minHeight),
mah: maxHeight,
ref: ref
}, others), {
children: [
_header,
_buttons,
_editor,
_error
]
}));
};
//# sourceMappingURL=CodeEditor.js.map