@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
277 lines (276 loc) • 12.2 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 _useParentHeight = require("../../hooks/useParentHeight.js");
var _CopyToClipboard = require("../CopyToClipboard/CopyToClipboard.js");
var _CodeEditormodulecss = /*#__PURE__*/ _interop_require_default._(require("./CodeEditor.module.css"));
var _xml = require("./languages/xml.js");
var _Search = require("./search/Search.js");
var defaultProps = {
language: 'plaintext',
monacoLoader: 'local',
defaultValue: '',
minHeight: 300
};
var CodeEditor = function CodeEditor(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 _useParentHeight1 = _sliced_to_array._((0, _useParentHeight.useParentHeight)(), 2), parentHeight = _useParentHeight1[0], ref = _useParentHeight1[1];
var editorRef = (0, _react1.useRef)(null);
var loadLocalMonaco = function loadLocalMonaco() {
return _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
];
}
});
})();
};
var registerLanguages = function registerLanguages(monaco) {
if (monaco && language === 'xml') {
_xml.XML.register(monaco);
}
};
var registerThemes = function registerThemes(monaco) {
monaco.editor.defineTheme('light', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.background': theme.colors.gray[0]
}
});
};
var handleSearch = function handleSearch() {
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 hasError = !!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 handleValidate(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._({}, errorProps), {
children: error
})) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Space, {
h: "sm"
});
var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {
gap: "xxs",
children: [
_label,
_description
]
}) : null;
var _buttons = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
justify: "right",
gap: "xs",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Search.Search, {
handleSearch: handleSearch
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_CopyToClipboard.CopyToClipboard, {
value: _value,
onCopy: function onCopy1() {
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.root, _define_property._({}, _CodeEditormodulecss.default.error, hasError), _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,
stickyScroll: {
enabled: false
},
tabSize: tabSize
},
value: _value,
onChange: handleChange,
beforeMount: function beforeMount(monaco) {
registerLanguages(monaco);
registerThemes(monaco);
},
onMount: function onMount(editor) {
editorRef.current = editor;
if (editorHandle) {
editorHandle.current = editor;
}
editor.onDidFocusEditorText(function() {
return onFocus === null || onFocus === void 0 ? void 0 : onFocus();
});
editor.onDidBlurEditorText(function() {
return _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(function() {
return _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, {})
});
var height = Math.max(Number.isNaN(parentHeight) ? 0 : parentHeight, minHeight);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, _object_spread_props._(_object_spread._({
justify: "flex-start",
gap: "sm",
h: height,
mah: maxHeight,
ref: ref
}, others), {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
justify: "space-between",
children: [
_header,
_buttons
]
}),
_editor,
_error
]
}));
};
CodeEditor.displayName = 'CodeEditor';
//# sourceMappingURL=CodeEditor.js.map