@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
131 lines • 6.72 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["type", "editorDidMount", "readOnly", "lineNumbers", "wordWrap", "contextmenu", "language", "theme", "minimapEnabled", "version", "requireConfig", "options", "className", "supportFullScreen"],
_excluded2 = ["inlineView", "options"];
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; }
import { useThemeMode } from 'antd-style';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { themeMap } from "../hooks/themeMap";
import { useCdnFn } from "../ConfigProvider";
import { SingleMonacoEditorComponent } from "./base";
import { jsx as _jsx } from "react/jsx-runtime";
// @Todo: Controller SSR error: https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/controller.ts#L33
export { Controller as MonacoController } from "./base/controller";
export var BaseMonacoEditor = function BaseMonacoEditor(props) {
var _props$type = props.type,
type = _props$type === void 0 ? 'single' : _props$type,
editorDidMount = props.editorDidMount,
_props$readOnly = props.readOnly,
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
_props$lineNumbers = props.lineNumbers,
lineNumbers = _props$lineNumbers === void 0 ? 'on' : _props$lineNumbers,
_props$wordWrap = props.wordWrap,
wordWrap = _props$wordWrap === void 0 ? 'off' : _props$wordWrap,
_props$contextmenu = props.contextmenu,
contextmenu = _props$contextmenu === void 0 ? true : _props$contextmenu,
language = props.language,
themeFromProps = props.theme,
_props$minimapEnabled = props.minimapEnabled,
minimapEnabled = _props$minimapEnabled === void 0 ? false : _props$minimapEnabled,
_props$version = props.version,
version = _props$version === void 0 ? '0.52.2' : _props$version,
_props$requireConfig = props.requireConfig,
requireConfigFromProps = _props$requireConfig === void 0 ? {} : _props$requireConfig,
options = props.options,
className = props.className,
supportFullScreen = props.supportFullScreen,
otherProps = _objectWithoutProperties(props, _excluded);
var editorDidMountRef = useRef(editorDidMount);
useEffect(function () {
editorDidMountRef.current = editorDidMount;
}, [editorDidMount]);
var _useThemeMode = useThemeMode(),
isDarkMode = _useThemeMode.isDarkMode;
var theme = useMemo(function () {
if (themeFromProps && themeMap.includes(themeFromProps)) {
return themeFromProps;
}
if (language && ['md', 'markdown'].includes(language)) {
return isDarkMode ? 'catppuccin-mocha' : 'catppuccin-latte';
}
if (language && ['shellsession', 'console'].includes(language)) {
return isDarkMode ? 'material-theme-darker' : 'material-theme-lighter';
}
return isDarkMode ? 'slack-dark' : 'slack-ochin';
}, [language, isDarkMode, themeFromProps]);
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
editorInstance = _useState2[0],
setEditorInstance = _useState2[1];
var handleEditorDidMount = useCallback(function (monaco, editor) {
var _editorDidMountRef$cu;
setEditorInstance(editor);
(_editorDidMountRef$cu = editorDidMountRef.current) === null || _editorDidMountRef$cu === void 0 || _editorDidMountRef$cu.call(editorDidMountRef, monaco, editor);
}, []);
var editorOptions = useMemo(function () {
var newOps = Object.assign({}, options, {
readOnly: readOnly,
lineNumbers: lineNumbers,
wordWrap: wordWrap,
contextmenu: contextmenu,
minimap: minimapEnabled === undefined ? options === null || options === void 0 ? void 0 : options.minimap : Object.assign({}, options === null || options === void 0 ? void 0 : options.minimap, {
enabled: minimapEnabled
})
});
editorInstance === null || editorInstance === void 0 || editorInstance.updateOptions(newOps);
return newOps;
}, [options, readOnly, lineNumbers, wordWrap, contextmenu, minimapEnabled, editorInstance]);
var genCdnUrl = useCdnFn();
var requireConfig = useMemo(function () {
return Object.assign({}, requireConfigFromProps, {
paths: _objectSpread({
vs: genCdnUrl({
path: 'min/vs',
pkg: 'monaco-editor',
version: version
})
}, requireConfigFromProps.paths)
});
}, [genCdnUrl, requireConfigFromProps, version]);
if (type !== 'diff') {
return /*#__PURE__*/_jsx(SingleMonacoEditorComponent, _objectSpread({
className: className,
editorDidMount: handleEditorDidMount,
language: language,
options: editorOptions,
requireConfig: requireConfig,
supportFullScreen: editorInstance && supportFullScreen,
theme: theme
}, otherProps));
}
return /*#__PURE__*/_jsx(SingleMonacoEditorComponent.MonacoDiffEditor, _objectSpread({
className: className,
editorDidMount: handleEditorDidMount,
language: language,
options: editorOptions,
requireConfig: requireConfig,
supportFullScreen: editorInstance && supportFullScreen,
theme: theme
}, otherProps));
};
export var MonacoEditor = function MonacoEditor(props) {
return /*#__PURE__*/_jsx(BaseMonacoEditor, _objectSpread(_objectSpread({}, props), {}, {
type: "single"
}));
};
export var MonacoDiffEditor = function MonacoDiffEditor(props) {
var _props$inlineView = props.inlineView,
inlineView = _props$inlineView === void 0 ? 'off' : _props$inlineView,
options = props.options,
otherProps = _objectWithoutProperties(props, _excluded2);
return /*#__PURE__*/_jsx(BaseMonacoEditor, _objectSpread(_objectSpread({
options: Object.assign({
useInlineViewWhenSpaceIsLimited: inlineView === 'on' || inlineView === 'auto',
renderSideBySide: inlineView === 'off' || inlineView === 'auto'
}, options)
}, otherProps), {}, {
type: "diff"
}));
};